From b7dfab10f0cc37e12b8d0b9479a32b5b4e8d8bec Mon Sep 17 00:00:00 2001
From: asmit27rai <raiasmit10@gmail.com>
Date: Tue, 31 Dec 2024 16:15:25 +0530
Subject: [PATCH] Sidebar UI Update

---
 .../components/Navigation/Sidebar/Sidebar.tsx    | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Navigation/Sidebar/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar/Sidebar.tsx
index 29d840cd..783f6bde 100644
--- 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;
\ No newline at end of file
+export default Sidebar;