update method of using Icons sidebar

src/assets/css/style.css

@@ -2779,6 +2779,10 @@ select {
   fill: #fff;
 }
 
+.group:hover .group-hover\:fill-primary-500 {
+  fill: #035b71;
+}
+
 .group:hover .group-hover\:text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2794,6 +2798,11 @@ select {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.group:hover .group-hover\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(3 91 113 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }

src/components/Navigation/Aside/Aside.vue

@@ -137,5 +137,3 @@ const closeSideBar = () => menu.toggleSidebar()
         </div>
     </div>
 </template>
-
-@/utils/text@/utils/texts

src/components/Navigation/Aside/AsideMenuMultiple.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { MenuItemModel } from '@/types/menu'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import { useMenuStore } from '@/stores/menu'
-import { DotOutline } from '@/utils/icons'
+import { IconDotOutline } from '@/utils/icons'
 import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
 const menu = useMenuStore()
 
@@ -36,11 +36,17 @@ const isMenuSelected = computed(() => {
         <Disclosure :defaultOpen="item.expanded" as="dev">
             <!-- Nested item with children -->
             <DisclosureButton @click="menu.toggleSidebarMenu(item.path, !item.expanded)"
-                :class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
+                :class="[(isMenuSelected || item.expanded || isChildren) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
-                <embed :src="isChildren ? DotOutline : item.icon"
+                <component v-if="isChildren" :is="IconDotOutline"
-                    :class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
+                    :class="[(isMenuSelected || item.expanded) ? ' fill-primary-500' : 'text-aside group-hover:fill-primary-500', 'mr-2 flex-shrink-0 h-6 w-6']"
-                    type="image/svg+xml" />
+                    aria-hidden="true" />
-                <span class="flex-1">{{ item.name }}</span>
+                <component v-else :is="item.icon"
+                    :class="[(isMenuSelected || item.expanded || isChildren || selected) ? ' fill-primary-500' : 'text-aside group-hover:fill-primary-500', 'mr-2 flex-shrink-0 h-6 w-6']"
+                    aria-hidden="true" />
+                <span
+                    :class="[(isMenuSelected || item.expanded || selected) ? 'text-primary-500' : 'group-hover:text-primary-500', 'flex-1']">
+                    {{ item.name }}
+                </span>
 
                 <svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', item.expanded ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
                     width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -71,4 +77,4 @@ const isMenuSelected = computed(() => {
 
         </Disclosure>
     </div>
-</template>@/utils/menu
+</template>

src/components/Navigation/Aside/AsideMenuSingle.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { MenuItemModel } from '@/types/menu'
+import { IconDotOutline } from '@/utils/icons';
 
 defineProps({
     item: {
@@ -22,22 +23,12 @@ defineProps({
         <RouterLink :to="item.path"
             :class="[selected ? 'aside-single-item-active' : 'aside-single-item-inactive', isChildren ? 'mt-1' : 'mt-0']">
 
-            <svg v-if="isChildren"
+            <IconDotOutline v-if="isChildren"
-                :class="[selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" width="16"
+                :class="['w-6 h-6', selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" />
-                height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-                <g id="DotOutline">
-                    <path id="Vector" opacity="0.2"
-                        d="M9.5 8C9.5 8.29667 9.41203 8.58668 9.24721 8.83336C9.08238 9.08003 8.84812 9.27229 8.57403 9.38582C8.29994 9.49935 7.99834 9.52906 7.70737 9.47118C7.41639 9.4133 7.14912 9.27044 6.93934 9.06066C6.72956 8.85088 6.5867 8.58361 6.52882 8.29264C6.47094 8.00166 6.50065 7.70006 6.61418 7.42597C6.72771 7.15189 6.91997 6.91762 7.16665 6.7528C7.41332 6.58797 7.70333 6.5 8 6.5C8.39783 6.5 8.77936 6.65804 9.06066 6.93934C9.34197 7.22064 9.5 7.60218 9.5 8Z"
-                        fill="#4B5563" />
-                    <path id="Vector_2"
-                        d="M8 6C7.60444 6 7.21776 6.1173 6.88886 6.33706C6.55996 6.55682 6.30362 6.86918 6.15224 7.23463C6.00087 7.60009 5.96126 8.00222 6.03843 8.39018C6.1156 8.77814 6.30608 9.13451 6.58579 9.41421C6.86549 9.69392 7.22186 9.8844 7.60982 9.96157C7.99778 10.0387 8.39992 9.99913 8.76537 9.84776C9.13082 9.69638 9.44318 9.44004 9.66294 9.11114C9.8827 8.78224 10 8.39556 10 8C10 7.46957 9.78929 6.96086 9.41421 6.58579C9.03914 6.21071 8.53043 6 8 6ZM8 9C7.80222 9 7.60888 8.94135 7.44443 8.83147C7.27998 8.72159 7.15181 8.56541 7.07612 8.38268C7.00043 8.19996 6.98063 7.99889 7.01922 7.80491C7.0578 7.61093 7.15304 7.43275 7.29289 7.29289C7.43275 7.15304 7.61093 7.0578 7.80491 7.01921C7.99889 6.98063 8.19996 7.00043 8.38268 7.07612C8.56541 7.15181 8.72159 7.27998 8.83147 7.44443C8.94135 7.60888 9 7.80222 9 8C9 8.26522 8.89464 8.51957 8.70711 8.70711C8.51957 8.89464 8.26522 9 8 9Z"
-                        fill="#4B5563" />
-                </g>
-            </svg>
-
-            <embed v-else :src="item.icon" type="image/svg+xml"
-                :class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']">
 
+            <component :is="item.icon"
+                :class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']"
+                aria-hidden="true" />
             {{ item.name }}
         </RouterLink>
     </div>