From bedab8964ef5bbe59fa29fda4fadb091e72c897d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <nemile.re@gmail.com>
Date: Fri, 7 Mar 2025 17:15:38 +0400
Subject: [PATCH] Add icon on nav sub items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <nemile.re@gmail.com>
---
 apps/console/src/components/NavMain.tsx    | 12 +++++++-----
 apps/console/src/components/ui/sidebar.tsx |  4 ++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/console/src/components/NavMain.tsx b/apps/console/src/components/NavMain.tsx
index 8610681e8..13cb87230 100644
--- a/apps/console/src/components/NavMain.tsx
+++ b/apps/console/src/components/NavMain.tsx
@@ -108,13 +108,15 @@ export function NavMain() {
                               <SidebarMenuSubButton
                                 asChild
                                 data-active={subItemActive ? "true" : undefined}
-                                className={
-                                  subItemActive
-                                    ? "text-primary"
-                                    : "text-gray-600"
-                                }
                               >
                                 <Link to={subItem.url}>
+                                  <subItem.icon
+                                    className={
+                                      subItemActive
+                                        ? "text-lime-9"
+                                        : "text-lime-6"
+                                    }
+                                  />
                                   <span className="font-medium">
                                     {subItem.title}
                                   </span>
diff --git a/apps/console/src/components/ui/sidebar.tsx b/apps/console/src/components/ui/sidebar.tsx
index bd7c47287..74b229a89 100644
--- a/apps/console/src/components/ui/sidebar.tsx
+++ b/apps/console/src/components/ui/sidebar.tsx
@@ -720,8 +720,8 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-4 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        "text-gray-600 flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-4 outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-primary focus-visible:ring-2 active:bg-sidebar-accent active:text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-primary",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",