From bb28805d23b82d549622b2014a007499fd513435 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 12 Nov 2024 10:52:19 -0300
Subject: [PATCH] Structure header and move hamburguer menu to the left

---
 src/layouts/MainLayout.vue | 155 ++++++++++++++++++-------------------
 1 file changed, 77 insertions(+), 78 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 8a84f6a7..aefb9d10 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -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;