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

update route method

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-19 12:08:09 +07:00
parent 678f25f3a9
commit 4633851c6a
8 changed files with 499 additions and 770 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Navigation/Aside/Aside.vue
View File

@ -83,10 +83,10 @@ const closeSideBar = () => menu.toggleSidebar()
<template v-for="item in menu.navigation" :key="item.name">
<!-- Single-level item -->
<AsideMenuSingle v-if="item.children.length === 0" :item="item"
:selected="isMenu(item.href)" />
:selected="isMenu(item.path)" />
<!-- Nested item with children -->
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.href)" />
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
</template>
</nav>
</div>
@ -120,10 +120,10 @@ const closeSideBar = () => menu.toggleSidebar()
<nav class="flex-1 px-2 pb-4 space-y-1">
<template v-for="item in menu.navigation" :key="item.name">
<!-- Single-level item -->
<AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.href)" />
<AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.path)" />
<!-- Nested item with children -->
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.href)" />
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
</template>
</nav>
</div>

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

@ -27,7 +27,7 @@ const isMenu = (name: string) => {
}
const isMenuSelected = computed(() => {
return props.item.children.find((d) => d.href === menu.menuSelected) || props.item.children.find((d) => d.children.find((e) => e.href === menu.menuSelected))
return props.item.children.find((d) => d.path === menu.menuSelected) || props.item.children.find((d) => d.children.find((e) => e.path === menu.menuSelected))
})
</script>
@ -35,7 +35,7 @@ const isMenuSelected = computed(() => {
<div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
<Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
<!-- Nested item with children -->
<DisclosureButton @click="menu.toggleSidebarMenu(item.href, !item.expanded)"
<DisclosureButton @click="menu.toggleSidebarMenu(item.path, !item.expanded)"
:class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 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']"
@ -56,12 +56,12 @@ const isMenuSelected = computed(() => {
<div v-show="item.expanded">
<DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static>
<!-- Nested children -->
<template v-for="(subItem, index) in item.children" :key="subItem.href">
<template v-for="(subItem, index) in item.children" :key="subItem.path">
<!-- Single-level child -->
<AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
:selected="isMenu(subItem.href)" />
:selected="isMenu(subItem.path)" />
<!-- Multiple-level child -->
<AsideMenuMultiple v-else :item="subItem" :selected="subItem.href === menu.menuSelected"
<AsideMenuMultiple v-else :item="subItem" :selected="subItem.path === menu.menuSelected"
:is-children="true" />
</template>
</DisclosurePanel>

2
src/components/Navigation/Aside/AsideMenuSingle.vue
View File

@ -19,7 +19,7 @@ defineProps({
<template>
<div class="group">
<RouterLink :to="item.href"
<RouterLink :to="item.path"
: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']"

14
src/components/Pages/TestPage.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
<h3 class="mt-2 text-gray-400 whitespace-pre-wrap text-md">
Selamat datang di aplikasi
</h3>
<h1 class="mt-1 text-2xl font-semibold text-gray-500 whitespace-pre-wrap">
{{ appName }}
</h1>
</div>
</template>
<script setup lang="ts">
const appName = import.meta.env.VITE_APP_NAME
</script>