Adjust nav for mobile and desktop (#15)

Co-authored-by: Gyles Fohl <[email protected]>

app/routes/_layout/Header.tsx

@@ -1,27 +1,27 @@
-import { Dialog } from "@headlessui/react";
+import { Dialog, DialogPanel } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
-import { Link, NavLink } from "@remix-run/react";
+import { NavLink } from "@remix-run/react";
+import clsx from "clsx";
 import { useState } from "react";
 
 import { ThemeToggle } from "~/components/ThemeToggle";
-import { routeData, navigationData } from "~/utils/routeData";
+import { navigationData } from "~/utils/routeData";
 
 const Header = () => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
+  const navClasses =
+    "text-sm font-semibold leading-6 text-foreground rounded-lg px-3 py-2 hover:bg-accent";
+
   return (
     <header className="">
       <nav className="mx-auto flex max-w-7xl p-6 md:px-8" aria-label="Global">
         <div className="flex flex-1 md:justify-center">
           <div className="hidden items-center md:flex md:gap-x-12">
             {navigationData.map((item) => (
-              <Link
-                key={item.name}
-                to={item.route}
-                className="text-sm font-semibold leading-6 text-foreground"
-              >
+              <NavLink key={item.name} to={item.route} className={navClasses}>
                 {item.name}
-              </Link>
+              </NavLink>
             ))}
             <ThemeToggle />
           </div>
@@ -36,9 +36,6 @@ const Header = () => {
             </button>
           </div>
         </div>
-        <Link to={routeData.home.route} className="-m-1.5 p-1.5">
-          <span className="sr-only">{routeData.home.title}</span>
-        </Link>
       </nav>
       <Dialog
         as="div"
@@ -47,7 +44,7 @@ const Header = () => {
         onClose={setMobileMenuOpen}
       >
         <div className="fixed inset-0 z-10" />
-        <Dialog.Panel className="fixed inset-y-0 left-0 z-10 w-full overflow-y-auto bg-background px-6 py-6">
+        <DialogPanel className="fixed inset-y-0 left-0 z-10 w-full overflow-y-auto bg-background px-6 py-6">
           <div className="flex items-center justify-between">
             <div className="flex flex-1">
               <button
@@ -59,22 +56,20 @@ const Header = () => {
                 <XMarkIcon className="h-6 w-6" aria-hidden="true" />
               </button>
             </div>
-            <Link to={routeData.home.route} className="-m-1.5 p-1.5">
-              <span className="sr-only">{routeData.home.title}</span>
-            </Link>
           </div>
           <div className="mt-6 space-y-2">
             {navigationData.map((item) => (
               <NavLink
                 key={item.name}
                 to={item.route}
-                className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-foreground hover:bg-accent"
+                className={clsx("-mx-3 block", navClasses)}
               >
                 {item.name}
               </NavLink>
             ))}
+            <ThemeToggle />
           </div>
-        </Dialog.Panel>
+        </DialogPanel>
       </Dialog>
     </header>
   );