From a1218abdbd271add0d997cc421ab23bffed5755a Mon Sep 17 00:00:00 2001
From: npcdazai <prathammandavkar932@gmail.com>
Date: Tue, 14 Jan 2025 16:58:19 +0530
Subject: [PATCH] Navbar and BreadCrumb

---
 public/images/avtar/avtar.png    | Bin 0 -> 10983 bytes
 src/App.tsx                      |  22 ++++++++-----
 src/components/ui/breadcrumb.tsx |  40 ++++++++++++++++++++++++
 src/pages/Dashboard.tsx          |  10 +++---
 src/userComponents/Navbar.tsx    |  52 +++++++++++++++++++++++++++----
 src/userComponents/Sidebar.tsx   |   4 +--
 6 files changed, 106 insertions(+), 22 deletions(-)
 create mode 100644 public/images/avtar/avtar.png
 create mode 100644 src/components/ui/breadcrumb.tsx

diff --git a/public/images/avtar/avtar.png b/public/images/avtar/avtar.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9fa46bb6e7940265d77dc4efa9b69ce3c204b52
GIT binary patch
literal 10983
zcmV<DDj3y?P)<h;3K|Lk000e1NJLTq003|R003|Z1^@s6#^Cfz00001b5ch_0Itp)
z=>PyA07*naRCodHeFs>S=eG4&QZ#DpU1Jh^p-ArtR*KS*-Vw2&qJW|lv5SHQY$#w?
zL;*#_hDuWjqA`hyqMY>Pq<Bxcr~UUn>wnfBhCqxd=foLIuFvy6-#Cq#Z@p{nwfDQ<
zZxo8>@E_{xy5jzQ9o(-E#0L+PP~VV^2MuMo|ENJm{iDZt@CYpi@8jbS9@WWn`5M0V
zgL)^v*K>Fpo}Z7b1gt&~4;s>x0DKRe?}PR4|Gy6P53^-r+`BjA`8h+a@RQ=f18Y2J
zNPNbCwPfj&z>}?M{4A~T6t%vOBupb{N~!y)ldImx>nXntY4|^8J~?q3*;dvfW<ALU
z^#b;zf4`xOvGd7q@;kdnV$Fkwy5|SD@5NrS@_v2b?+iADLY$vS()UitkIwp5{M_FQ
zkk6k~{=!K^Ab*Q7veBF{1!zTa>=}L*rXs%;Acb|mCAs{$lkj<$)!!ZKo(k;4G@gs+
z%IHu&@Oxz4(?EQlVk7Ds0`Nn%$ftd|-_QMzTYc`>So->X7?po};x#0;N;z#TH2)uX
zKMUAa1|sf1%>Lb^2tNy;pOK=}Kg@0wOnhFz`=9skKUEzr@7RR5^AA7u@n<$UH4WnP
z0N$V8dJB0e(O5Cl@(F<c_Vzo-jh_Rr@vq?0&W(6<z69qp);;mOX9ghItSJy%yJ7kE
z#tocJUxh_>V=;YXTX^daYynKe`Eyw6Vgz@smoR;#0!5pWFlW*z%$+>0#q*vicujKr
zFiov;+FHT;$K7}Eeo;P-rz}CT=LCe94uH$pc9{020*)iPfHL}^q!3w4g5a&!6%NDO
zVA2o;CcdUXsO9T$9I3#h*A)0m-E9qks3v10D+x_A=Vt`#XZ&1(^5MnvC{A0A)ZiIN
zbhpM5dp(3(48cs@j+j15ApqJAZimIwwcw%C5e~!J!DgTWX1x?J@1wwsQ61o+^CFx^
zD=_(W1<r2Sr~v>erwswml!=WMmM0sAo-s&2Bx7G+ug0~kt=K-#8!6tCuyUp?65Xv3
z<6wY!wxbYe+y`!2?J#|W5<shd3QQQ#24+1KFnCn~gDwhK^=%J-!~XC$>>*&gjBP87
zOrPT~0KRkTn7V;{{LG5rQrm0=<*_d-%W-PWQfvrvz?uMitoE7G1YX>9V=S7gjae42
z!&|QloJO~S{V)Y44^hCRy8?Qh6wrQ20h4a+;WoB6BCUrb!txD~T3>_iBDa)OAA{HM
zaakE$#&$r%`LpT;k>~hX)J`>>sQ>fbd#Ko#iS>aFNb#A1)qYcv;$@3uPa7G_UCgm)
zs*V8SZ`c!V<J!Y<gaT7uSAgu(@1%ff_x5lf+Y57TMq%-^@$&qrNn;RU`6dF4dI{i^
zP@6#tWW`1a@N0vos24y{vtQZNC|e&i7w-t(?&x3vD#dG}FpiSRk>F;9cxN*#o~Dag
z7H`1cpa<Nw+QVVE(wtcIVXSKdPwgI<GhrB_r|BZr(Fk!fj1lW-h{bk#m}ff@K6<Z;
z8=d-wlCfsJUJ^qyW0V3PmtD{Rh`&-NoF-Nl{#<*j>4bezQI51(u1!o+0mmcRx5C8&
zv5t&;BOBvhd)N(Cz`8$UTswGZ^}t-4k;1sR=|%!J0bk*2A-7{33^B`c2;8+^5W_>s
zC5Xn|6qq<zA)qFDnTvz{p;-LP?)$Z*R2p5?Xi~Cbf^aY~N&x(#{2G$IY~^GpxLS%y
zNpiPt0+XhNagQ<>Y}y}gS}(}Sx9qEc>zM9XIAt8-9F4Hd$rLNxEQGB|9@a?qu#xv7
zkTg8L`dx*!bfHWoD7_ZFl>qWK-?#4gfu>3I%s_kMJpYGMD(rjWO`n~V)*j7;>$vua
zuo(x+=1Q-LB6CY;m<U@K=LjT0Ab6^{7iRt%JhWeycsF4{Tg<W?j^!?9NO0qGCo}=B
zVsEm?1bOYkDOw0N=?@?MF7VWO5pLt!!Fh~A(uoNJloHG&-(^f2tP8Q%0DwH#|ACaM
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
V&RWi#8V>*f002ovPDHLkV1n?2MJNCO

literal 0
HcmV?d00001

diff --git a/src/App.tsx b/src/App.tsx
index 0a9dd76..86b8a6c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,17 +4,23 @@ import Sidebar from "./userComponents/Sidebar";
 import Navbar from "./userComponents/Navbar";
 import Dashboard from "./pages/Dashboard";
 
-
 const App = () => {
   return (
     <Router>
-      <div style={{ display: "flex" }}>
-        <Sidebar />
-        <div style={{ flexGrow: 1 }}>
-          <Navbar />
-          <Routes>
-            <Route path="/" element={<Dashboard />} />
-          </Routes>
+      <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
+        <div style={{ flexShrink: 0, width: "280px" }}>
+          <Sidebar />
+        </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>
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..960e769
--- /dev/null
+++ b/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
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index f5fbd99..5620a1c 100644
--- a/src/pages/Dashboard.tsx
+++ b/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>
   );
 };
 
diff --git a/src/userComponents/Navbar.tsx b/src/userComponents/Navbar.tsx
index 8fcfd64..45e4d65 100644
--- a/src/userComponents/Navbar.tsx
+++ b/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">
-          Dashboard
+          <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>
   );
diff --git a/src/userComponents/Sidebar.tsx b/src/userComponents/Sidebar.tsx
index 030e6b4..3442a81 100644
--- a/src/userComponents/Sidebar.tsx
+++ b/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"