update aside
This commit is contained in:
parent
3bd24a17f4
commit
f98fb80d06
@ -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 -->
|
||||||
|
@ -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">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user