From c618b4c58da3070c9645cb11ddcd2e4f481e4a31 Mon Sep 17 00:00:00 2001
From: shadcn <arshad@chummun.com>
Date: Tue, 22 Nov 2022 12:42:47 +0400
Subject: [PATCH] feat: implement responsive styles for dashboard

---
 app/(dashboard)/dashboard/layout.tsx  | 35 ++++++-------
 app/(editor)/editor/layout.tsx        |  2 +-
 app/(marketing)/layout.tsx            | 35 +++++++++----
 components/dashboard/billing-form.tsx |  4 +-
 components/dashboard/editor.tsx       |  2 +-
 components/dashboard/nav.tsx          | 74 ++++++++++-----------------
 components/main-nav.tsx               | 34 ++++++------
 config/dashboard.ts                   | 44 ++++++++++++++++
 types/index.d.ts                      | 10 +++-
 9 files changed, 142 insertions(+), 98 deletions(-)
 create mode 100644 config/dashboard.ts

diff --git a/app/(dashboard)/dashboard/layout.tsx b/app/(dashboard)/dashboard/layout.tsx
index dd48f0b..f4e08df 100644
--- a/app/(dashboard)/dashboard/layout.tsx
+++ b/app/(dashboard)/dashboard/layout.tsx
@@ -1,10 +1,10 @@
 import { notFound } from "next/navigation"
-import Link from "next/link"
 
+import { dashboardConfig } from "@/config/dashboard"
 import { getCurrentUser } from "@/lib/session"
 import { DashboardNav } from "@/components/dashboard/nav"
 import { UserAccountNav } from "@/components/dashboard/user-account-nav"
-import { Icons } from "@/components/icons"
+import { MainNav } from "@/components/main-nav"
 
 interface DashboardLayoutProps {
   children?: React.ReactNode
@@ -20,23 +20,22 @@ export default async function DashboardLayout({
   }
 
   return (
-    <div className="mx-auto flex h-screen max-w-[1440px] flex-col space-y-6 overflow-hidden px-6">
-      <header className="flex h-[64px] items-center justify-between pl-2">
-        <Link href="/" className="flex items-center space-x-2">
-          <Icons.logo />
-          <span className="text-lg font-bold">Taxonomy</span>
-        </Link>
-        <UserAccountNav
-          user={{
-            name: user.name,
-            image: user.image,
-            email: user.email,
-          }}
-        />
+    <div className="mx-auto flex flex-col space-y-6">
+      <header className="container sticky top-0 z-40 bg-white">
+        <div className="flex h-16 items-center justify-between border-b border-b-slate-200 py-4">
+          <MainNav items={dashboardConfig.mainNav} />
+          <UserAccountNav
+            user={{
+              name: user.name,
+              image: user.image,
+              email: user.email,
+            }}
+          />
+        </div>
       </header>
-      <div className="grid grid-cols-[200px_1fr] gap-12">
-        <aside className="flex w-[200px] flex-col">
-          <DashboardNav />
+      <div className="container grid gap-12 md:grid-cols-[200px_1fr]">
+        <aside className="hidden w-[200px] flex-col md:flex">
+          <DashboardNav items={dashboardConfig.sidebarNav} />
         </aside>
         <main className="flex w-full flex-1 flex-col overflow-hidden">
           {children}
diff --git a/app/(editor)/editor/layout.tsx b/app/(editor)/editor/layout.tsx
index 6b0fc0b..a9a1ce9 100644
--- a/app/(editor)/editor/layout.tsx
+++ b/app/(editor)/editor/layout.tsx
@@ -4,7 +4,7 @@ interface EditorProps {
 
 export default function EditorLayout({ children }: EditorProps) {
   return (
-    <div className="container mx-auto grid items-start gap-10 py-8 px-8">
+    <div className="container mx-auto grid items-start gap-10 py-8">
       {children}
     </div>
   )
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
index a1597f8..dc7a538 100644
--- a/app/(marketing)/layout.tsx
+++ b/app/(marketing)/layout.tsx
@@ -1,28 +1,43 @@
 import Link from "next/link"
 
 import { marketingConfig } from "@/config/marketing"
-import { siteConfig } from "@/config/site"
+import { getCurrentUser } from "@/lib/session"
 import { MainNav } from "@/components/main-nav"
 import { SiteFooter } from "@/components/site-footer"
+import { UserAccountNav } from "@/components/dashboard/user-account-nav"
 
 interface MarketingLayoutProps {
   children: React.ReactNode
 }
 
-export default function MarketingLayout({ children }: MarketingLayoutProps) {
+export default async function MarketingLayout({
+  children,
+}: MarketingLayoutProps) {
+  const user = await getCurrentUser()
+
   return (
     <div className="flex min-h-screen flex-col">
       <header className="container sticky top-0 z-40 bg-white">
         <div className="flex h-16 items-center justify-between border-b border-b-slate-200 py-4">
           <MainNav items={marketingConfig.mainNav} />
-          <nav>
-            <Link
-              href="/login"
-              className="relative inline-flex h-8 items-center rounded-md border border-transparent bg-brand-500 px-6 py-1 text-sm font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
-            >
-              Login
-            </Link>
-          </nav>
+          {user ? (
+            <UserAccountNav
+              user={{
+                name: user.name,
+                image: user.image,
+                email: user.email,
+              }}
+            />
+          ) : (
+            <nav>
+              <Link
+                href="/login"
+                className="relative inline-flex h-8 items-center rounded-md border border-transparent bg-brand-500 px-6 py-1 text-sm font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+              >
+                Login
+              </Link>
+            </nav>
+          )}
         </div>
       </header>
       <main className="flex-1">{children}</main>
diff --git a/components/dashboard/billing-form.tsx b/components/dashboard/billing-form.tsx
index 5e85df9..092c576 100644
--- a/components/dashboard/billing-form.tsx
+++ b/components/dashboard/billing-form.tsx
@@ -54,11 +54,11 @@ export function BillingForm({
           </Card.Description>
         </Card.Header>
         <Card.Content>{subscriptionPlan.description}</Card.Content>
-        <Card.Footer className="flex items-center justify-between">
+        <Card.Footer className="flex flex-col items-start space-y-2 md:flex-row md:justify-between md:space-x-0">
           <button
             type="submit"
             className={cn(
-              "relative inline-flex h-9 items-center rounded-md border border-transparent bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
+              "relative inline-flex h-9 items-center justify-center rounded-md border border-transparent bg-brand-500 px-4 py-2 text-center text-sm font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
               {
                 "cursor-not-allowed opacity-60": isLoading,
               }
diff --git a/components/dashboard/editor.tsx b/components/dashboard/editor.tsx
index baa04c4..6ebe453 100644
--- a/components/dashboard/editor.tsx
+++ b/components/dashboard/editor.tsx
@@ -10,9 +10,9 @@ import * as z from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter } from "next/navigation"
 
-import { Icons } from "@/components/icons"
 import { postPatchSchema } from "@/lib/validations/post"
 import { toast } from "@/ui/toast"
+import { Icons } from "@/components/icons"
 
 interface EditorProps {
   post: Pick<Post, "id" | "title" | "content" | "published">
diff --git a/components/dashboard/nav.tsx b/components/dashboard/nav.tsx
index b7ae424..5a28059 100644
--- a/components/dashboard/nav.tsx
+++ b/components/dashboard/nav.tsx
@@ -3,62 +3,40 @@
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 
-import { NavItem } from "types"
+import { SidebarNavItem } from "types"
 import { cn } from "@/lib/utils"
 import { Icons } from "@/components/icons"
 
-export const navigationItems: NavItem[] = [
-  {
-    title: "Posts",
-    href: "/dashboard",
-    icon: Icons.post,
-  },
-  {
-    title: "Pages",
-    href: "/",
-    icon: Icons.page,
-    disabled: true,
-  },
-  {
-    title: "Media",
-    href: "/",
-    icon: Icons.media,
-    disabled: true,
-  },
-  {
-    title: "Billing",
-    href: "/dashboard/billing",
-    icon: Icons.billing,
-  },
-  {
-    title: "Settings",
-    href: "/dashboard/settings",
-    icon: Icons.settings,
-  },
-]
+interface DashboardNavProps {
+  items: SidebarNavItem[]
+}
 
-export function DashboardNav() {
+export function DashboardNav({ items }: DashboardNavProps) {
   const path = usePathname()
 
+  if (!items?.length) {
+    return null
+  }
+
   return (
     <nav className="grid items-start gap-2">
-      {navigationItems.map((navigationItem, index) => (
-        <Link
-          key={index}
-          href={navigationItem.disabled ? "/" : navigationItem.href}
-        >
-          <span
-            className={cn(
-              "group flex items-center rounded-md px-3 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100",
-              path === navigationItem.href ? "bg-slate-200" : "transparent",
-              navigationItem.disabled && "cursor-not-allowed opacity-50"
-            )}
-          >
-            <navigationItem.icon className="mr-2 h-4 w-4" />
-            <span>{navigationItem.title}</span>
-          </span>
-        </Link>
-      ))}
+      {items.map((item, index) => {
+        const Icon = Icons[item.icon]
+        return (
+          <Link key={index} href={item.disabled ? "/" : item.href}>
+            <span
+              className={cn(
+                "group flex items-center rounded-md px-3 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100",
+                path === item.href ? "bg-slate-200" : "transparent",
+                item.disabled && "cursor-not-allowed opacity-50"
+              )}
+            >
+              <Icon className="mr-2 h-4 w-4" />
+              <span>{item.title}</span>
+            </span>
+          </Link>
+        )
+      })}
     </nav>
   )
 }
diff --git a/components/main-nav.tsx b/components/main-nav.tsx
index 46854a6..9670c3c 100644
--- a/components/main-nav.tsx
+++ b/components/main-nav.tsx
@@ -11,7 +11,7 @@ import { Icons } from "@/components/icons"
 import { MobileNav } from "@/components/mobile-nav"
 
 interface MainNavProps {
-  items: MainNavItem[]
+  items?: MainNavItem[]
   children?: React.ReactNode
 }
 
@@ -27,21 +27,23 @@ export function MainNav({ items, children }: MainNavProps) {
           {siteConfig.name}
         </span>
       </Link>
-      <nav className="hidden gap-6 md:flex">
-        {items.map((item, index) => (
-          <Link
-            key={index}
-            href={item.disabled ? "#" : item.href}
-            className={cn(
-              "flex items-center text-lg font-semibold text-slate-600 sm:text-sm",
-              item.href.startsWith(`/${segment}`) && "text-slate-900",
-              item.disabled && "cursor-not-allowed opacity-80"
-            )}
-          >
-            {item.title}
-          </Link>
-        ))}
-      </nav>
+      {items?.length ? (
+        <nav className="hidden gap-6 md:flex">
+          {items?.map((item, index) => (
+            <Link
+              key={index}
+              href={item.disabled ? "#" : item.href}
+              className={cn(
+                "flex items-center text-lg font-semibold text-slate-600 sm:text-sm",
+                item.href.startsWith(`/${segment}`) && "text-slate-900",
+                item.disabled && "cursor-not-allowed opacity-80"
+              )}
+            >
+              {item.title}
+            </Link>
+          ))}
+        </nav>
+      ) : null}
       <button
         className="flex items-center space-x-2 md:hidden"
         onClick={() => setShowMobileMenu(!showMobileMenu)}
diff --git a/config/dashboard.ts b/config/dashboard.ts
new file mode 100644
index 0000000..11e2cda
--- /dev/null
+++ b/config/dashboard.ts
@@ -0,0 +1,44 @@
+import { DashboardConfig } from "types"
+
+export const dashboardConfig: DashboardConfig = {
+  mainNav: [
+    {
+      title: "Documentation",
+      href: "/docs",
+    },
+    {
+      title: "Support",
+      href: "/support",
+      disabled: true,
+    },
+  ],
+  sidebarNav: [
+    {
+      title: "Posts",
+      href: "/dashboard",
+      icon: "post",
+    },
+    {
+      title: "Pages",
+      href: "/",
+      icon: "page",
+      disabled: true,
+    },
+    {
+      title: "Media",
+      href: "/",
+      icon: "media",
+      disabled: true,
+    },
+    {
+      title: "Billing",
+      href: "/dashboard/billing",
+      icon: "billing",
+    },
+    {
+      title: "Settings",
+      href: "/dashboard/settings",
+      icon: "settings",
+    },
+  ],
+}
diff --git a/types/index.d.ts b/types/index.d.ts
index 01080e0..0be7044 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,3 +1,4 @@
+import { Icons } from "@/components/icons"
 import { User } from "@prisma/client"
 import type { Icon } from "lucide-react"
 
@@ -5,15 +6,15 @@ export type NavItem = {
   title: string
   href: string
   disabled?: boolean
-  icon?: Icon
 }
 
-export type MainNavItem = Pick<NavItem, "title" | "href" | "disabled">
+export type MainNavItem = NavItem
 
 export type SidebarNavItem = {
   title: string
   disabled?: boolean
   external?: boolean
+  icon?: keyof typeof Icons
 } & (
   | {
       href: string
@@ -42,6 +43,11 @@ export type MarketingConfig = {
   mainNav: MainNavItem[]
 }
 
+export type DashboardConfig = {
+  mainNav: MainNavItem[]
+  sidebarNav: SidebarNavItem[]
+}
+
 export type SubscriptionPlan = {
   name: string
   description: string