Update responsive classes in Aside and Header components

src/components/Navigation/Aside/Aside.vue

@@ -35,7 +35,7 @@ const closeSideBar = () => menu.toggleSidebar()
 
 <template>
     <TransitionRoot as="template" :show="menu.sidebarOpen">
-        <Dialog as="div" class="relative z-40 md:hidden" @close="closeSideBar">
+        <Dialog as="div" class="relative z-40 lg:hidden" @close="closeSideBar">
             <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
                 enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
                 leave-to="opacity-0">
@@ -86,7 +86,7 @@ const closeSideBar = () => menu.toggleSidebar()
         </Dialog>
     </TransitionRoot>
     <!-- Static sidebar for desktop -->
-    <div class="z-10 hidden md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
+    <div class="z-10 hidden lg:fixed lg:inset-y-0 lg:flex lg:w-80 lg: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"

src/components/Navigation/Header.vue

@@ -34,16 +34,16 @@ const showDialogLogout = () => {
 </script>
 
 <template>
-  <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 md:ml-80">
+  <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 lg:ml-80">
     <button
       type="button"
-      class="px-4 text-gray-500 focus:outline-none focus:ring-0 md:hidden"
+      class="px-4 text-gray-500 focus:outline-none focus:ring-0 lg:hidden"
       @click="openSideBar"
     >
       <span class="sr-only">Open sidebar</span>
       <IconBars3 class="w-6 h-6 fill-gray-600" />
     </button>
-    <RouterLink to="/home" class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
+    <RouterLink to="/home" class="flex items-center flex-shrink-0 my-auto ml-2 lg:hidden">
       <img class="w-auto h-11" :src="IconApp" alt="PLN" />
     </RouterLink>
     <div class="flex justify-end w-full px-4">

src/components/Pages/MenuProvider.vue

@@ -1,9 +1,9 @@
 <template>
   <main
-    class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar"
+    class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white lg:mr-3 sm:px-3 lg:px-6 rounded-t-2xl lg:rounded-t-3xl no-scroll-bar"
   >
     <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
-      <h1 class="text-lg font-semibold md:text-2xl text-dark">{{ pageTitle }}</h1>
+      <h1 class="text-lg font-semibold md:text-xl text-dark">{{ pageTitle }}</h1>
     </div>
     <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
       <slot></slot>

src/views/HomeView.vue

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