style: change sidebar menu button color

figueroaignacio · Dec 31, 2024 · 62ae358 · 62ae358
1 parent 5891895
commit 62ae358
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/apps/web/components/ui/sidebar.tsx b/apps/web/components/ui/sidebar.tsx
@@ -519,6 +519,8 @@ const sidebarMenuButtonVariants = cva(
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+        ghost:
+          "dark:hover:bg-gray-600 dark:hover:bg-opacity-30 hover:bg-[#dde3ea]",
       },
       size: {
         default: "h-8 text-sm",

diff --git a/apps/web/modules/app/ui/app-sidebar-links.tsx b/apps/web/modules/app/ui/app-sidebar-links.tsx
@@ -54,11 +54,11 @@ export function AppSidebarLinks() {
                 {group.items.map((item) => {
                   const Icon = iconMap[item.icon];
                   return (
-                    <SidebarMenuButton asChild key={item.href}>
+                    <SidebarMenuButton asChild key={item.href} variant="ghost">
                       <SidebarMenuItem>
                         <Link
                           href={item.href}
-                          className="flex items-center py-2"
+                          className="flex items-center py-2 w-full"
                         >
                           <Icon className="mr-3 h-5 w-5" />
                           {item.title}