feat: improve header

marcelblijleven · Jan 1, 2024 · 019ba1e · 019ba1e
1 parent f56b1b4
commit 019ba1e
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 25 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,10 +6,10 @@ import {Inter} from 'next/font/google';
 import {type ReactNode} from "react";
 
 import Footer from "@/components/layout/footer";
-import Header from "@/components/layout/header";
 import {ThemeProvider} from "@/components/theme/theme-provider";
 import {Toaster} from "@/components/ui/toaster";
 import {cn} from "@/lib/utils";
+import Header from "@/components/layout/header";
 
 
 const inter = Inter({subsets: ['latin']});

diff --git a/src/components/layout/header-title.tsx b/src/components/layout/header-title.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+
+export default function HeaderTitle() {
+  const currentPath = usePathname();
+
+  if (currentPath === "/") {
+    return (
+      <div className={"flex gap-2 items-center"}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+          <path fillRule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clipRule="evenodd" />
+        </svg>
+        <Link
+          href={"/"}
+          className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 text-xl md:text-2xl font-extrabold"
+          aria-label="Back to home"
+        >
+          Beanstats
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <Link
+      href={"/"}
+      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+      aria-label="Back to home"
+    >
+      &larr; Back to home
+    </Link>
+  );
+}
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
@@ -1,30 +1,36 @@
-"use client";
+import headerNavLinks from "@/components/layout/nav-links";
+import MobileNav from "./mobile-nav";
+import HeaderTitle from "@/components/layout/header-title";
 import Link from "next/link";
-
-import {Navigation} from "@/components/layout/navigation";
-import ThemeSwitcher from "@/components/theme/theme-switcher";
 import UserButton from "@/components/account/user-button";
+import ThemeSwitcher from "@/components/theme/theme-switcher";
 
-// Header has z-20 because of progress bars
-
-const Header = () => (
-    <header className={"sticky z-20 top-0 p-2 bg-opacity-95 w-full bg-background/95 border-b-2 border-accent"}>
-        <div className={"mx-auto py-2 flex items-center justify-between w-full max-w-[1600px]"}>
-            <div className={"flex items-center gap-2"}>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
-                    <path fillRule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clipRule="evenodd" />
-                </svg>
-                <Link className={"text-xl md:text-2xl font-extrabold"} href={"/"}>beanstats</Link>
-            </div>
-            <div className={"flex items-center space-x-2"}>
-                <UserButton />
-                <ThemeSwitcher/>
-            </div>
-        </div>
-        <div className={"mx-auto max-w-[1600px]"}>
-            <Navigation/>
+const Header = () => {
+  return (
+    <header className="sticky z-20 flex items-center justify-between p-4 bg-opacity-95 bg-background/95 border-b-2 border-accent w-full py-4">
+      <div>
+        <HeaderTitle />
+      </div>
+      <div className="flex items-center space-x-4 leading-5 sm:space-x-6">
+        {headerNavLinks
+          .filter((link) => link.href !== "/")
+          .map((link) => (
+            <Link
+              key={link.title}
+              href={link.href}
+              className="hidden font-medium text-gray-900 text-sm dark:text-gray-100 sm:block"
+            >
+              {link.title}
+            </Link>
+          ))}
+        <div className={"flex items-center space-x-2"}>
+          <UserButton />
+          <ThemeSwitcher/>
         </div>
+        <MobileNav />
+      </div>
     </header>
-);
+  );
+};
 
-export default Header;
+export default Header;
diff --git a/src/components/layout/mobile-nav.tsx b/src/components/layout/mobile-nav.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import headerNavLinks from "@/components/layout/nav-links";
+
+const MobileNav = () => {
+  const [navShow, setNavShow] = useState(false);
+
+  const onToggleNav = () => {
+    setNavShow((status) => {
+      if (status) {
+        document.body.style.overflow = "auto";
+      } else {
+        // Prevent scrolling
+        document.body.style.overflow = "hidden";
+      }
+      return !status;
+    });
+  };
+
+  return (
+    <>
+      <button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          className="h-8 w-8 text-gray-900 dark:text-gray-100"
+        >
+          <path
+            fillRule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+      <div
+        className={`fixed left-0 top-0 z-10 h-full w-full transform bg-background opacity-95 duration-300 ease-in-out dark:opacity-[0.98] ${
+          navShow ? "translate-x-0" : "translate-x-full"
+        }`}
+      >
+        <div className="flex justify-end">
+          <button className="mr-8 mt-4 h-8 w-8" aria-label="Toggle Menu" onClick={onToggleNav}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="text-gray-900 dark:text-gray-100"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+        <nav className="fixed mt-8 h-full">
+          {headerNavLinks.map((link) => (
+            <div key={link.title} className="px-12 py-4">
+              <Link
+                href={link.href}
+                className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+                onClick={onToggleNav}
+              >
+                {link.title}
+              </Link>
+            </div>
+          ))}
+        </nav>
+      </div>
+    </>
+  );
+};
+
+export default MobileNav;
diff --git a/src/components/layout/nav-links.ts b/src/components/layout/nav-links.ts
@@ -0,0 +1,9 @@
+const headerNavLinks = [
+  { href: '/', title: 'Home' },
+  { href: '/dashboard', title: 'Dashboard' },
+  { href: '/coffee', title: 'Coffee' },
+  { href: '/coffee/freeze', title: 'Freeze' },
+  { href: '/brews/cafe', title: 'Cafe brews' },
+];
+
+export default headerNavLinks;