From 0d9620e246f14ad4b69a09e1292d5c2dc99cad2a Mon Sep 17 00:00:00 2001
From: mickasmt <sermont.mickael@hotmail.fr>
Date: Mon, 3 Jun 2024 00:02:41 +0200
Subject: [PATCH] refactor: updated navbar & mobile nav - improved layouts

---
 app/(dashboard)/dashboard/billing/loading.tsx |  12 +-
 app/(dashboard)/dashboard/loading.tsx         |  18 +-
 app/(dashboard)/dashboard/page.tsx            |   4 +-
 app/(dashboard)/{dashboard => }/layout.tsx    |   6 +-
 app/(docs)/docs/layout.tsx                    |   5 +-
 app/(docs)/layout.tsx                         |  37 +---
 app/(marketing)/layout.tsx                    |   5 +-
 app/(marketing)/pricing/loading.tsx           |   8 +-
 components/dashboard/header.tsx               |  12 +-
 components/docs/sidebar-nav.tsx               |  25 ++-
 .../layout/{nav.tsx => dashboard-sidenav.tsx} |   0
 components/layout/main-nav.tsx                |  80 ---------
 components/layout/mobile-nav.tsx              | 161 +++++++++++++-----
 components/layout/navbar.tsx                  | 107 ++++++++----
 components/shared/card-skeleton.tsx           |  15 +-
 components/shared/max-width-wrapper.tsx       |   8 +-
 tailwind.config.ts                            |   2 +-
 17 files changed, 273 insertions(+), 232 deletions(-)
 rename app/(dashboard)/{dashboard => }/layout.tsx (88%)
 rename components/layout/{nav.tsx => dashboard-sidenav.tsx} (100%)
 delete mode 100644 components/layout/main-nav.tsx

diff --git a/app/(dashboard)/dashboard/billing/loading.tsx b/app/(dashboard)/dashboard/billing/loading.tsx
index 4caab9fb..331e2776 100644
--- a/app/(dashboard)/dashboard/billing/loading.tsx
+++ b/app/(dashboard)/dashboard/billing/loading.tsx
@@ -1,6 +1,7 @@
-import { CardSkeleton } from "@/components/shared/card-skeleton"
-import { DashboardHeader } from "@/components/dashboard/header"
-import { DashboardShell } from "@/components/dashboard/shell"
+import { Skeleton } from "@/components/ui/skeleton";
+import { DashboardHeader } from "@/components/dashboard/header";
+import { DashboardShell } from "@/components/dashboard/shell";
+import { CardSkeleton } from "@/components/shared/card-skeleton";
 
 export default function DashboardBillingLoading() {
   return (
@@ -9,9 +10,10 @@ export default function DashboardBillingLoading() {
         heading="Billing"
         text="Manage billing and your subscription plan."
       />
-      <div className="grid gap-10">
+      <div className="grid gap-8">
+        <Skeleton className="h-28 w-full rounded-lg md:h-24" />
         <CardSkeleton />
       </div>
     </DashboardShell>
-  )
+  );
 }
diff --git a/app/(dashboard)/dashboard/loading.tsx b/app/(dashboard)/dashboard/loading.tsx
index 66dfffd9..ec744901 100644
--- a/app/(dashboard)/dashboard/loading.tsx
+++ b/app/(dashboard)/dashboard/loading.tsx
@@ -1,20 +1,14 @@
-import { CardSkeleton } from "@/components/shared/card-skeleton"
-import { DashboardHeader } from "@/components/dashboard/header"
-import { DashboardShell } from "@/components/dashboard/shell"
-import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton";
+import { DashboardHeader } from "@/components/dashboard/header";
+import { DashboardShell } from "@/components/dashboard/shell";
 
 export default function DashboardLoading() {
   return (
     <DashboardShell>
-      <DashboardHeader heading="Posts" text="Create and manage posts.">
-        <Button>Fake button</Button>
-      </DashboardHeader>
+      <DashboardHeader heading="Posts" text="Create and manage posts." />
       <div className="divide-border-200 divide-y rounded-md border">
-        <CardSkeleton />
-        <CardSkeleton />
-        <CardSkeleton />
-        <CardSkeleton />
+        <Skeleton className="h-[400px] w-full rounded-lg" />
       </div>
     </DashboardShell>
-  )
+  );
 }
diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 18b8eb7b..d58afbc4 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -21,9 +21,7 @@ export default async function DashboardPage() {
 
   return (
     <DashboardShell>
-      <DashboardHeader heading="Panel" text="Create and manage content.">
-        <Button>Fake button</Button>
-      </DashboardHeader>
+      <DashboardHeader heading="Panel" text="Create and manage content." />
       <div>
         <EmptyPlaceholder>
           <EmptyPlaceholder.Icon name="post" />
diff --git a/app/(dashboard)/dashboard/layout.tsx b/app/(dashboard)/layout.tsx
similarity index 88%
rename from app/(dashboard)/dashboard/layout.tsx
rename to app/(dashboard)/layout.tsx
index d93b6521..815144aa 100644
--- a/app/(dashboard)/dashboard/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -1,8 +1,8 @@
-import { dashboardConfig } from "@/config/dashboard";
-import { DashboardNav } from "@/components/layout/nav";
+import { DashboardNav } from "@/components/layout/dashboard-sidenav";
 import { NavBar } from "@/components/layout/navbar";
 import { SiteFooter } from "@/components/layout/site-footer";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
+import { dashboardConfig } from "@/config/dashboard";
 
 interface DashboardLayoutProps {
   children?: React.ReactNode;
@@ -11,7 +11,7 @@ interface DashboardLayoutProps {
 export default function DashboardLayout({ children }: DashboardLayoutProps) {
   return (
     <div className="flex min-h-screen flex-col space-y-6">
-      <NavBar items={dashboardConfig.mainNav} scroll={false} />
+      <NavBar />
 
       <MaxWidthWrapper className="min-h-svh">
         <div className="grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
diff --git a/app/(docs)/docs/layout.tsx b/app/(docs)/docs/layout.tsx
index f3a014ee..96f981b8 100644
--- a/app/(docs)/docs/layout.tsx
+++ b/app/(docs)/docs/layout.tsx
@@ -1,4 +1,3 @@
-import { docsConfig } from "@/config/docs";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { DocsSidebarNav } from "@/components/docs/sidebar-nav";
 
@@ -9,9 +8,9 @@ interface DocsLayoutProps {
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
     <div className="flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-5 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-      <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+      <aside className="fixed top-14 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
         <ScrollArea className="h-full py-6 pr-6 lg:py-8">
-          <DocsSidebarNav items={docsConfig.sidebarNav} />
+          <DocsSidebarNav />
         </ScrollArea>
       </aside>
       {children}
diff --git a/app/(docs)/layout.tsx b/app/(docs)/layout.tsx
index 2264bec6..b2ad0210 100644
--- a/app/(docs)/layout.tsx
+++ b/app/(docs)/layout.tsx
@@ -1,41 +1,20 @@
-import Link from "next/link";
-
-import { docsConfig } from "@/config/docs";
-import { siteConfig } from "@/config/site";
-import { DocsSearch } from "@/components/docs/search";
-import { DocsSidebarNav } from "@/components/docs/sidebar-nav";
+import { NavMobile } from "@/components/layout/mobile-nav";
 import { NavBar } from "@/components/layout/navbar";
 import { SiteFooter } from "@/components/layout/site-footer";
-import { Icons } from "@/components/shared/icons";
+import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
 interface DocsLayoutProps {
   children: React.ReactNode;
 }
 
-const rightHeader = () => (
-  <div className="flex flex-1 items-center space-x-4 sm:justify-end">
-    <div className="hidden lg:flex lg:grow-0">
-      <DocsSearch />
-    </div>
-    <div className="flex lg:hidden">
-      <Icons.search className="size-6 text-muted-foreground" />
-    </div>
-    <nav className="flex space-x-4">
-      <Link href={siteConfig.links.github} target="_blank" rel="noreferrer">
-        <Icons.gitHub className="size-7" />
-        <span className="sr-only">GitHub</span>
-      </Link>
-    </nav>
-  </div>
-);
-
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
-    <div className="flex min-h-screen flex-col">
-      <NavBar items={docsConfig.mainNav} rightElements={rightHeader()}>
-        <DocsSidebarNav items={docsConfig.sidebarNav} />
-      </NavBar>
-      <div className="container flex-1">{children}</div>
+    <div className="flex flex-col">
+      <NavMobile />
+      <NavBar />
+      <MaxWidthWrapper className="min-h-screen" large>
+        {children}
+      </MaxWidthWrapper>
       <SiteFooter className="border-t" />
     </div>
   );
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
index 997e2938..f7843da8 100644
--- a/app/(marketing)/layout.tsx
+++ b/app/(marketing)/layout.tsx
@@ -1,6 +1,6 @@
-import { marketingConfig } from "@/config/marketing";
 import { NavBar } from "@/components/layout/navbar";
 import { SiteFooter } from "@/components/layout/site-footer";
+import { NavMobile } from "@/components/layout/mobile-nav";
 
 interface MarketingLayoutProps {
   children: React.ReactNode;
@@ -9,7 +9,8 @@ interface MarketingLayoutProps {
 export default function MarketingLayout({ children }: MarketingLayoutProps) {
   return (
     <div className="flex min-h-screen flex-col">
-      <NavBar items={marketingConfig.mainNav} scroll={true} />
+      <NavMobile />
+      <NavBar scroll={true} />
       <main className="flex-1">{children}</main>
       <SiteFooter />
     </div>
diff --git a/app/(marketing)/pricing/loading.tsx b/app/(marketing)/pricing/loading.tsx
index 0b971820..e90f2311 100644
--- a/app/(marketing)/pricing/loading.tsx
+++ b/app/(marketing)/pricing/loading.tsx
@@ -12,10 +12,10 @@ export default function Loading() {
             <Skeleton className="mb-3 mt-5 h-8 w-1/5 rounded-full" />
           </div>
 
-          <div className="grid w-full gap-5 bg-inherit py-5 md:grid-cols-3 lg:grid-cols-3">
-            <Skeleton className="h-[520px] w-full rounded-3xl" />
-            <Skeleton className="h-[520px] w-full rounded-3xl" />
-            <Skeleton className="h-[520px] w-full rounded-3xl" />
+          <div className="grid w-full gap-5 bg-inherit py-5 lg:grid-cols-3">
+            <Skeleton className="h-[520px] w-[428px] rounded-3xl max-lg:mx-auto lg:w-full" />
+            <Skeleton className="h-[520px] w-[428px] rounded-3xl max-lg:mx-auto lg:w-full" />
+            <Skeleton className="h-[520px] w-[428px] rounded-3xl max-lg:mx-auto lg:w-full" />
           </div>
 
           <div className="mt-3 flex w-full flex-col items-center gap-2">
diff --git a/components/dashboard/header.tsx b/components/dashboard/header.tsx
index e8d1a436..6d8d5c5f 100644
--- a/components/dashboard/header.tsx
+++ b/components/dashboard/header.tsx
@@ -1,7 +1,7 @@
 interface DashboardHeaderProps {
-  heading: string
-  text?: string
-  children?: React.ReactNode
+  heading: string;
+  text?: string;
+  children?: React.ReactNode;
 }
 
 export function DashboardHeader({
@@ -12,10 +12,10 @@ export function DashboardHeader({
   return (
     <div className="flex items-center justify-between px-2">
       <div className="grid gap-1">
-        <h1 className="font-heading text-3xl md:text-4xl">{heading}</h1>
-        {text && <p className="text-lg text-muted-foreground">{text}</p>}
+        <h1 className="font-heading text-3xl">{heading}</h1>
+        {text && <p className="text-base text-muted-foreground">{text}</p>}
       </div>
       {children}
     </div>
-  )
+  );
 }
diff --git a/components/docs/sidebar-nav.tsx b/components/docs/sidebar-nav.tsx
index cd2650cb..83e55128 100644
--- a/components/docs/sidebar-nav.tsx
+++ b/components/docs/sidebar-nav.tsx
@@ -4,24 +4,30 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 import { SidebarNavItem } from "types";
+import { docsConfig } from "@/config/docs";
 import { cn } from "@/lib/utils";
 
 export interface DocsSidebarNavProps {
-  items: SidebarNavItem[];
+  setOpen?: (boolean) => void;
 }
 
-export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
+export function DocsSidebarNav({ setOpen }: DocsSidebarNavProps) {
   const pathname = usePathname();
+  const items = docsConfig.sidebarNav;
 
-  return items.length ? (
+  return items.length > 0 ? (
     <div className="w-full">
       {items.map((item) => (
         <div key={item.href + item.title} className={cn("pb-8")}>
-          <h4 className="mb-1 rounded-md px-2 py-1 text-sm font-medium">
+          <h4 className="mb-1 rounded-md py-1 text-base font-medium md:px-2 md:text-sm">
             {item.title}
           </h4>
           {item.items ? (
-            <DocsSidebarNavItems items={item.items} pathname={pathname} />
+            <DocsSidebarNavItems
+              setOpen={setOpen}
+              items={item.items}
+              pathname={pathname}
+            />
           ) : null}
         </div>
       ))}
@@ -32,19 +38,24 @@ export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
 interface DocsSidebarNavItemsProps {
   items: SidebarNavItem[];
   pathname: string | null;
+  setOpen?: (boolean) => void;
 }
 
 export function DocsSidebarNavItems({
   items,
+  setOpen,
   pathname,
 }: DocsSidebarNavItemsProps) {
-  return items?.length ? (
-    <div className="grid grid-flow-row auto-rows-max text-sm">
+  return items?.length > 0 ? (
+    <div className="grid grid-flow-row auto-rows-max text-[15px] md:text-sm">
       {items.map((item, index) =>
         !item.disabled && item.href ? (
           <Link
             key={item.title + item.href}
             href={item.href}
+            onClick={() => {
+              if (setOpen) setOpen(false);
+            }}
             className={cn(
               "flex w-full items-center rounded-md px-2 py-1.5 text-muted-foreground hover:underline",
               {
diff --git a/components/layout/nav.tsx b/components/layout/dashboard-sidenav.tsx
similarity index 100%
rename from components/layout/nav.tsx
rename to components/layout/dashboard-sidenav.tsx
diff --git a/components/layout/main-nav.tsx b/components/layout/main-nav.tsx
deleted file mode 100644
index 9ab0dd97..00000000
--- a/components/layout/main-nav.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-import { useSelectedLayoutSegment } from "next/navigation"
-
-import { MainNavItem } from "types"
-import { siteConfig } from "@/config/site"
-import { cn } from "@/lib/utils"
-import { Icons } from "@/components/shared/icons"
-import { MobileNav } from "@/components/layout/mobile-nav"
-
-interface MainNavProps {
-  items?: MainNavItem[]
-  children?: React.ReactNode
-}
-
-export function MainNav({ items, children }: MainNavProps) {
-  const segment = useSelectedLayoutSegment()
-  const [showMobileMenu, setShowMobileMenu] = React.useState<boolean>(false)
-
-  const toggleMobileMenu = () => {
-    setShowMobileMenu(!showMobileMenu)
-  }
-
-  React.useEffect(() => {
-    const closeMobileMenuOnClickOutside = (event: MouseEvent) => {
-      if (showMobileMenu) {
-        setShowMobileMenu(false)
-      }
-    }
-
-    document.addEventListener("click", closeMobileMenuOnClickOutside)
-
-    return () => {
-      document.removeEventListener("click", closeMobileMenuOnClickOutside)
-    }
-  }, [showMobileMenu])
-
-  return (
-    <div className="flex gap-6 md:gap-10">
-      <Link href="/" className="hidden items-center space-x-2 md:flex">
-        <Icons.logo />
-        <span className="hidden font-urban text-xl font-bold sm:inline-block">
-          {siteConfig.name}
-        </span>
-      </Link>
-      {items?.length ? (
-        <nav className="hidden gap-6 md:flex">
-          {items?.map((item, index) => (
-            <Link
-              key={index}
-              href={item.disabled ? "#" : item.href}
-              prefetch={true}
-              className={cn(
-                "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm",
-                item.href.startsWith(`/${segment}`)
-                  ? "text-foreground"
-                  : "text-foreground/60",
-                item.disabled && "cursor-not-allowed opacity-80"
-              )}
-            >
-              {item.title}
-            </Link>
-          ))}
-        </nav>
-      ) : null}
-      <button
-        className="flex items-center space-x-2 md:hidden"
-        onClick={toggleMobileMenu}
-      >
-        {showMobileMenu ? <Icons.close /> : <Icons.logo />}
-        <span className="font-bold">Menu</span>
-      </button>
-      {showMobileMenu && items && (
-        <MobileNav items={items}>{children}</MobileNav>
-      )}
-    </div>
-  )
-}
diff --git a/components/layout/mobile-nav.tsx b/components/layout/mobile-nav.tsx
index 39077a32..d84e5794 100644
--- a/components/layout/mobile-nav.tsx
+++ b/components/layout/mobile-nav.tsx
@@ -1,47 +1,124 @@
-import * as React from "react"
-import Link from "next/link"
-
-import { MainNavItem } from "types"
-import { siteConfig } from "@/config/site"
-import { cn } from "@/lib/utils"
-import { useLockBody } from "@/hooks/use-lock-body"
-import { Icons } from "@/components/shared/icons"
-
-interface MobileNavProps {
-  items: MainNavItem[]
-  children?: React.ReactNode
-}
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { Menu, X } from "lucide-react";
+import { useSession } from "next-auth/react";
+
+import { dashboardConfig } from "@/config/dashboard";
+import { docsConfig } from "@/config/docs";
+import { marketingConfig } from "@/config/marketing";
+import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/utils";
+import { DocsSidebarNav } from "@/components/docs/sidebar-nav";
+import { Icons } from "@/components/shared/icons";
+
+import { ModeToggle } from "./mode-toggle";
+
+export function NavMobile() {
+  const [open, setOpen] = useState(false);
+  const selectedLayout = useSelectedLayoutSegment();
+  const dashBoard = selectedLayout === "dashboard";
+  const documentation = selectedLayout === "docs";
+  const links = documentation
+    ? docsConfig.mainNav
+    : dashBoard
+      ? dashboardConfig.mainNav
+      : marketingConfig.mainNav;
+
+  // prevent body scroll when modal is open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [open]);
 
-export function MobileNav({ items, children }: MobileNavProps) {
-  useLockBody()
+  const { data: session } = useSession();
 
   return (
-    <div
-      className={cn(
-        "fixed inset-0 top-16 z-50 grid h-[calc(100vh-4rem)] grid-flow-row auto-rows-max overflow-auto p-6 pb-32 shadow-md animate-in slide-in-from-bottom-80 md:hidden"
-      )}
-    >
-      <div className="relative z-20 grid gap-6 rounded-md bg-popover p-4 text-popover-foreground shadow-md">
-        <Link href="/" className="flex items-center space-x-2">
-          <Icons.logo />
-          <span className="font-bold">{siteConfig.name}</span>
-        </Link>
-        <nav className="grid grid-flow-row auto-rows-max text-sm">
-          {items.map((item, index) => (
-            <Link
-              key={index}
-              href={item.disabled ? "#" : item.href}
-              className={cn(
-                "flex w-full items-center rounded-md p-2 text-sm font-medium hover:underline",
-                item.disabled && "cursor-not-allowed opacity-60"
-              )}
-            >
-              {item.title}
-            </Link>
+    <>
+      <button
+        onClick={() => setOpen(!open)}
+        className={cn(
+          "fixed right-2 top-2.5 z-50 rounded-full p-2 transition-colors duration-200 hover:bg-muted focus:outline-none active:bg-muted md:hidden",
+          open && "hover:bg-muted active:bg-muted",
+        )}
+      >
+        {open ? (
+          <X className="size-5 text-muted-foreground" />
+        ) : (
+          <Menu className="size-5 text-muted-foreground" />
+        )}
+      </button>
+
+      <nav
+        className={cn(
+          "fixed inset-0 z-20 hidden w-full overflow-auto bg-background px-5 py-16 lg:hidden",
+          open && "block",
+        )}
+      >
+        <ul className="grid divide-y divide-muted">
+          {links.map(({ title, href }) => (
+            <li key={href} className="py-3">
+              <Link
+                href={href}
+                onClick={() => setOpen(false)}
+                className="flex w-full font-medium capitalize"
+              >
+                {title}
+              </Link>
+            </li>
           ))}
-        </nav>
-        {children}
-      </div>
-    </div>
-  )
+
+          {session ? (
+            <li className="py-3">
+              <Link
+                href="/dashboard"
+                className="flex w-full font-medium capitalize"
+              >
+                Dashboard
+              </Link>
+            </li>
+          ) : (
+            <>
+              <li className="py-3">
+                <Link
+                  href="/login"
+                  className="flex w-full font-medium capitalize"
+                >
+                  Login
+                </Link>
+              </li>
+
+              <li className="py-3">
+                <Link
+                  href="/register"
+                  className="flex w-full font-medium capitalize"
+                >
+                  Sign up
+                </Link>
+              </li>
+            </>
+          )}
+        </ul>
+
+        {documentation ? (
+          <div className="mt-8 block md:hidden">
+            <DocsSidebarNav setOpen={setOpen} />
+          </div>
+        ) : null}
+
+        <div className="mt-5 flex items-center justify-end space-x-4">
+          <Link href={siteConfig.links.github} target="_blank" rel="noreferrer">
+            <Icons.gitHub className="size-6" />
+            <span className="sr-only">GitHub</span>
+          </Link>
+          <ModeToggle />
+        </div>
+      </nav>
+    </>
+  );
 }
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index d9209fa2..169c484e 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -1,63 +1,112 @@
 "use client";
 
-import { MainNavItem } from "@/types";
-import { useSession } from "next-auth/react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { useSession } from "next-auth/react";
 
-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 { dashboardConfig } from "@/config/dashboard";
+import { docsConfig } from "@/config/docs";
+import { marketingConfig } from "@/config/marketing";
+import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/utils";
 import useScroll from "@/hooks/use-scroll";
 import { useSigninModal } from "@/hooks/use-signin-modal";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { DocsSearch } from "@/components/docs/search";
+import { Icons } from "@/components/shared/icons";
+import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
-import { MainNav } from "./main-nav";
 import { UserAccountNav } from "./user-account-nav";
 
 interface NavBarProps {
-  items?: MainNavItem[];
-  children?: React.ReactNode;
-  rightElements?: React.ReactNode;
   scroll?: boolean;
   large?: boolean;
 }
 
-export function NavBar({
-  items,
-  children,
-  rightElements,
-  scroll = false,
-}: NavBarProps) {
+export function NavBar({ scroll = false }: NavBarProps) {
   const scrolled = useScroll(50);
   const signInModal = useSigninModal();
   const { data: session, status } = useSession();
 
-  const selectedLayout = usePathname();
-  const dashBoard = selectedLayout.startsWith("/dashboard");
-  const documentation = selectedLayout.startsWith("/docs");
+  const selectedLayout = useSelectedLayoutSegment();
+  const dashBoard = selectedLayout === "dashboard";
+  const documentation = selectedLayout === "docs";
+  const links = documentation
+    ? docsConfig.mainNav
+    : dashBoard
+      ? dashboardConfig.mainNav
+      : marketingConfig.mainNav;
 
   return (
     <header
       className={`sticky top-0 z-40 flex w-full justify-center bg-background/60 backdrop-blur-xl transition-all ${
-        scroll ? (scrolled ? "border-b" : "bg-background/0") : "border-b"
+        scroll ? (scrolled ? "border-b" : "bg-transparent") : "border-b"
       }`}
     >
       <MaxWidthWrapper
-        className="flex h-[60px] items-center justify-between py-4"
-        large={!!documentation}
+        className="flex h-14 items-center justify-between py-4"
+        large={documentation}
       >
-        <MainNav items={items}>{children}</MainNav>
+        <div className="flex gap-6 md:gap-10">
+          <Link href="/" className="flex items-center space-x-2">
+            <Icons.logo />
+            <span className="font-urban text-xl font-bold">
+              {siteConfig.name}
+            </span>
+          </Link>
+
+          {links && links.length > 0 ? (
+            <nav className="hidden gap-6 md:flex">
+              {links.map((item, index) => (
+                <Link
+                  key={index}
+                  href={item.disabled ? "#" : item.href}
+                  prefetch={true}
+                  className={cn(
+                    "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm",
+                    item.href.startsWith(`/${selectedLayout}`)
+                      ? "text-foreground"
+                      : "text-foreground/60",
+                    item.disabled && "cursor-not-allowed opacity-80",
+                  )}
+                >
+                  {item.title}
+                </Link>
+              ))}
+            </nav>
+          ) : null}
+        </div>
 
         <div className="flex items-center space-x-3">
-          {rightElements}
+          {/* right header for docs */}
+          {documentation ? (
+            <div className="hidden flex-1 items-center space-x-4 sm:justify-end lg:flex">
+              <div className="hidden lg:flex lg:grow-0">
+                <DocsSearch />
+              </div>
+              <div className="flex lg:hidden">
+                <Icons.search className="size-6 text-muted-foreground" />
+              </div>
+              <div className="flex space-x-4">
+                <Link
+                  href={siteConfig.links.github}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <Icons.gitHub className="size-7" />
+                  <span className="sr-only">GitHub</span>
+                </Link>
+              </div>
+            </div>
+          ) : null}
 
           {session ? (
             <>
               {dashBoard ? (
                 <UserAccountNav user={session.user} />
               ) : (
-                <Link href="/dashboard">
+                <Link href="/dashboard" className="hidden md:block">
                   <Button
                     className="gap-2 px-4"
                     variant="default"
@@ -71,7 +120,7 @@ export function NavBar({
             </>
           ) : status === "unauthenticated" ? (
             <Button
-              className="gap-2 px-4"
+              className="hidden gap-2 px-4 md:flex"
               variant="default"
               size="sm"
               rounded="full"
@@ -81,13 +130,13 @@ export function NavBar({
               <Icons.arrowRight className="size-4" />
             </Button>
           ) : (
-            <>
+            <div className="hidden lg:flex">
               {dashBoard ? (
                 <Skeleton className="size-9 rounded-full" />
               ) : (
                 <Skeleton className="h-9 w-24 rounded-full" />
               )}
-            </>
+            </div>
           )}
         </div>
       </MaxWidthWrapper>
diff --git a/components/shared/card-skeleton.tsx b/components/shared/card-skeleton.tsx
index 04c1777b..1efdc14b 100644
--- a/components/shared/card-skeleton.tsx
+++ b/components/shared/card-skeleton.tsx
@@ -1,17 +1,22 @@
-import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export function CardSkeleton() {
   return (
     <Card>
       <CardHeader className="gap-2">
         <Skeleton className="h-5 w-1/5" />
-        <Skeleton className="size-4/5" />
+        <Skeleton className="h-3.5 w-2/5" />
       </CardHeader>
       <CardContent className="h-10" />
       <CardFooter>
-        <Skeleton className="h-8 w-[120px]" />
+        <Skeleton className="h-9 w-[120px]" />
       </CardFooter>
     </Card>
-  )
+  );
 }
diff --git a/components/shared/max-width-wrapper.tsx b/components/shared/max-width-wrapper.tsx
index 864ef4c1..f35027d1 100644
--- a/components/shared/max-width-wrapper.tsx
+++ b/components/shared/max-width-wrapper.tsx
@@ -12,7 +12,13 @@ export default function MaxWidthWrapper({
   children: ReactNode;
 }) {
   return (
-    <div className={cn("container", !large ? "max-w-6xl" : null, className)}>
+    <div
+      className={cn(
+        "container",
+        large ? "max-w-screen-2xl" : "max-w-6xl",
+        className,
+      )}
+    >
       {children}
     </div>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e41c5b5c..14a49830 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,7 +17,7 @@ const config = {
   theme: {
     container: {
       center: true,
-      padding: ".625rem",
+      padding: ".8rem",
     },
     extend: {
       colors: {