cleaner navigation

apps/login/app/layout.tsx

@@ -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>

apps/login/ui/Byline.tsx

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

apps/login/ui/GlobalNav.tsx

@@ -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,9 +30,12 @@ export function GlobalNav() {
           </h2>
         </Link>
       </div>
+
+      <div className="absolute right-0 top-0 flex flex-row items-center lg:hidden">
+        <Theme />
         <button
           type="button"
-        className="group absolute right-0 top-0 flex h-14 items-center space-x-2 px-4 lg:hidden"
+          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">
@@ -43,13 +47,17 @@ export function GlobalNav() {
             <Bars3Icon className="block w-6 " />
           )}
         </button>
+      </div>
 
       <div
-        className={clsx("overflow-y-auto lg:static lg:block", {
+        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>
   );

apps/login/ui/Theme.tsx

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