fix(frontend): color icon for sidebar

Author: haxgun

frontend/src/components/DashboardPage/AppSidebar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import NavExtra from '@/components/DashboardPage/NavExtra.vue'
+import NavFooter from '@/components/DashboardPage/NavFooter.vue'
 import NavMain from '@/components/DashboardPage/NavMain.vue'
 import NavStart from '@/components/DashboardPage/NavStart.vue'
-import NavUser from '@/components/DashboardPage/NavUser.vue'
 import { type SidebarProps } from '@/components/ui/sidebar'
 import { Sidebar, SidebarContent, SidebarFooter } from '@/components/ui/sidebar'
 import { NAV_DATA } from '@/data/dashboard/HeaderNav.data'
@@ -22,7 +22,7 @@ const data = NAV_DATA
       <NavExtra title="Extra" :items="data.navExtra" :buttons="data.buttons" />
     </SidebarContent>
     <SidebarFooter>
-      <NavUser :user="data.user" :buttons="data.buttons" />
+      <NavFooter :user="data.user" :buttons="data.buttons" />
     </SidebarFooter>
   </Sidebar>
 </template>

frontend/src/components/DashboardPage/NavExtra.vue

@@ -24,7 +24,7 @@ defineProps<{
       <SidebarMenuItem v-for="item in items" :key="item.title">
         <SidebarMenuButton :tooltip="item.title" as-child>
           <a :href="item.url">
-            <component :is="item.icon" v-if="item.icon" />
+            <component :is="item.icon" color="currentColor" v-if="item.icon" />
             <span>{{ item.title }}</span>
           </a>
         </SidebarMenuButton>

frontend/src/components/DashboardPage/NavUser.vue renamed to frontend/src/components/DashboardPage/NavFooter.vue

@@ -23,7 +23,7 @@ const props = defineProps<{
         @click="openLink(button.url)"
         :tooltip="button.title"
       >
-        <component :size="16" :is="button.icon" v-if="button.icon" />
+        <component :size="16" :is="button.icon" color="currentColor" v-if="button.icon" />
       </SidebarMenuButton>
     </div>
   </SidebarMenu>

frontend/src/components/DashboardPage/NavMain.vue

@@ -42,7 +42,7 @@ defineProps<{
         <SidebarMenuItem v-if="item.items">
           <CollapsibleTrigger as-child>
             <SidebarMenuButton :tooltip="item.title">
-              <component :is="item.icon" v-if="item.icon" />
+              <component :is="item.icon" color="currentColor" v-if="item.icon" />
               <span>{{ item.title }}</span>
               <ChevronRight
                 class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
@@ -54,7 +54,7 @@ defineProps<{
               <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
                 <SidebarMenuSubButton as-child>
                   <a :href="subItem.url">
-                    <component :is="subItem.icon" v-if="subItem.icon" />
+                    <component :is="subItem.icon" color="currentColor" v-if="subItem.icon" />
                     <span>{{ subItem.title }}</span>
                   </a>
                 </SidebarMenuSubButton>
@@ -65,7 +65,7 @@ defineProps<{
         <SidebarMenuItem v-else>
           <SidebarMenuButton :tooltip="item.title" as-child>
             <a :href="item.url">
-              <component :is="item.icon" v-if="item.icon" />
+              <component :is="item.icon" color="currentColor" v-if="item.icon" />
               <span>{{ item.title }}</span>
             </a>
           </SidebarMenuButton>

frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -29,7 +29,7 @@ const props = withDefaults(
     :data-active="isActive"
     :class="
       cn(
-        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none 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',
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none 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',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',