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

View File

@ -47,7 +47,7 @@ const logoutSupplantedUser = async () => {
</script> </script>
<template> <template>
<QLayout view="lHh Lpr lFf"> <QLayout view="hhh Lpr fFf">
<QHeader> <QHeader>
<QToolbar> <QToolbar>
<QBtn <QBtn
@ -57,7 +57,9 @@ const logoutSupplantedUser = async () => {
icon="menu" icon="menu"
aria-label="Menu" aria-label="Menu"
@click="toggleLeftDrawer" @click="toggleLeftDrawer"
class="q-mr-md"
/> />
<img class="logo q-mr-lg" src="statics/logo-dark.svg" />
<QToolbarTitle> <QToolbarTitle>
{{ customTitle || menuTitle }} {{ customTitle || menuTitle }}
<div v-if="subtitle" class="subtitle text-caption"> <div v-if="subtitle" class="subtitle text-caption">
@ -77,15 +79,14 @@ const logoutSupplantedUser = async () => {
</QBtn> </QBtn>
</QToolbar> </QToolbar>
</QHeader> </QHeader>
<QPageContainer :key="refreshContentKey">
<QDrawer <QDrawer
v-model="leftDrawerOpen" v-model="leftDrawerOpen"
:width="250" :width="250"
show-if-above show-if-above
data-testid="layoutMenuDrawer" data-testid="layoutMenuDrawer"
> >
<QToolbar class="logo">
<img src="statics/logo-dark.svg" />
</QToolbar>
<div class="user-info"> <div class="user-info">
<div> <div>
<span id="user-name" data-testid="layoutUserName"> <span id="user-name" data-testid="layoutUserName">
@ -139,7 +140,9 @@ const logoutSupplantedUser = async () => {
<QItemSection> <QItemSection>
<QItemLabel> <QItemLabel>
{{ {{
$t(`menuTitles.${subitem.description}`) $t(
`menuTitles.${subitem.description}`
)
}} }}
</QItemLabel> </QItemLabel>
</QItemSection> </QItemSection>
@ -148,7 +151,6 @@ const logoutSupplantedUser = async () => {
</QExpansionItem> </QExpansionItem>
</QList> </QList>
</QDrawer> </QDrawer>
<QPageContainer :key="refreshContentKey">
<router-view /> <router-view />
</QPageContainer> </QPageContainer>
</QLayout> </QLayout>
@ -158,14 +160,11 @@ const logoutSupplantedUser = async () => {
.q-toolbar { .q-toolbar {
min-height: 64px; min-height: 64px;
} }
.logo {
background-color: $primary;
justify-content: center;
& > img { .logo {
width: 160px; width: 160px;
} }
}
.user-info { .user-info {
margin: 25px; margin: 25px;