From c37bf1d9f98fb65720fd166ef14fdf211e8cf405 Mon Sep 17 00:00:00 2001
From: headlesdev <damian.bergemann@outlook.com>
Date: Sat, 17 May 2025 19:51:32 +0200
Subject: [PATCH] Breadcrumbs

---
 app/dashboard/DashboardPage.tsx | 10 +++++++---
 components/Breadcrumbs.tsx      | 25 +++++++++++++++++++++++++
 components/Sidebar.tsx          |  9 +++++++--
 3 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 components/Breadcrumbs.tsx

diff --git a/app/dashboard/DashboardPage.tsx b/app/dashboard/DashboardPage.tsx
index a741e53..b39a130 100644
--- a/app/dashboard/DashboardPage.tsx
+++ b/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>
diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
new file mode 100644
index 0000000..33c8a74
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index ba458b4..a6354c1 100644
--- a/components/Sidebar.tsx
+++ b/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>
   )
 }