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

12
src/layouts/MainLayout.vue
View file

@ -169,13 +169,13 @@ onMounted(async () => {
<template>
<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 -->
<div
style="position: relative"
:style="$q.screen.gt.xs ? 'z-index: 1000' : 'z-index: 10'"
style="position: relative; z-index: 9999"
:hidden="$q.screen.lt.md && leftDrawerOpen"
>
<q-avatar
size="36px"
@ -209,8 +209,8 @@ onMounted(async () => {
</div>
<div
class="surface-3 bordered rounded q-pb-lg scroll column"
style="height: calc(100vh - 32px); flex-wrap: nowrap"
class="surface-3 rounded q-pb-lg scroll column"
style="height: 100vh; flex-wrap: nowrap"
>
<!-- header -->
<div