update component structure

src/components/Navigation/Aside/AsideMenuSingle.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { MenuItemModel } from '@/utils/interfaces'
+
+defineProps({
+    item: {
+        type: Object as () => MenuItemModel,
+        required: true
+    },
+    selected: {
+        type: Boolean,
+        required: true
+    },
+    isChildren: {
+        type: Boolean,
+        default: false
+    }
+})
+</script>
+
+<template>
+    <div class="group">
+        <RouterLink :to="item.href"
+            :class="[selected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500', 'w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl', isChildren ? 'mt-1' : 'mt-0']">
+
+            <svg v-if="isChildren" :class="[selected ? 'stroke-white' : 'text-aside group-hover:stroke-white', 'h-6 w-6']"
+                width="16" 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']">
+
+            {{ item.name }}
+        </RouterLink>
+    </div>
+</template>