admin to dashboard

collinschaafsma · Sep 26, 2024 · c3ea69b · c3ea69b
1 parent eced698
commit c3ea69b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 45 deletions.
diff --git a/app/(app)/_components/nav/index.tsx b/app/(app)/_components/nav/index.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link"
-import { Home, Lock, PanelLeft } from "lucide-react"
+import { Gauge, PanelLeft, User } from "lucide-react"
 import { appName } from "@/lib/constants"
 import { Button } from "@/components/ui/button"
 import { SheetContent, SheetTrigger } from "@/components/ui/sheet"
@@ -17,37 +17,41 @@ import { MobileSheet } from "./mobile-sheet"
 export function DesktopNav() {
   return (
     <TooltipProvider>
-      <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-        <Link
-          className="flex items-center justify-center"
-          href="/"
-          prefetch={false}
-        >
-          <Logo className="size-6" />
-          <span className="sr-only">{appName}</span>
-        </Link>
-        <AuthBoundary>
-          <Tooltip>
-            <TooltipTrigger>
-              <DesktopNavLink href="/account">
-                <Home className="size-5" />
-                <span className="sr-only">Account</span>
-              </DesktopNavLink>
-            </TooltipTrigger>
-            <TooltipContent side="right">Account</TooltipContent>
-          </Tooltip>
-        </AuthBoundary>
-        <AdminBoundary>
-          <Tooltip>
-            <TooltipTrigger>
-              <DesktopNavLink href="/admin">
-                <Lock className="size-5" />
-                <span className="sr-only">Admin</span>
-              </DesktopNavLink>
-            </TooltipTrigger>
-            <TooltipContent side="right">Admin</TooltipContent>
-          </Tooltip>
-        </AdminBoundary>
+      <nav className="flex h-full flex-col items-center justify-between px-2 sm:py-5">
+        <div className="flex flex-col gap-4">
+          <Link
+            className="flex items-center justify-center"
+            href="/"
+            prefetch={false}
+          >
+            <Logo className="size-6" />
+            <span className="sr-only">{appName}</span>
+          </Link>
+          <AdminBoundary>
+            <Tooltip>
+              <TooltipTrigger>
+                <DesktopNavLink href="/dashboard">
+                  <Gauge className="size-5" />
+                  <span className="sr-only">Dashboard</span>
+                </DesktopNavLink>
+              </TooltipTrigger>
+              <TooltipContent side="right">Dashboard</TooltipContent>
+            </Tooltip>
+          </AdminBoundary>
+        </div>
+        <div>
+          <AuthBoundary>
+            <Tooltip>
+              <TooltipTrigger>
+                <DesktopNavLink href="/account">
+                  <User className="size-5" />
+                  <span className="sr-only">Account</span>
+                </DesktopNavLink>
+              </TooltipTrigger>
+              <TooltipContent side="right">Account</TooltipContent>
+            </Tooltip>
+          </AuthBoundary>
+        </div>
       </nav>
     </TooltipProvider>
   )
@@ -68,18 +72,18 @@ export function MobileNav() {
             <Logo className="size-6" />
             <span className="sr-only">{appName}</span>
           </Link>
+          <AdminBoundary>
+            <MobileNavLink href="/dashboard">
+              <Gauge className="size-5" />
+              Dashboard
+            </MobileNavLink>
+          </AdminBoundary>
           <AuthBoundary>
             <MobileNavLink href="/account">
-              <Home className="size-5" />
+              <User className="size-5" />
               Account
             </MobileNavLink>
           </AuthBoundary>
-          <AdminBoundary>
-            <MobileNavLink href="/admin">
-              <Lock className="size-5" />
-              Admin
-            </MobileNavLink>
-          </AdminBoundary>
         </nav>
       </SheetContent>
     </MobileSheet>

diff --git a/app/(app)/admin/page.tsx → app/(app)/dashboard/page.tsx b/app/(app)/admin/page.tsx → app/(app)/dashboard/page.tsx
@@ -17,16 +17,16 @@ export default function AdminPage() {
         <Breadcrumb className="hidden md:flex">
           <BreadcrumbList>
             <BreadcrumbItem>
-              <BreadcrumbPage>Admin</BreadcrumbPage>
+              <BreadcrumbPage>Dashboard</BreadcrumbPage>
             </BreadcrumbItem>
           </BreadcrumbList>
         </Breadcrumb>
       </Header>
       <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
         <p>
-          Your admin page here. Note that only a user with the admin role can
-          access this page. Take a look at <code>middleware.ts</code> to see how
-          this is enforced.
+          Your dashboard page here. Note that only a user with the admin role
+          can access this page. Take a look at <code>middleware.ts</code> to see
+          how this is enforced.
         </p>
       </main>
     </div>

diff --git a/middleware.ts b/middleware.ts
@@ -16,7 +16,7 @@ export default auth(req => {
   // Look for admin session required routes
   if (
     req.auth?.user.role !== "admin" &&
-    ["/admin"].some(route => req.nextUrl.pathname.includes(route))
+    ["/dashboard"].some(route => req.nextUrl.pathname.includes(route))
   ) {
     const newUrl = new URL(
       `/sign-in?redirectTo=${req.nextUrl.pathname}`,
@@ -27,7 +27,7 @@ export default auth(req => {
 })
 
 export const config = {
-  matcher: ["/admin/:path*", "/account/:path*"],
+  matcher: ["/dashboard/:path*", "/account/:path*"],
 }
 
 // If you don't want to use the middleware to check for the role and the page they are on