Navbar and BreadCrumb

src/App.tsx

@@ -4,19 +4,25 @@ import Sidebar from "./userComponents/Sidebar";
 import Navbar from "./userComponents/Navbar";
 import Dashboard from "./pages/Dashboard";
 
-
 const App = () => {
   return (
     <Router>
-      <div style={{ display: "flex" }}>
+      <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
+        <div style={{ flexShrink: 0, width: "280px" }}>
           <Sidebar />
-        <div style={{ flexGrow: 1 }}>
+        </div>
+
+        <div style={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
+          <div style={{ flexShrink: 0 }}>
             <Navbar />
+          </div>
+          <div style={{ flexGrow: 1, overflowY: "auto" }}>
             <Routes>
               <Route path="/" element={<Dashboard />} />
             </Routes>
           </div>
         </div>
+      </div>
     </Router>
   );
 };

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,40 @@
+import { Breadcrumb, type SystemStyleObject } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface BreadcrumbRootProps extends Breadcrumb.RootProps {
+  separator?: React.ReactNode
+  separatorGap?: SystemStyleObject["gap"]
+}
+
+export const BreadcrumbRoot = React.forwardRef<
+  HTMLDivElement,
+  BreadcrumbRootProps
+>(function BreadcrumbRoot(props, ref) {
+  const { separator, separatorGap, children, ...rest } = props
+
+  const validChildren = React.Children.toArray(children).filter(
+    React.isValidElement,
+  )
+
+  return (
+    <Breadcrumb.Root ref={ref} {...rest}>
+      <Breadcrumb.List gap={separatorGap}>
+        {validChildren.map((child, index) => {
+          const last = index === validChildren.length - 1
+          return (
+            <React.Fragment key={index}>
+              <Breadcrumb.Item>{child}</Breadcrumb.Item>
+              {!last && (
+                <Breadcrumb.Separator>{separator}</Breadcrumb.Separator>
+              )}
+            </React.Fragment>
+          )
+        })}
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
+  )
+})
+
+export const BreadcrumbLink = Breadcrumb.Link
+export const BreadcrumbCurrentLink = Breadcrumb.CurrentLink
+export const BreadcrumbEllipsis = Breadcrumb.Ellipsis

src/pages/Dashboard.tsx

@@ -1,14 +1,12 @@
 import React from "react";
-import { SimpleGrid } from "@chakra-ui/react";
+import { Box, SimpleGrid } from "@chakra-ui/react";
 import DashboardCard from "../userComponents/DashboardCard";
 
 const Dashboard = () => {
   return (
-    <SimpleGrid bgColor={"#00000"} columns={{ base: 1, md: 3 }} gap={2} p={6} ml="200px">
-      <DashboardCard title="Users" value="1,234" />
-      <DashboardCard title="Revenue" value="$12,345" />
-      <DashboardCard title="Orders" value="567" />
-    </SimpleGrid>
+    <Box bg="#FFFFFF" p={4} >
+
+    </Box>
   );
 };
 

src/userComponents/Navbar.tsx

@@ -1,14 +1,54 @@
 import React from "react";
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Image, Text } from "@chakra-ui/react";
+import { useLocation, Link } from "react-router-dom";
+import { IoMdNotificationsOutline } from "react-icons/io";
+import avtar from "../../public/images/avtar/avtar.png";
+import {
+  BreadcrumbCurrentLink,
+  BreadcrumbLink,
+  BreadcrumbRoot,
+} from "../components/ui/breadcrumb";
+
+const Navbar: React.FC = () => {
+  const location = useLocation();
+
+  const pathSegments = location.pathname
+    .split("/")
+    .filter((segment) => segment);
+
+  const lastSegment = pathSegments[pathSegments.length - 1] || "";
 
-const Navbar = () => {
   return (
-    <Box bg="blue.600" color="white" w="100%" p={4}>
-      <Flex justify="space-between" align="center">
+    <Box bg="#F6F6F6" color="white" w="100%" p={4}>
+      <Flex justify="space-between" align="center" mb={2}>
         <Text fontSize="xl" fontWeight="bold">
+          <BreadcrumbRoot separator=">">
+            <BreadcrumbLink as={Link} to="/">
               Dashboard
+            </BreadcrumbLink>
+            {pathSegments.map((segment, index) => {
+              const to = `/${pathSegments.slice(0, index + 1).join("/")}`;
+              return (
+                <BreadcrumbLink key={index} as={Link} to={to}>
+                  {segment.charAt(0).toUpperCase() + segment.slice(1)}
+                </BreadcrumbLink>
+              );
+            })}
+            <BreadcrumbCurrentLink>
+              {lastSegment.charAt(0).toUpperCase() + lastSegment.slice(1)}
+            </BreadcrumbCurrentLink>
+          </BreadcrumbRoot>
         </Text>
-        <Text>Welcome, User!</Text>
+
+        <Flex gap={3} alignItems="center">
+          <IoMdNotificationsOutline color="black" size="25px" />
+          <Flex alignItems="center" gap={2} >
+            <Image src={avtar} height={"35px"} width={"35px"} />
+            <Text fontSize="sm" color="black">
+              Jackson
+            </Text>
+          </Flex>
+        </Flex>
       </Flex>
     </Box>
   );

src/userComponents/Sidebar.tsx

@@ -22,7 +22,7 @@ const Sidebar = () => {
 
   return (
     <VStack
-      w="294px"
+      w="280px"
       bg="#F6F6F6"
       color="black"
       h="100vh"
@@ -48,7 +48,7 @@ const Sidebar = () => {
                 borderRadius="md"
                 cursor="pointer"
                 onClick={() => toggleSection(item.value)}
-                w="254px"
+                w="250px"
               >
                 <Flex
                   justifyContent="space-between"