Breadcrumbs

app/dashboard/DashboardPage.tsx

@@ -7,11 +7,15 @@ interface DashboardPageProps {
     name: string;
 }
 
-export default function DashboardPage({ username, name }: DashboardPageProps) {
+export default function DashboardPage({ username, name }: DashboardPageProps) {    
     return (
         <div>
-            <Sidebar username={username} fullName={name}>
-                <main>
+            <Sidebar 
+                username={username} 
+                fullName={name} 
+                breadcrumbPath={['Home', 'Dashboard']}
+            >
+                <main className="pl-4">
                     <h1>Dashboard</h1>
                 </main>
             </Sidebar>

components/Breadcrumbs.tsx

@@ -0,0 +1,25 @@
+
+interface BreadcrumbsProps {
+    breadcrumbPath?: string[];
+}
+
+export default function Breadcrumbs({ breadcrumbPath = ['Home'] }: BreadcrumbsProps) {
+    return(
+        <div className="w-full">
+            <div className="breadcrumbs text-sm">
+                <ul className="pl-4 pt-4">
+                    {breadcrumbPath.map((item, index) => (
+                        <li key={index}>
+                            {index < breadcrumbPath.length - 1 ? (
+                                <a>{item}</a>
+                            ) : (
+                                item
+                            )}
+                        </li>
+                    ))}
+                </ul>
+                <div className="divider"></div>
+            </div>
+        </div>
+    )
+}

components/Sidebar.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import type React from "react"
+import Breadcrumbs from "./Breadcrumbs"
 
 import { useState } from "react"
 import Link from "next/link"
@@ -25,9 +26,10 @@ interface SidebarProps {
   children: React.ReactNode
   username: string
   fullName: string
+  breadcrumbPath?: string[]
 }
 
-export default function Sidebar({ children, username, fullName }: SidebarProps) {
+export default function Sidebar({ children, username, fullName, breadcrumbPath }: SidebarProps) {
   const router = useRouter()
   const [isProfileOpen, setIsProfileOpen] = useState(false)
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
@@ -176,7 +178,10 @@ export default function Sidebar({ children, username, fullName }: SidebarProps)
       </aside>
 
       {/* Main content */}
-      <main className="flex-1 p-4 md:p-6 overflow-auto">{children}</main>
+      <main className="flex-1 overflow-auto">
+        <Breadcrumbs breadcrumbPath={breadcrumbPath} />
+        {children}
+      </main>
     </div>
   )
 }