circle

src/userComponents/Sidebar.tsx

@@ -8,6 +8,7 @@ import {
   Image,
   Flex,
   HStack,
+  Circle,
 } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
 import { MdDashboard } from "react-icons/md";
@@ -69,8 +70,10 @@ const Sidebar = () => {
                     color={activeSection === item.value ? "#FFFFFF" : "#000000"}
                     size="20px"
                   /> */}
+                  <Circle size="30px" bg="white" color="teal.500">
+                    {item.icon}
+                  </Circle>
 
-                  {item.icon}
                   <Text width="100%" fontSize="sm" fontWeight="medium">
                     {item.title}
                   </Text>
@@ -87,7 +90,7 @@ const Sidebar = () => {
               </Flex>
             </Link>
             {item.links && activeSection === item.value && (
-              <VStack align="start" pl={8}  mt={2}>
+              <VStack align="start" pl={8} mt={2}>
                 {item.links.map((link) => (
                   <HStack key={link.path}>
                     {activeSection === item.value && (
@@ -95,7 +98,7 @@ const Sidebar = () => {
                         height="10px"
                         width="10px"
                         borderRadius="50%"
-                        bg="#02A0A0" 
+                        bg="#02A0A0"
                       />
                     )}
                     <Link