feat(dashboard): integrate Navbar component and remove Breadcrumb from layout

src/app/(dashboard)/layout.tsx

@@ -3,14 +3,7 @@ import {
   SidebarProvider,
   SidebarTrigger,
 } from "@/components/ui/sidebar";
-import {
+import { Navbar } from "@/components/navbar";
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
 import { AppSidebar } from "@/components/app-sidebar";
 import { Separator } from "@/components/ui/separator";
 
@@ -27,19 +20,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
           <div className="flex items-center gap-2 px-4">
             <SidebarTrigger className="-ml-1" />
             <Separator orientation="vertical" className="mr-2 h-4" />
-            <Breadcrumb>
+            <Navbar />
-              <BreadcrumbList>
-                <BreadcrumbItem className="hidden md:block">
-                  <BreadcrumbLink href="#">
-                    Building Your Application
-                  </BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator className="hidden md:block" />
-                <BreadcrumbItem>
-                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                </BreadcrumbItem>
-              </BreadcrumbList>
-            </Breadcrumb>
           </div>
         </header>
         <div className="flex flex-1 flex-col p-4 pt-0">{children}</div>

src/components/navbar.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./ui/breadcrumb";
+import React from "react";
+import { Home } from "lucide-react";
+import { usePathname } from "next/navigation";
+
+export const Navbar = () => {
+  const pathname = usePathname();
+  const pathSegments = pathname.split("/").filter(Boolean); // Filter out empty strings
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList className="rounded-lg border border-border bg-background px-3 py-2 shadow-sm shadow-black/5">
+        {/* If pathname is "/", display the Home icon inside BreadcrumbPage */}
+        {pathSegments.length === 0 ? (
+          <BreadcrumbItem>
+            <BreadcrumbPage>
+              <Home size={16} strokeWidth={2} aria-hidden="true" />
+              <span className="sr-only">Home</span>
+            </BreadcrumbPage>
+          </BreadcrumbItem>
+        ) : (
+          <>
+            {/* Always show Home as the first BreadcrumbLink */}
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">
+                <Home size={16} strokeWidth={2} aria-hidden="true" />
+                <span className="sr-only">Home</span>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+
+            {pathSegments.map((item, index) => (
+              <React.Fragment key={index}>
+                <BreadcrumbItem>
+                  {index === pathSegments.length - 1 ? (
+                    <BreadcrumbPage>{item}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink
+                      href={`/${pathSegments.slice(0, index + 1).join("/")}`}
+                    >
+                      {item}
+                    </BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+                {index !== pathSegments.length - 1 && <BreadcrumbSeparator />}
+              </React.Fragment>
+            ))}
+          </>
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};