defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update responsive classes in Aside and Header components

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Navigation/Aside/Aside.vue
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"

6
src/components/Navigation/Header.vue
View File

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

4
src/components/Pages/MenuProvider.vue
View File

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

10
src/views/HomeView.vue
View File

@ -1,15 +1,15 @@
<script setup lang="ts">
import MenuProvider from '@/components/Pages/MenuProvider.vue'
import Navigation from '@/components/Navigation/Navigation.vue'
import { useMenuStore } from '@/stores/menu'
import { RouterView } from 'vue-router'
import MenuProvider from '@/components/Pages/MenuProvider.vue';
import Navigation from '@/components/Navigation/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 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>