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

feat: mini-drawer

Browse source
This commit is contained in:
puriphatt 2024-07-04 09:53:16 +00:00
parent 4f240a3f20
commit bfec8255ff
2 changed files with 81 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

125
src/components/DrawerComponent.vue
View file

@ -3,6 +3,10 @@ import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Icon } from '@iconify/vue';
defineProps<{
mini?: boolean;
}>();
const router = useRouter();
const currentRoute = ref<string>('');
@ -79,7 +83,7 @@ const labelMenu = ref<
]);
const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
default: false,
default: true,
});
function navigateTo(label: string, destination: string) {
@ -96,30 +100,33 @@ function branchSetting() {}
v-model="leftDrawerOpen"
side="left"
:breakpoint="599"
:width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
class="column justify-between no-wrap"
:width="mini ? 110 : 256"
>
<div class="scroll">
<!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
<div class="scroll" style="overflow-x: hidden">
<div
class="flex justify-center q-pa-xl cursor-pointer"
class="flex justify-center items-center q-pa-md cursor-pointer"
@click="$router.push('/')"
id="btn-drawer-home"
style="height: 128px"
>
<q-img
src="/logo.png"
style="width: 80%; height: 70%"
fit="contain"
:src="mini ? 'logo_jws.png' : '/logo.png'"
:style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
style="height: 64px"
/>
</div>
<div id="drawer-menu" class="q-pr-sm q-pl-md">
<div id="drawer-menu" class="q-px-md">
<q-item
v-for="v in labelMenu"
dense
:key="v.label"
clickable
class="row items-center q-my-xs"
:key="v.label"
:disable="!!v.disabled"
class="no-padding q-my-xs"
:class="{
active: currentPath === v.route,
'border-active': currentPath === v.route,
@ -127,50 +134,62 @@ function branchSetting() {}
}"
@click="navigateTo(v.label, v.route)"
>
<q-item-section id="btn-drawer-back">
<q-item-label class="row items-center q-px-md">
<div class="box-border-left" />
<Icon :icon="v.icon" width="24px" class="q-mr-md" />
<div class="row justify-center items-center">
<Icon :icon="v.icon" width="24px" />
<q-tooltip v-if="mini">
{{ $t(v.label) }}
</q-item-label>
</q-item-section>
</q-tooltip>
</div>
<div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
{{ $t(v.label) }}
</div>
</q-item>
</div>
</div>
<div class="surface-2 q-px-md q-py-sm row justify-between items-center">
<div class="flex q-gutter-x-md items-center">
<q-avatar
text-color="white"
size="md"
style="background-color: var(--violet-1)"
class="relative-position"
>
<q-icon
name="mdi-home-group"
size="sm"
style="color: var(--violet-11)"
/>
<div class="dot absolute-bottom-right" />
</q-avatar>
<div
class="surface-2 q-px-md q-py-sm row items-center no-wrap justify-start"
:class="{ 'justify-center': mini }"
style="min-height: 56px; overflow-x: hidden"
>
<q-avatar
text-color="white"
size="md"
:style="`background-color: hsla(var(--violet-${$q.dark.isActive ? '10' : '11'}-hsl)/0.15)`"
class="relative-position"
>
<q-icon
name="mdi-home-group"
size="sm"
:style="`color: var(--violet-${$q.dark.isActive ? '10' : '11'})`"
/>
<div class="dot absolute-bottom-right" />
</q-avatar>
<div class="text-caption column">
<span class="text-weight-bold">
{{ 'ชื่อสาขาที่ 1' }}
</span>
<span>
{{ 'BR1001' }}
</span>
</div>
<div
v-if="!mini"
class="text-caption column q-ml-sm"
style="white-space: nowrap"
>
<span class="text-weight-bold">
{{ 'ชื่อสาขาที่ 1' }}
</span>
<span>
{{ 'BR1001' }}
</span>
</div>
<q-btn
v-if="!mini"
dense
flat
rounded
icon="mdi-cog-outline"
size="sm"
@click="branchSetting"
></q-btn>
style="margin-left: auto"
/>
</div>
</q-drawer>
</template>
@ -188,7 +207,22 @@ function branchSetting() {}
// border-left: 10px solid $secondary;
}
#drawer-menu :deep(.q-item.active)::before {
display: block;
position: absolute;
content: ' ';
background: var(--brand-2);
border-radius: 99rem;
width: 6px;
left: -0.6rem;
top: 18%;
bottom: 18%;
cursor: context-menu;
}
:deep(.q-drawer) {
transition: 0.1s width ease-in-out;
background-color: var(--surface-0);
padding: var(--size-4);
padding-right: 0;
@ -199,19 +233,6 @@ function branchSetting() {}
background: var(--surface-1);
}
#drawer-menu :deep(.q-item.active)::before {
display: block;
position: absolute;
content: ' ';
background: var(--brand-2);
border-radius: 99rem;
width: 6px;
left: -5%;
top: 18%;
bottom: 18%;
cursor: context-menu;
}
.dot {
height: 10px;
width: 10px;

13
src/layouts/MainLayout.vue
View file

@ -169,22 +169,25 @@ onMounted(async () => {
<template>
<q-layout view="lHh Lpr lFf">
<drawer-component v-model:left-drawer-open="leftDrawerOpen" />
<drawer-component :mini="!leftDrawerOpen" />
<q-page-container>
<!-- drawer control -->
<div
style="position: relative; z-index: 9999"
style="position: relative; z-index: 1000"
:hidden="$q.screen.lt.md && leftDrawerOpen"
>
<q-avatar
<div
size="36px"
style="
position: absolute;
border-radius: 50%;
top: 28px;
left: -18px;
left: -22px;
background-color: var(--surface-1);
border: 4px solid var(--surface-1);
"
class="flex items-center justify-center"
>
<q-btn
flat
@ -205,7 +208,7 @@ onMounted(async () => {
style="color: hsl(var(--negative-bg))"
/>
</q-btn>
</q-avatar>
</div>
</div>
<div