From 97b149259bb435de9b23a05739ef89f0e0ceb3e1 Mon Sep 17 00:00:00 2001
From: mickasmt <sermont.mickael@hotmail.fr>
Date: Wed, 29 May 2024 15:57:46 +0200
Subject: [PATCH] refactor: update navbar design

---
 components/layout/navbar.tsx           | 63 +++++++++++++++++---------
 components/layout/user-account-nav.tsx |  2 +-
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 94965cf2..a1b4acb8 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -2,12 +2,16 @@
 
 import { MainNavItem } from "@/types";
 import { useSession } from "next-auth/react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
+import { Icons } from "@/components/shared/icons";
+import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import useScroll from "@/hooks/use-scroll";
 import { useSigninModal } from "@/hooks/use-signin-modal";
-import { Button } from "@/components/ui/button";
 
-import { Icons } from "../shared/icons";
 import { MainNav } from "./main-nav";
 import { UserAccountNav } from "./user-account-nav";
 
@@ -16,6 +20,7 @@ interface NavBarProps {
   children?: React.ReactNode;
   rightElements?: React.ReactNode;
   scroll?: boolean;
+  large?: boolean;
 }
 
 export function NavBar({
@@ -23,10 +28,13 @@ export function NavBar({
   children,
   rightElements,
   scroll = false,
+  large = false,
 }: NavBarProps) {
   const scrolled = useScroll(50);
   const signInModal = useSigninModal();
   const { data: session, status } = useSession();
+  const selectedLayout = usePathname();
+  const dashBoard = selectedLayout.startsWith("/dashboard");
 
   return (
     <header
@@ -34,32 +42,35 @@ export function NavBar({
         scroll ? (scrolled ? "border-b" : "bg-background/0") : "border-b"
       }`}
     >
-      <div className="container flex h-[60px] items-center justify-between py-4">
+      <MaxWidthWrapper
+        className="flex h-[60px] items-center justify-between py-4"
+        large={large}
+      >
         <MainNav items={items}>{children}</MainNav>
 
         <div className="flex items-center space-x-3">
           {rightElements}
 
-          {/* {!user ? (
-            <Link
-              href="/login"
-              className={cn(
-                buttonVariants({
-                  variant: "outline",
-                  rounded: "full",
-                }),
-                "px-4",
-              )}
-            >
-              Login Page
-            </Link>
-          ) : null} */}
-
           {session ? (
-            <UserAccountNav user={session.user} />
+            <>
+              {dashBoard ? (
+                <UserAccountNav user={session.user} />
+              ) : (
+                <Link href="/dashboard">
+                  <Button
+                    className="gap-2 px-4"
+                    variant="default"
+                    size="sm"
+                    rounded="full"
+                  >
+                    <span>Dashboard</span>
+                  </Button>
+                </Link>
+              )}
+            </>
           ) : status === "unauthenticated" ? (
             <Button
-              className="animate-fade-in gap-2 px-4 transition-colors ease-out"
+              className="gap-2 px-4"
               variant="default"
               size="sm"
               rounded="full"
@@ -68,9 +79,17 @@ export function NavBar({
               <span>Sign In</span>
               <Icons.arrowRight className="size-4" />
             </Button>
-          ) : null}
+          ) : (
+            <>
+              {dashBoard ? (
+                <Skeleton className="size-9 rounded-full" />
+              ) : (
+                <Skeleton className="h-9 w-24 rounded-full" />
+              )}
+            </>
+          )}
         </div>
-      </div>
+      </MaxWidthWrapper>
     </header>
   );
 }
diff --git a/components/layout/user-account-nav.tsx b/components/layout/user-account-nav.tsx
index 190ed08e..54ff8ad1 100644
--- a/components/layout/user-account-nav.tsx
+++ b/components/layout/user-account-nav.tsx
@@ -24,7 +24,7 @@ export function UserAccountNav({ user }: UserAccountNavProps) {
       <DropdownMenuTrigger>
         <UserAvatar
           user={{ name: user?.name || null, image: user?.image || null }}
-          className="size-8 animate-fade-in border transition-colors ease-out"
+          className="size-9 border"
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">