verdnatura/hedera-web
verdnatura
/
hedera-web
0
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Structure header and move hamburguer menu to the left

This commit is contained in:
William Buezas 2024-11-12 10:52:19 -03:00
parent 484e41e86b
commit bb28805d23
1 changed files with 77 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/layouts/MainLayout.vue
View File

@ -47,7 +47,7 @@ const logoutSupplantedUser = async () => {
</script>
<template>
<QLayout view="lHh Lpr lFf">
<QLayout view="hhh Lpr fFf">
<QHeader>
<QToolbar>
<QBtn
@ -57,7 +57,9 @@ const logoutSupplantedUser = async () => {
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
class="q-mr-md"
/>
<img class="logo q-mr-lg" src="statics/logo-dark.svg" />
<QToolbarTitle>
{{ customTitle || menuTitle }}
<div v-if="subtitle" class="subtitle text-caption">
@ -77,78 +79,78 @@ const logoutSupplantedUser = async () => {
</QBtn>
</QToolbar>
</QHeader>
<QDrawer
v-model="leftDrawerOpen"
:width="250"
show-if-above
data-testid="layoutMenuDrawer"
>
<QToolbar class="logo">
<img src="statics/logo-dark.svg" />
</QToolbar>
<div class="user-info">
<div>
<span id="user-name" data-testid="layoutUserName">
{{ mainUser?.nickname }}
</span>
<QBtn
flat
icon="logout"
alt="_Exit"
@click="logout()"
data-testid="logoutButton"
/>
</div>
<div
v-if="supplantedUser"
id="supplant"
class="supplant"
data-testid="layoutSupplantedUserName"
>
<span id="supplanted">
{{ supplantedUser?.nickname }}
</span>
<QBtn
flat
icon="logout"
alt="_Exit"
@click="logoutSupplantedUser()"
/>
</div>
</div>
<QList v-for="item in filteredMenuItems" :key="item.id">
<QItem v-if="!item.childs" :to="`/${item.path}`">
<QItemSection>
<QItemLabel>{{
$t(`menuTitles.${item.description}`)
}}</QItemLabel>
</QItemSection>
</QItem>
<QExpansionItem
v-if="item.childs"
:label="$t(`menuTitles.${item.description}`)"
expand-separator
>
<QList>
<QItem
v-for="subitem in item.childs"
:key="subitem.id"
:to="`/${subitem.path}`"
class="q-pl-lg"
>
<QItemSection>
<QItemLabel>
{{
$t(`menuTitles.${subitem.description}`)
}}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QExpansionItem>
</QList>
</QDrawer>
<QPageContainer :key="refreshContentKey">
<QDrawer
v-model="leftDrawerOpen"
:width="250"
show-if-above
data-testid="layoutMenuDrawer"
>
<div class="user-info">
<div>
<span id="user-name" data-testid="layoutUserName">
{{ mainUser?.nickname }}
</span>
<QBtn
flat
icon="logout"
alt="_Exit"
@click="logout()"
data-testid="logoutButton"
/>
</div>
<div
v-if="supplantedUser"
id="supplant"
class="supplant"
data-testid="layoutSupplantedUserName"
>
<span id="supplanted">
{{ supplantedUser?.nickname }}
</span>
<QBtn
flat
icon="logout"
alt="_Exit"
@click="logoutSupplantedUser()"
/>
</div>
</div>
<QList v-for="item in filteredMenuItems" :key="item.id">
<QItem v-if="!item.childs" :to="`/${item.path}`">
<QItemSection>
<QItemLabel>{{
$t(`menuTitles.${item.description}`)
}}</QItemLabel>
</QItemSection>
</QItem>
<QExpansionItem
v-if="item.childs"
:label="$t(`menuTitles.${item.description}`)"
expand-separator
>
<QList>
<QItem
v-for="subitem in item.childs"
:key="subitem.id"
:to="`/${subitem.path}`"
class="q-pl-lg"
>
<QItemSection>
<QItemLabel>
{{
$t(
`menuTitles.${subitem.description}`
)
}}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QExpansionItem>
</QList>
</QDrawer>
<router-view />
</QPageContainer>
</QLayout>
@ -158,14 +160,11 @@ const logoutSupplantedUser = async () => {
.q-toolbar {
min-height: 64px;
}
.logo {
background-color: $primary;
justify-content: center;
& > img {
width: 160px;
}
.logo {
width: 160px;
}
.user-info {
margin: 25px;