NAN

src/userComponents/Navbar.tsx

@@ -19,7 +19,7 @@ const Navbar: React.FC = () => {
   const lastSegment = pathSegments[pathSegments.length - 1] || "";
 
   return (
-    <Box bg="#F6F6F6" color="white" w="100%" p={4}>
+    <Box bg="#F6F6F6" color="white" w="100%" p={4}  >
       <Flex justify="space-between" align="center" mb={2}>
         <Text fontSize="xl" fontWeight="bold">
           <BreadcrumbRoot separator=">">

src/userComponents/Sidebar.tsx

@@ -1,5 +1,14 @@
 import React, { useState } from "react";
-import { Box, VStack, Link, Stack, Text, Image, Flex } from "@chakra-ui/react";
+import {
+  Box,
+  VStack,
+  Link,
+  Stack,
+  Text,
+  Image,
+  Flex,
+  HStack,
+} from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
 import { MdDashboard } from "react-icons/md";
 import logo from "../../public/images/logo/logo.png";
@@ -77,19 +86,27 @@ const Sidebar = () => {
                 )}
               </Flex>
             </Link>
-            {/* Sub-links */}
             {item.links && activeSection === item.value && (
-              <VStack align="start" pl={8} spacing={2} mt={2}>
+              <VStack align="start" pl={8}  mt={2}>
                 {item.links.map((link) => (
-                  <Link
-                    as={RouterLink}
-                    to={link.path}
-                    key={link.path}
-                    color="gray.600"
-                    _hover={{ color: "black" }}
-                  >
-                    {link.label}
-                  </Link>
+                  <HStack key={link.path}>
+                    {activeSection === item.value && (
+                      <Box
+                        height="10px"
+                        width="10px"
+                        borderRadius="50%"
+                        bg="#02A0A0" 
+                      />
+                    )}
+                    <Link
+                      as={RouterLink}
+                      to={link.path}
+                      color="gray.600"
+                      _hover={{ color: "black" }}
+                    >
+                      {link.label}
+                    </Link>
+                  </HStack>
                 ))}
               </VStack>
             )}