chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: update drawer

Browse source
This commit is contained in:
Methapon2001 2024-07-04 11:28:51 +07:00
parent 9bc9e0f1d5
commit 9126270de6
2 changed files with 14 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/DrawerComponent.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref } from 'vue'; import { computed, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
@ -94,20 +94,14 @@ function navigateTo(label: string, destination: string) {
v-model="leftDrawerOpen" v-model="leftDrawerOpen"
side="left" side="left"
:breakpoint="599" :breakpoint="599"
:width="$q.screen.lt.md ? 200 : 300" :width="$q.screen.lt.md ? 200 : 256"
> >
<div class="main-bar"> <div
<div class="column items-center justify-center q-pa-xl cursor-pointer"
class="column items-center justify-center q-pa-xl cursor-pointer" @click="$router.push('/')"
@click="$router.push('/')" id="btn-drawer-home"
id="btn-drawer-home" >
> <q-img src="/logo.png" style="width: 80%; height: 70%" />
<q-img src="/logo.png" style="width: 70%; height: 70%">
<template #error>
<img src="/logo.png" alt="" width="100%" />
</template>
</q-img>
</div>
</div> </div>
<div id="drawer-menu" class="q-pr-sm"> <div id="drawer-menu" class="q-pr-sm">

12
src/layouts/MainLayout.vue
View file

@ -169,13 +169,13 @@ onMounted(async () => {
<template> <template>
<q-layout view="lHh Lpr lFf"> <q-layout view="lHh Lpr lFf">
<drawer-component v-model:leftDrawerOpen="leftDrawerOpen" /> <drawer-component v-model:left-drawer-open="leftDrawerOpen" />
<q-page-container class="surface-1 q-pa-md"> <q-page-container>
<!-- drawer control --> <!-- drawer control -->
<div <div
style="position: relative" style="position: relative; z-index: 9999"
:style="$q.screen.gt.xs ? 'z-index: 1000' : 'z-index: 10'" :hidden="$q.screen.lt.md && leftDrawerOpen"
> >
<q-avatar <q-avatar
size="36px" size="36px"
@ -209,8 +209,8 @@ onMounted(async () => {
</div> </div>
<div <div
class="surface-3 bordered rounded q-pb-lg scroll column" class="surface-3 rounded q-pb-lg scroll column"
style="height: calc(100vh - 32px); flex-wrap: nowrap" style="height: 100vh; flex-wrap: nowrap"
> >
<!-- header --> <!-- header -->
<div <div