refactor: updated navbar & mobile nav - improved layouts

mickasmt · Jun 2, 2024 · 0d9620e · 0d9620e
1 parent 5ebe430
commit 0d9620e
Show file tree

Hide file tree

Showing 17 changed files with 273 additions and 232 deletions.
diff --git 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
@@ -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
@@ -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 → app/(dashboard)/layout.tsx b/app/(dashboard)/dashboard/layout.tsx → 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → components/layout/dashboard-sidenav.tsx b/components/layout/nav.tsx → components/layout/dashboard-sidenav.tsx
diff --git a/components/layout/main-nav.tsx b/components/layout/main-nav.tsx