Update responsive classes in Aside and Header components

This commit is contained in:
Dede Fuji Abdul
2024-03-05 08:38:33 +07:00
parent 9dcef310ae
commit 88d638e4a1
4 changed files with 12 additions and 12 deletions

View File

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