Merge pull request #181 from asmit27rai/sidebarUpdate

Sidebar UI Update
AOSSIE-Org · Jan 1, 2025 · 502fd2a · 502fd2a
2 parents 6e2e762 + b7dfab1
commit 502fd2a
Showing 1 changed file with 6 additions and 10 deletions.
diff --git a/frontend/src/components/Navigation/Sidebar/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar/Sidebar.tsx
@@ -10,22 +10,18 @@ function Sidebar() {
     const baseClasses =
       'group flex flex-col items-center gap-2 p-3 rounded-xl transition-all duration-200';
 
-    const activeClasses = `
-      bg-white/95 dark:bg-white/10
+    const activeClasses = `bg-white/95 dark:bg-white/10
       text-gray-900 dark:text-gray-100
       shadow-md dark:shadow-gray-900/30
       backdrop-blur-md backdrop-saturate-150
-      border border-gray-200 dark:border-gray-700
-    `;
+      border border-gray-200 dark:border-gray-700`;
 
-    const inactiveClasses = `
-      bg-transparent hover:bg-gray-50 dark:hover:bg-white/10
+    const inactiveClasses = `bg-transparent hover:bg-gray-50 dark:hover:bg-white/10
       text-gray-700 dark:text-gray-400
       hover:text-gray-900 dark:hover:text-gray-100
       border border-transparent
       hover:border-gray-200 dark:hover:border-gray-700
-      hover:shadow-sm dark:hover:shadow-gray-900/20
-    `;
+      hover:shadow-sm dark:hover:shadow-gray-900/20`;
 
     return `${baseClasses} ${isActive(path) ? activeClasses : inactiveClasses}`;
   };
@@ -34,7 +30,7 @@ function Sidebar() {
     'h-5 w-5 transition-transform duration-200 ease-out group-hover:scale-110';
 
   return (
-    <div className="sidebar text-theme-dark dark:text-theme-light bg-theme-light m-2 sm:m-4 flex flex-col justify-between rounded-lg sm:rounded-2xl border border-gray-300 p-2 sm:p-4 backdrop-blur-md backdrop-saturate-150 dark:border-white/10 dark:bg-white/5 w-full sm:w-36">
+    <div className="sidebar h-[90vh] sm:h-[90%] text-theme-dark dark:text-theme-light bg-theme-light m-2 sm:m-4 flex flex-col justify-between rounded-lg sm:rounded-2xl border border-gray-300 p-2 sm:p-4 backdrop-blur-md backdrop-saturate-150 dark:border-white/10 dark:bg-white/5 w-full sm:w-36 overflow-y-auto scrollbar-hide">
       <div className="mt-2 flex flex-col gap-4">
         <Link to="/home" className={linkClasses('/home')}>
           <Home
@@ -80,4 +76,4 @@ function Sidebar() {
   );
 }
 
-export default Sidebar;
+export default Sidebar;