sidebar UI changes

AOSSIE-Org · Jan 4, 2025 · eefabbb · eefabbb
1 parent 61f8219
commit eefabbb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/frontend/src/components/Album/Album.tsx b/frontend/src/components/Album/Album.tsx
@@ -16,7 +16,7 @@ import {
 
 const AlbumsView: React.FC = () => {
 
-  const { successData: albums, isLoading, error } = usePictoQuery({
+  const { successData: albums, isLoading } = usePictoQuery({
 
     queryFn: fetchAllAlbums,
     queryKey: ['all-albums'],

diff --git a/frontend/src/components/Navigation/Sidebar/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar/Sidebar.tsx
@@ -13,7 +13,7 @@ const Sidebar = () => {
 
   const linkClasses = (path: string) => {
     const baseClasses =
-      'group flex flex-col items-center gap-2 p-3 rounded-xl transition-all duration-200';
+      'group flex flex-col items-center gap-2 p-3 transition-all duration-200';
 
     const activeClasses = `
       bg-white/95 dark:bg-white/10
@@ -40,41 +40,43 @@ const Sidebar = () => {
 
   return (
     <div
-      className={`relative sidebar bg-theme-light dark:bg-gray-800 text-gray-900 dark:text-gray-200 m-4 flex flex-col justify-between rounded-2xl border border-gray-300 dark:border-gray-700 p-4 shadow-md transition-all duration-300 ${
-        isExpanded ? 'w-48' : 'w-16'
+      className={`relative h-[60vh] sidebar bg-theme-light dark:bg-gray-800 text-gray-900 dark:text-gray-200 m-4 flex flex-col justify-around items-center border border-gray-300 dark:border-gray-700 p-4 shadow-md transition-all duration-500 ${
+        isExpanded ? 'w-32' : 'w-16'
       }`}
+      style={{borderRadius:"1rem"}}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <div className="mt-2 flex flex-col gap-2">
+      <div className={`mt-2 flex flex-col  ${isExpanded ? 'gap-4' : 'gap-12'} `}>
         {[
           { path: '/home', label: 'Home', Icon: Home },
           { path: '/ai-tagging', label: 'AI Tagging', Icon: Sparkles },
           { path: '/videos', label: 'Videos', Icon: Video },
           { path: '/albums', label: 'Albums', Icon: Images },
           { path: '/settings', label: 'Settings', Icon: Settings },
         ].map(({ path, label, Icon }) => (
-          <Link
-            to={path}
-            className={linkClasses(path)}
-            tabIndex={0}
-            aria-label={label}
-            key={path}
-          >
-            <Icon
-              className={`${iconClasses} ${
-                isActive(path) ? 'scale-110 text-gray-800' : ''
-              }`}
-              strokeWidth={isActive(path) ? 2.5 : 1.5}
-            />
-            <span
-              className={`whitespace-nowrap text-sm font-medium transition-opacity duration-200 ${
-                isExpanded ? 'opacity-100' : 'opacity-0'
-              }`}
+          <div key={path} style={{ borderRadius: '1rem',overflow:'hidden' }}>
+            <Link
+              to={path}
+              className={linkClasses(path)}
+              tabIndex={0}
+              aria-label={label}
             >
-              {label}
-            </span>
-          </Link>
+                <Icon
+                  className={`${iconClasses} ${
+                    isActive(path) ? 'scale-110 text-white' : ''
+                  }`}
+                  strokeWidth={isActive(path) ? 2.5 : 1.5}
+                />
+                <span
+                  className={`whitespace-nowrap text-sm font-medium transition-opacity duration-100 ${
+                    isExpanded ? '' : 'hidden'
+                  }`}
+                >
+                  {label}
+                </span>
+              </Link>
+          </div>
         ))}
       </div>
     </div>