fix styling

miskibin · Nov 8, 2024 · 307d65d · 307d65d
1 parent 9ed247d
commit 307d65d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 22 deletions.
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
@@ -30,7 +30,7 @@
     --radius: 0.5rem;
     --chart-1: 173 58% 39%;
     --chart-2: 340 45% 55%;
-    --chart-3:  43 74% 66%;
+    --chart-3: 43 74% 66%;
     --chart-4: 43 44% 46%;
     --chart-5: 197 37% 24%;
     --chart-6: 297 37% 14%;
@@ -81,13 +81,13 @@
     --chart-4: 220 70% 50%;
     --chart-5: 280 65% 60%;
     --chart-6: 40 65% 60%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-background: 215 27.91% 16.86%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-primary:  210 40% 98%;
+    --sidebar-primary-foreground: 222.2 47.4% 11.2%;
+    --sidebar-accent: 217 19% 27%;
     --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-border: 217 19% 27%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }

diff --git a/frontend/components/sidebar.tsx b/frontend/components/sidebar.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { X } from "lucide-react";
 import {
   Sidebar,
@@ -15,7 +16,7 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
-import { stat } from "fs";
+import { cn } from "@/lib/utils";
 
 type MenuItem = {
   href: string;
@@ -29,8 +30,16 @@ type AppSidebarProps = {
 
 export default function AppSidebar({ menuItems = [] }: AppSidebarProps) {
   const { state, toggleSidebar } = useSidebar();
+  const pathname = usePathname();
   const isCollapsed = state === "collapsed";
 
+  const isActive = (href: string) => {
+    if (href === "/") {
+      return pathname === href;
+    }
+    return pathname.startsWith(href);
+  };
+
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader className="relative p-4">
@@ -65,21 +74,33 @@ export default function AppSidebar({ menuItems = [] }: AppSidebarProps) {
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
-              {menuItems.map((item, index) => (
-                <SidebarMenuItem key={index} className="py-1.5">
-                  <SidebarMenuButton className="transition-all duration-200 w-full">
-                    <Link
-                      href={item.href}
-                      className={`flex items-center gap-2 ${
-                        isCollapsed ? "justify-center" : ""
-                      }`}
+              {menuItems.map((item, index) => {
+                const active = isActive(item.href);
+                return (
+                  <SidebarMenuItem key={index} className="py-1.5">
+                    <SidebarMenuButton
+                      className={cn(
+                        "transition-all duration-200 w-full rounded-md",
+                        active && "text-primary font-medium"
+                      )}
                     >
-                      <span className="text-lg">{item.icon}</span>
-                      {!isCollapsed && <span>{item.label}</span>}
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
+                      <Link
+                        href={item.href}
+                        className={cn(
+                          "flex items-center gap-2",
+                          isCollapsed ? "justify-center" : "",
+                          active
+                            ? "text-primary"
+                            : "text-muted-foreground hover:text-foreground"
+                        )}
+                      >
+                        <span className="text-lg">{item.icon}</span>
+                        {!isCollapsed && <span>{item.label}</span>}
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>