update aside

This commit is contained in:
Dede Fuji Abdul 2023-10-18 10:41:32 +07:00
parent 3bd24a17f4
commit f98fb80d06
2 changed files with 3 additions and 3 deletions

View File

@ -33,7 +33,7 @@ const isMenuSelected = computed(() => {
<template> <template>
<div :class="[isChildren ? 'ml-4 mt-1 bg-primary-100 rounded-xl' : '']"> <div :class="[isChildren ? 'ml-4 mt-1 bg-primary-100 rounded-xl' : '']">
<Disclosure v-slot="{ open }" v-bind:default-open="isMenuSelected ? true : false"> <Disclosure v-slot="{ open }" v-bind:default-open="isMenuSelected ? true : false" as="div">
<!-- Nested item with children --> <!-- Nested item with children -->
<DisclosureButton <DisclosureButton
:class="[(isMenuSelected || open || isChildren) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']"> :class="[(isMenuSelected || open || isChildren) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
@ -55,7 +55,7 @@ const isMenuSelected = computed(() => {
leave-active-class="overflow-hidden transition-all duration-300" leave-active-class="overflow-hidden transition-all duration-300"
leave-from-class="transform scale-300 opacity-300 max-h-[1000px]" leave-from-class="transform scale-300 opacity-300 max-h-[1000px]"
leave-to-class="transform scale-95 opacity-0 max-h-0"> leave-to-class="transform scale-95 opacity-0 max-h-0">
<DisclosurePanel :class="[(isChildren) ? 'bg-primary-100 rounded-xl ml-4' : '', 'space-y-1']"> <DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']">
<!-- Nested children --> <!-- Nested children -->
<template v-for="(subItem, index) in item.children" :key="subItem.href"> <template v-for="(subItem, index) in item.children" :key="subItem.href">
<!-- Single-level child --> <!-- Single-level child -->

View File

@ -22,7 +22,7 @@ defineProps({
<template> <template>
<div class="group"> <div class="group">
<RouterLink :to="item.href" <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 py-2 text-xs rounded-xl']"> :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']">
<svg v-if="isChildren" :class="[selected ? 'stroke-white' : 'text-aside group-hover:stroke-white', 'h-6 w-6']" <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"> width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">