update

src/assets/css/style.css

@@ -1974,6 +1974,10 @@ select {
   padding-left: 1rem;
 }
 
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -3159,6 +3163,10 @@ select {
     padding-left: 20rem;
   }
 
+  .md\:pl-4 {
+    padding-left: 1rem;
+  }
+
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;

src/components/Aside/Aside.vue

@@ -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">

src/components/Aside/AsideMenuMultiple.vue

@@ -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" />

src/components/Header.vue

@@ -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 auth = useAuthStore()
-const userStore = useUserStore()
+const user = useUserStore()
-const messageStore = useMessageStore()
+const message = useMessageStore()
-const commandStore = useCommandPalattesStore()
+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" />
+    <CommandPalettes :open="command.open" @onClose="command.handleOnDismissCommandPalettes" />
-    <MessageBox :open="messageStore.open" @onClose="messageStore.handleOnDismissMessageBox" />
+    <MessageBox :open="message.open" @onClose="message.handleOnDismissMessageBox" />
 </template>

src/stores/menu.ts

@@ -535,7 +535,7 @@ export const useMenuStore = defineStore('menu', () => {
         },
     ])
     const sidebarOpen = ref(false)
-    const sedebarShowed = ref(true)
+    const sidebarShowed = ref(true)
     const menuSelected = ref(route.fullPath)
     const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
     const toggleSidebarMenu = (href: string, newExpanded: boolean): void => {
@@ -558,7 +558,7 @@ export const useMenuStore = defineStore('menu', () => {
 
         toggleItemExpanded(navigation.value)
     }
-    const toggleSidebarDesktop = () => (sedebarShowed.value = !sedebarShowed.value)
+    const toggleSidebarDesktop = () => (sidebarShowed.value = !sidebarShowed.value)
 
     return {
         navigation,
@@ -566,7 +566,7 @@ export const useMenuStore = defineStore('menu', () => {
         sidebarOpen,
         menuSelected,
         toggleSidebarMenu,
-        sedebarShowed,
+        sidebarShowed,
         toggleSidebarDesktop
     }
 })

src/views/HomeView.vue

@@ -1,15 +1,17 @@
+<script setup lang="ts">
+import MenuProvider from '@/components/Menus/MenuProvider.vue'
+import Navigation from '@/components/Navigation.vue'
+import { useMenuStore } from '@/stores/menu'
+import { RouterView } from 'vue-router'
+const menu = useMenuStore()
+</script>
+
 <template>
   <Navigation />
-  <div class="flex flex-col flex-1 h-[calc(100%-64px)] overflow-hidden md:pl-80 bg-primary-50">
+  <div
+    :class="['flex flex-col flex-1 h-[calc(100%-64px)] overflow-hidden bg-primary-50', menu.sidebarShowed ? 'md:pl-80' : 'md:pl-4']">
     <MenuProvider>
       <RouterView />
     </MenuProvider>
   </div>
 </template>
-
-<script setup lang="ts">
-import MenuProvider from '@/components/Menus/MenuProvider.vue';
-import Navigation from '@/components/Navigation.vue';
-
-import { RouterView } from 'vue-router'
-</script>