defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update method of using Icons sidebar

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-26 16:27:08 +07:00
parent bcfa85cd32
commit a9553cee4c
4 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Navigation/Aside/AsideMenuMultiple.vue
View File

@@ -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']">
<embed :src="isChildren ? DotOutline : item.icon"
:class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
type="image/svg+xml" />
<span class="flex-1">{{ item.name }}</span>
: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']">
<component v-if="isChildren" :is="IconDotOutline"
:class="[(isMenuSelected || item.expanded) ? ' fill-primary-500' : 'text-aside group-hover:fill-primary-500', 'mr-2 flex-shrink-0 h-6 w-6']"
aria-hidden="true" />
<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>