update method of using Icons sidebar
This commit is contained in:
Dede Fuji Abdul
parent
bcfa85cd32
commit
a9553cee4c
@ -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;
|
||||
}
|
||||
|
||||
@ -136,6 +136,4 @@ const closeSideBar = () => menu.toggleSidebar()
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@/utils/text@/utils/texts
|
||||
</template>
|
||||
@ -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>
|
||||
@ -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"
|
||||
:class="[selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" 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']">
|
||||
<IconDotOutline v-if="isChildren"
|
||||
:class="['w-6 h-6', selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" />
|
||||
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user