From 65eeac9256e739bfd3786230f5054a72cd5aa9f8 Mon Sep 17 00:00:00 2001
From: Akhila Sunesh <140897461+AkhilaSunesh@users.noreply.github.com>
Date: Fri, 7 Jun 2024 22:01:03 +0530
Subject: [PATCH] done

---
 src/components/Sidebar/SideBar.jsx | 43 +++++++++++++++++-------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/Sidebar/SideBar.jsx b/src/components/Sidebar/SideBar.jsx
index ff7ef634..58197a68 100644
--- a/src/components/Sidebar/SideBar.jsx
+++ b/src/components/Sidebar/SideBar.jsx
@@ -43,17 +43,18 @@ const showAnimation = {
 const SideBar = ({ routes, children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const location = useLocation();
-  const [modes,setModes]=useState("Dark")
+  const [modes, setModes] = useState("Dark");
+  
   useEffect(() => {
     const currentCategory = getCurrentCategory();
     const scrollbarColor = getScrollbarColor(currentCategory);
     applyScrollbarColor(scrollbarColor);
-  }, [location]); // Watch for changes in location state
+  }, [location]);
 
   const getCurrentCategory = () => {
     const currentPath = location.pathname;
     const category = routes.find((route) => currentPath.startsWith(route.path));
-    return currentPath; // Return the category name
+    return currentPath;
   };
 
   const getScrollbarColor = (currentPath) => {
@@ -94,16 +95,15 @@ const SideBar = ({ routes, children }) => {
 
   const toggle = () => setIsOpen(!isOpen);
 
-  const modes_control=()=>{
-    document.body.classList.toggle('light')
-    if(document.body.classList.contains('light')){
-      setModes("Light")
+  const modes_control = () => {
+    document.body.classList.toggle('light');
+    if (document.body.classList.contains('light')) {
+      setModes("Light");
+    } else {
+      setModes("Dark");
     }
-    else{
-      setModes("Dark")
-    }
-  }
-  console.log(modes)
+  };
+
   return (
     <>
       <div className='main-container'>
@@ -148,14 +148,19 @@ const SideBar = ({ routes, children }) => {
                     showAnimation={showAnimation}
                     isOpen={isOpen}
                     setIsOpen={setIsOpen}
-                    routes={routes} // Pass the routes prop here
+                    routes={routes}
                   />
-
                 );
               }
 
               return (
-                <NavLink to={route.path} key={index} className='link' activeClassName='active'>
+                <NavLink 
+                  to={route.path} 
+                  key={index} 
+                  className='link' 
+                  activeClassName='active'
+                  title={route.name} // Add hover text here
+                >
                   <div className='circle'>
                     <div className='icon'>{route.icon}</div>
                   </div>
@@ -169,11 +174,11 @@ const SideBar = ({ routes, children }) => {
                 </NavLink>
               );
             })}
-            <div className={isOpen?"opened_menu_bar":'Dark_Light_mode'} onClick={()=>modes_control()}>
-            <img  src='https://cdn-icons-png.flaticon.com/128/12301/12301351.png' alt='Dark_light_mode' />
-            {isOpen?<p>{modes}</p>:<></>}
+            <div className={isOpen ? "opened_menu_bar" : 'Dark_Light_mode'} onClick={modes_control}>
+              <img src='https://cdn-icons-png.flaticon.com/128/12301/12301351.png' alt='Dark_light_mode' />
+              {isOpen ? <p>{modes}</p> : <></>}
             </div>
-            </section>
+          </section>
         </motion.div>
 
         <main style={{ marginLeft: 'auto', transition: 'all 0.3s' }}>{children}</main>