update
This commit is contained in:
Dede Fuji Abdul
@@ -15,6 +15,7 @@ import { IconApp } from '@/utils/icons'
|
||||
import AsideMenuSingle from '@/components/Aside/AsideMenuSingle.vue'
|
||||
import AsideMenuMultiple from '@/components/Aside/AsideMenuMultiple.vue'
|
||||
import type { MenuItemModel } from '@/utils/interfaces'
|
||||
import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
|
||||
|
||||
const menu = useMenuStore()
|
||||
const route = useRoute()
|
||||
@@ -85,14 +86,19 @@ const closeSideBar = () => menu.toggleSidebar()
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="z-10 hidden bg-primary-50 md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
|
||||
<div class="z-10 hidden md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex items-center flex-shrink-0 h-16 px-5">
|
||||
<div class="flex flex-row items-center flex-shrink-0 h-16 px-2 bg-primary-50">
|
||||
<button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0"
|
||||
@click="menu.toggleSidebarDesktop()">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
|
||||
</button>
|
||||
<RouterLink to="/">
|
||||
<img class="w-auto h-11" :src="IconApp" alt="PLN" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="flex flex-col flex-grow overflow-y-auto">
|
||||
<div :class="[menu.sidebarShowed ? 'flex flex-col flex-grow overflow-y-auto' : 'hidden']">
|
||||
<div class="flex flex-col flex-grow mt-5">
|
||||
<nav class="flex-1 px-2 pb-4 space-y-1">
|
||||
<template v-for="item in menu.navigation" :key="item.name">
|
||||
|
||||
@@ -36,7 +36,7 @@ const isMenuSelected = computed(() => {
|
||||
<Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
|
||||
<!-- Nested item with children -->
|
||||
<DisclosureButton @click="menu.toggleSidebarMenu(item.href, !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', 'group w-full flex items-center pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
|
||||
: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']"
|
||||
type="image/svg+xml" />
|
||||
|
||||
@@ -16,9 +16,6 @@ import {
|
||||
MenuItems,
|
||||
} from '@headlessui/vue'
|
||||
import {
|
||||
BookOpenIcon,
|
||||
ChatBubbleOvalLeftEllipsisIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
Bars3BottomLeftIcon
|
||||
} from '@heroicons/vue/24/outline'
|
||||
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
|
||||
@@ -27,10 +24,10 @@ import PictureInitial from './PictureInitial.vue'
|
||||
import Icon from '@/assets/images/pln-with-text.png'
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const userStore = useUserStore()
|
||||
const messageStore = useMessageStore()
|
||||
const commandStore = useCommandPalattesStore()
|
||||
const auth = useAuthStore()
|
||||
const user = useUserStore()
|
||||
const message = useMessageStore()
|
||||
const command = useCommandPalattesStore()
|
||||
const menu = useMenuStore()
|
||||
const dialog = useDialogStore()
|
||||
|
||||
@@ -54,6 +51,7 @@ const showDialogLogout = () => {
|
||||
dialog.confirmText = 'Ya, logout'
|
||||
dialog.showCancelButton = true
|
||||
dialog.onConfirm = () => {
|
||||
auth.logout()
|
||||
window.location.href = '/login'
|
||||
}
|
||||
dialog.open = true
|
||||
@@ -73,7 +71,7 @@ const showDialogLogout = () => {
|
||||
<div class="flex justify-end w-full px-4">
|
||||
<!-- <div class="flex flex-1">
|
||||
<div class="flex w-full md:ml-0">
|
||||
<button @click="commandStore.showCommandPalettes"
|
||||
<button @click="command.showCommandPalettes"
|
||||
class="relative w-full text-gray-400 border-0 border-transparent rounded-xl hover:text-primary-500 ring-0 ring-transparent focus:border-transparent focus:border-0 focus:ring-0">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
|
||||
<MagnifyingGlassIcon class="w-5 h-5" aria-hidden="true" />
|
||||
@@ -95,12 +93,12 @@ const showDialogLogout = () => {
|
||||
<span class="sr-only">Manual Book</span>
|
||||
<BookOpenIcon class="w-6 h-6" aria-hidden="true" />
|
||||
</button>
|
||||
<button type="button" @click="messageStore.showDialogMessageBox"
|
||||
<button type="button" @click="message.showDialogMessageBox"
|
||||
class="p-1 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
|
||||
<span class="sr-only">Message</span>
|
||||
<ChatBubbleOvalLeftEllipsisIcon class="w-6 h-6" aria-hidden="true" />
|
||||
</button> -->
|
||||
<button @click="commandStore.showCommandPalettes" type="button"
|
||||
<button @click="command.showCommandPalettes" type="button"
|
||||
class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
|
||||
<span class="sr-only">Search</span>
|
||||
<MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
|
||||
@@ -114,9 +112,9 @@ const showDialogLogout = () => {
|
||||
class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
|
||||
font-class="text-xs font-bold text-primary-500" :name="userStore.user_name" />
|
||||
font-class="text-xs font-bold text-primary-500" :name="user.user_name" />
|
||||
<span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
|
||||
{{ userStore.user_name }}
|
||||
{{ user.user_name }}
|
||||
</span>
|
||||
</MenuButton>
|
||||
</div>
|
||||
@@ -130,17 +128,17 @@ const showDialogLogout = () => {
|
||||
<div class="flex-shrink-0 block px-4 py-2 border-b border-gray-50 group">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<!-- <img class="inline-block rounded-full h-9 w-9" :src="userStore.user_image" alt="" /> -->
|
||||
<!-- <img class="inline-block rounded-full h-9 w-9" :src="user.user_image" alt="" /> -->
|
||||
<PictureInitial class-name="nline-block" size-class="w-9 h-9"
|
||||
background-class="bg-gray-100" font-class="font-bold text-gray-600 text-md"
|
||||
:name="userStore.user_name" />
|
||||
:name="user.user_name" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
|
||||
{{ userStore.user_name }}
|
||||
{{ user.user_name }}
|
||||
</p>
|
||||
<p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
|
||||
{{ userStore.user_access }}
|
||||
{{ user.user_access }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,6 +163,6 @@ const showDialogLogout = () => {
|
||||
</div>
|
||||
|
||||
<ChangePasswordDialog :open="dialogChangePassword" @onClose="handleOnDismissDialogChangePassword" />
|
||||
<CommandPalettes :open="commandStore.open" @onClose="commandStore.handleOnDismissCommandPalettes" />
|
||||
<MessageBox :open="messageStore.open" @onClose="messageStore.handleOnDismissMessageBox" />
|
||||
<CommandPalettes :open="command.open" @onClose="command.handleOnDismissCommandPalettes" />
|
||||
<MessageBox :open="message.open" @onClose="message.handleOnDismissMessageBox" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user