TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 07:24:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleaner navigation

Browse Source
This commit is contained in:
Max Peintner
2023-05-24 14:49:07 +02:00
parent c064a334be
commit f0bd712859
4 changed files with 34 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/login/ui/GlobalNav.tsx
View File

@@ -7,6 +7,7 @@ import { useSelectedLayoutSegment, usePathname } from "next/navigation";
import clsx from "clsx";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
import { useState } from "react";
import Theme from "./Theme";
export function GlobalNav() {
const [isOpen, setIsOpen] = useState(false);
@@ -29,27 +30,34 @@ export function GlobalNav() {
</h2>
</Link>
</div>
<button
type="button"
className="group absolute right-0 top-0 flex h-14 items-center space-x-2 px-4 lg:hidden"
onClick={() => setIsOpen(!isOpen)}
>
<div className="font-medium text-text-light-secondary-500 group-hover:text-text-light-500 dark:text-text-dark-secondary-500 dark:group-hover:text-text-dark-500">
Menu
</div>
{isOpen ? (
<XMarkIcon className="block w-6 " />
) : (
<Bars3Icon className="block w-6 " />
)}
</button>
<div className="absolute right-0 top-0 flex flex-row items-center lg:hidden">
<Theme />
<button
type="button"
className="group flex h-14 items-center space-x-2 px-4"
onClick={() => setIsOpen(!isOpen)}
>
<div className="font-medium text-text-light-secondary-500 group-hover:text-text-light-500 dark:text-text-dark-secondary-500 dark:group-hover:text-text-dark-500">
Menu
</div>
{isOpen ? (
<XMarkIcon className="block w-6 " />
) : (
<Bars3Icon className="block w-6 " />
)}
</button>
</div>
<div
className={clsx("overflow-y-auto lg:static lg:block", {
"fixed inset-x-0 bottom-0 top-14 mt-px bg-white/80 dark:bg-black/80 backdrop-blur-lg":
isOpen,
hidden: !isOpen,
})}
className={clsx(
"overflow-y-auto lg:static lg:flex lg:flex-col justify-between h-full",
{
"fixed inset-x-0 bottom-0 top-14 mt-px bg-white/80 dark:bg-black/80 backdrop-blur-lg":
isOpen,
hidden: !isOpen,
}
)}
>
<nav
className={`space-y-6 px-4 py-5 ${
@@ -72,6 +80,10 @@ export function GlobalNav() {
);
})}
</nav>
<div className="flex flex-row p-4">
<Theme />
</div>
</div>
</div>
);