update nav to include guestbook

tahsinature · Jun 1, 2024 · 8515b0e · 8515b0e
1 parent 9ebf2a8
commit 8515b0e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/src/components/NavBar/MobileSheet.tsx b/src/components/NavBar/MobileSheet.tsx
@@ -2,14 +2,15 @@
 
 import Link from "next/link";
 import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTrigger } from "@/components/ui/sheet";
-import { Menu, GithubIcon } from "lucide-react";
+import { Menu } from "lucide-react";
 import { usePathname } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
 import MyAvatar from "@/components/NavBar/MyAvatar";
 import { navItems } from "@/components/NavBar/data";
 import clsx from "clsx";
-import Signature from "@/components/Footer/Signature";
+import SignatureSVG from "@/components/SVGs/SignatureSVG";
+import fonts from "@/lib/fonts";
 
 function MobileSheet() {
   const pathname = usePathname();
@@ -27,7 +28,7 @@ function MobileSheet() {
           <MyAvatar />
         </SheetHeader>
 
-        <div className="flex flex-col mt-5 h-full">
+        <div className={clsx("flex flex-col mt-5 h-full", fonts.calculatorFont.className)}>
           {navItems.map((item) => (
             <SheetClose key={item.href} asChild className="py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-500 dark:hover:text-gray-400">
               <Link href={item.href} className={clsx({ underline: item.isActiveCheck(pathname) })}>
@@ -47,7 +48,7 @@ function MobileSheet() {
                 CARFAX
               </a>
             </small>
-            <Signature scale={50} className="mt-5" />
+            <SignatureSVG className="mt-5" />
           </div>
 
           <div className="mt-2 text-gray-600">

diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -9,6 +9,9 @@ import MobileSheet from "@/components/NavBar/MobileSheet";
 import MyAvatar from "@/components/NavBar/MyAvatar";
 import ThemeToggle from "@/components/NavBar/ThemeToggle";
 import { navItems } from "@/components/NavBar/data";
+import fonts from "@/lib/fonts";
+
+const filterNavItems = navItems.filter((ni) => ni.name.toLowerCase() !== "home");
 
 const GitHubButton = () => (
   <a target="_blank" rel="noreferrer" href="https://github.com/tahsinature">
@@ -28,26 +31,28 @@ export default function NavBar() {
   const pathname = usePathname();
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <header className={clsx("sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", fonts.calculatorFont.className)}>
       <div className="container flex h-14 max-w-screen-2xl items-center">
         <div className="mr-4 flex items-center">
           <div className="hidden md:flex">
-            <MyAvatar />
+            <Link href={"/"}>
+              <MyAvatar />
+            </Link>
           </div>
           <div className="md:hidden">
             <MobileSheet />
           </div>
 
-          <div className="hidden md:flex items-center gap-6 text-sm ml-[2rem]">
-            {navItems.map((nav) => (
+          <div className="hidden md:flex items-center gap-6 ml-[2rem]">
+            {filterNavItems.map((nav) => (
               <Link href={nav.href} key={nav.name} className={clsx("hover:text-foreground/70", { underline: nav.isActiveCheck(pathname) })}>
                 {nav.name}
               </Link>
             ))}
           </div>
         </div>
 
-        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+        <div className={clsx("flex flex-1 items-center justify-between space-x-2 md:justify-end")}>
           <CommandMenu />
           <GitHubButton />
           <ThemeToggle />

diff --git a/src/components/NavBar/data.ts b/src/components/NavBar/data.ts
@@ -5,5 +5,6 @@ export const navItems = [
   { name: "Tools", href: "/tools", isActiveCheck: (pathname: string) => pathname.startsWith("/tools") },
   { name: "Open Source", href: "/open-source", isActiveCheck: (pathname: string) => pathname.startsWith("/open-source") },
   { name: "Photographs", href: "/photographs", isActiveCheck: (pathname: string) => pathname.startsWith("/photographs") },
+  { name: "Guestbook", href: "/guestbook", isActiveCheck: (pathname: string) => pathname.startsWith("/guestbook") },
   // { name: "Test", href: "/testpage", isActiveCheck: (pathname: string) => pathname.startsWith("/testpage") },
 ];