update aside

src/assets/css/style.css

@@ -2400,10 +2400,20 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .delay-300 {
   transition-delay: 300ms;
 }
 
+.delay-150 {
+  transition-delay: 150ms;
+}
+
 .duration-100 {
   transition-duration: 100ms;
 }
@@ -2523,6 +2533,11 @@ select {
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:fill-white:hover {
   fill: #fff;
 }

src/components/Aside/Aside.vue

@@ -89,7 +89,8 @@ const closeSideBar = () => menu.toggleSidebar()
     <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 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"
+            <button type="button"
+                class="px-4 py-4 text-gray-500 rounded-full hover:bg-primary-100 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" />

src/views/HomeView.vue

@@ -2,6 +2,7 @@
 import MenuProvider from '@/components/Menus/MenuProvider.vue'
 import Navigation from '@/components/Navigation.vue'
 import { useMenuStore } from '@/stores/menu'
+import { TransitionRoot } from '@headlessui/vue';
 import { RouterView } from 'vue-router'
 const menu = useMenuStore()
 </script>
@@ -9,7 +10,7 @@ const menu = useMenuStore()
 <template>
   <Navigation />
   <div
-    :class="['flex flex-col flex-1 h-[calc(100%-64px)] overflow-hidden bg-primary-50', menu.sidebarShowed ? 'md:pl-80' : 'md:pl-4']">
+    :class="['flex flex-col flex-1 h-[calc(100%-64px)] overflow-hidden bg-primary-50', 'transition-transform', menu.sidebarShowed ? 'transform duration-300 md:pl-80' : 'transform duration-300 md:pl-4']">
     <MenuProvider>
       <RouterView />
     </MenuProvider>