TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 05:33:31 +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

10
apps/login/app/layout.tsx
View File

@@ -62,16 +62,6 @@ export default async function RootLayout({
{children}
</div>
</div>
<div
className={`rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20 ${
showNav ? "" : "max-w-[440px] w-full fixed bottom-4"
}`}
>
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
<Byline />
</div>
</div>
</div>
</div>
</div>

13
apps/login/ui/Byline.tsx
View File

@@ -1,13 +0,0 @@
import Theme from "./Theme";
export default function Byline() {
return (
<div className="flex items-center justify-between w-full p-3.5 lg:px-5 lg:py-3">
<div className="flex items-center space-x-1.5">
<div className="text-sm text-gray-600">By</div>
<div className="text-sm font-semibold">ZITADEL</div>
</div>
<Theme />
</div>
);
}

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>
);

5
apps/login/ui/Theme.tsx
View File

@@ -2,6 +2,7 @@
import React, { useEffect, useState } from "react";
import { useTheme } from "next-themes";
import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
function Theme() {
const { resolvedTheme, setTheme } = useTheme();
@@ -28,7 +29,7 @@ function Theme() {
}`}
onClick={() => setTheme("dark")}
>
<i className="flex-shrink-0 text-xl rounded-full las la-moon"></i>
<MoonIcon className="h-4 w-4 flex-shrink-0 text-xl rounded-full" />
</button>
<button
className={`h-8 w-8 rounded-full flex flex-row items-center justify-center hover:opacity-100 transition-all ${
@@ -36,7 +37,7 @@ function Theme() {
}`}
onClick={() => setTheme("light")}
>
<i className="flex-shrink-0 text-xl rounded-full las la-sun"></i>
<SunIcon className="h-6 w-6 flex-shrink-0 text-xl rounded-full" />
</button>
</div>
);