feat: :sparkles: ajustes left menu

quasar.config.js

@@ -26,7 +26,7 @@ export default configure((ctx) => {
       // 'fontawesome-v6',
       // 'eva-icons',
       // 'themify',
-      // 'line-awesome',
+      'line-awesome',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 
       "roboto-font", // optional, you are not bound to it

src/assets/logo_simmer_principal.svg

@@ -0,0 +1,26 @@
+<svg width="486" height="131" viewBox="0 0 486 131" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_152_2266)">
+<path d="M315.527 100.777L314.607 105.59H322.136L321.774 107.493H314.245L313.28 112.554H322.03L321.665 114.501H310.778L313.774 98.8282H324.34L323.978 100.777H315.527Z" fill="#ED3237"/>
+<path d="M341.469 97.8874H343.523L340.357 114.501H338.305L341.469 97.8874Z" fill="#ED3237"/>
+<path d="M359.95 107.672H367.265C367.37 105.501 366.045 104.314 364.034 104.314C361.981 104.314 360.462 105.612 359.95 107.672ZM359.735 109.24V109.375C359.735 111.546 360.892 112.755 363.329 112.755C364.74 112.755 366.024 112.217 366.836 111.39L367.714 112.933C366.602 114.031 364.89 114.636 363.159 114.636C359.8 114.636 357.723 112.62 357.723 109.486C357.723 105.455 360.421 102.523 364.12 102.523C367.179 102.523 369.191 104.448 369.191 107.65C369.191 108.21 369.125 108.748 369.041 109.24H359.735Z" fill="#ED3237"/>
+<path d="M384.267 109.508C384.267 105.501 387.049 102.523 390.942 102.523C393.123 102.523 394.727 103.373 395.604 105.098L393.871 106.106C393.273 104.963 392.245 104.403 390.793 104.403C388.224 104.403 386.342 106.485 386.342 109.418C386.342 111.5 387.561 112.755 389.742 112.755C391.092 112.755 392.331 112.195 393.123 111.076L394.621 112.195C393.572 113.717 391.69 114.636 389.656 114.636C386.364 114.636 384.267 112.598 384.267 109.508Z" fill="#ED3237"/>
+<path d="M413.163 110.717C413.12 110.941 413.097 111.143 413.097 111.344C413.097 112.263 413.568 112.823 414.594 112.823C415.151 112.823 415.75 112.62 416.221 112.263L416.649 113.896C415.879 114.456 414.916 114.636 414.019 114.636C412.241 114.636 411.022 113.517 411.022 111.657C411.022 111.39 411.045 111.076 411.108 110.762L412.327 104.403H410.402L410.723 102.635H412.671L413.163 100.037H415.215L414.723 102.635H417.976L417.632 104.403H414.381L413.163 110.717Z" fill="#ED3237"/>
+<path d="M440.839 102.523L440.454 104.605C440.262 104.582 440.133 104.582 439.92 104.582C437.652 104.582 436.153 105.836 435.641 108.567L434.507 114.501H432.454L434.699 102.635H436.669L436.348 104.403C437.374 103.059 438.806 102.523 440.839 102.523Z" fill="#ED3237"/>
+<path d="M457.136 99.052C457.136 98.2242 457.735 97.552 458.613 97.552C459.361 97.552 459.916 98.1331 459.916 98.8063C459.916 99.723 459.297 100.35 458.419 100.35C457.671 100.35 457.136 99.7689 457.136 99.052ZM456.793 102.635H458.849L456.602 114.501H454.548L456.793 102.635Z" fill="#ED3237"/>
+<path d="M473.968 109.508C473.968 105.501 476.75 102.523 480.643 102.523C482.824 102.523 484.428 103.373 485.305 105.098L483.572 106.106C482.974 104.963 481.946 104.403 480.493 104.403C477.925 104.403 476.043 106.485 476.043 109.418C476.043 111.5 477.262 112.755 479.443 112.755C480.793 112.755 482.032 112.195 482.824 111.076L484.322 112.195C483.273 113.717 481.391 114.636 479.359 114.636C476.065 114.636 473.968 112.598 473.968 109.508Z" fill="#ED3237"/>
+<path d="M134.645 87.4022H163.354C166.154 87.4022 168.253 87.2454 169.653 86.9282C171.053 86.6131 172.354 85.9802 173.559 85.0285C174.763 84.0805 175.625 83.0778 176.147 82.0224C176.668 80.9665 176.928 79.6486 176.928 78.0663V72.5253C176.928 66.0386 172.413 62.7934 163.385 62.7934H152.669C146.888 62.7934 142.439 61.798 139.322 59.8056C136.203 57.8127 134.645 54.9015 134.645 51.0728V46.3539C134.645 42.1577 136.24 38.9322 139.431 36.6774C141.187 35.4193 142.929 34.5545 144.655 34.0818C146.379 33.6101 148.836 33.373 152.027 33.373H180.737V36.2122H151.832C142.717 36.2122 138.161 39.5259 138.161 46.1511V50.4894C138.161 53.7507 139.56 56.1958 142.359 57.825C143.922 58.7198 145.223 59.2719 146.265 59.4819C147.306 59.6927 149.454 59.7963 152.711 59.7963H163.452C168.984 59.7963 173.201 60.8645 176.098 62.9999C178.994 65.1343 180.444 68.2046 180.444 72.2119V77.9059C180.444 81.9656 178.845 85.1035 175.648 87.3169C173.82 88.5289 172.125 89.3201 170.56 89.6884C168.994 90.0588 166.581 90.2427 163.318 90.2427H134.645V87.4022Z" fill="#848688"/>
+<path d="M191.966 90.2427V33.373H195.482V90.2427H191.966Z" fill="#848688"/>
+<path d="M209.641 90.2427V36.2122C209.641 34.8461 209.772 33.9252 210.032 33.4518C210.292 32.9793 210.845 32.7423 211.692 32.7423C212.342 32.7423 212.864 32.8997 213.254 33.2149C213.645 33.5306 214.198 34.3197 214.914 35.5813L245.092 86.5963L274.677 35.4238C275.652 33.6371 276.791 32.7423 278.095 32.7423C279.135 32.9524 279.721 33.5305 279.852 34.4778V36.6862V90.2427H276.336V39.2632L248.636 87.1784C247.841 88.5324 247.183 89.4463 246.654 89.9145C246.127 90.3812 245.566 90.6181 244.976 90.6181C244.314 90.6181 243.821 90.4869 243.492 90.2302C243.163 89.9713 242.6 89.167 241.809 87.82L213.157 39.1969V90.2427H209.641Z" fill="#848688"/>
+<path d="M293.23 90.2427V36.2122C293.23 34.8461 293.361 33.9252 293.621 33.4518C293.88 32.9793 294.434 32.7423 295.28 32.7423C295.931 32.7423 296.452 32.8997 296.843 33.2149C297.234 33.5306 297.787 34.3197 298.505 35.5813L328.679 86.5963L358.265 35.4238C359.243 33.6371 360.381 32.7423 361.684 32.7423C362.725 32.9524 363.312 33.5305 363.443 34.4778V36.6862V90.2427H359.927V39.2632L332.222 87.1784C331.43 88.5324 330.77 89.4463 330.243 89.9145C329.716 90.3812 329.155 90.6181 328.564 90.6181C327.905 90.6181 327.411 90.4869 327.08 90.2302C326.751 89.9713 326.189 89.167 325.398 87.82L296.746 39.1969V90.2427H293.23Z" fill="#848688"/>
+<path d="M422.815 90.2427H393.322C388.57 90.2427 384.744 89.0998 381.849 86.8115C378.951 84.5238 377.503 81.5135 377.503 77.7797V46.3087C377.503 42.4181 379 39.2888 381.996 36.9223C384.989 34.5559 388.993 33.373 394.006 33.373H423.009V36.2122H393.879C390.241 36.2122 387.189 37.047 384.721 38.7134C382.25 40.3813 381.019 42.9089 381.019 46.2954V60.7428H423.009L422.815 63.5833H381.019V77.3858C381.019 80.4887 382.157 82.934 384.436 84.7206C386.714 86.5089 389.839 87.4022 393.811 87.4022H422.815V90.2427Z" fill="#848688"/>
+<path d="M435.705 90.2427V33.373H468.809C474.406 33.373 478.671 34.4509 481.602 36.6074C484.531 38.7636 485.994 41.9454 485.994 46.1511V53.8017C485.994 57.6413 484.628 60.6384 481.893 62.7934C479.159 64.9506 475.351 66.0278 470.469 66.0278H445.665L485.602 90.2448L479.563 90.2302L441.978 67.3426L440.497 66.3836C440.101 66.0642 439.903 65.5849 439.903 64.9448C439.903 64.252 440.114 63.7875 440.538 63.5482C440.963 63.3075 441.791 63.1873 443.028 63.1873H470.273C474.114 63.1873 477.108 62.3981 479.258 60.8158C481.406 59.2339 482.479 56.9914 482.479 54.0912V45.9433C482.479 39.4564 477.955 36.2122 468.907 36.2122H439.221V90.2427H435.705Z" fill="#848688"/>
+<path d="M70.6761 53.8797C80.6665 53.8797 89.8927 53.8797 100.664 53.8797C80.0475 80.3291 60.2987 105.664 40.5497 131C40.2299 130.874 39.9103 130.748 39.5905 130.623C43.2688 115.332 46.9473 100.042 50.8062 84.0024C41.537 84.0024 32.7862 84.0024 22.0875 84.0024C43.3134 55.0947 63.5426 27.5442 83.7727 -0.00634766C84.0463 0.112381 84.3209 0.232056 84.5955 0.350983C80.0183 17.953 75.4409 35.5543 70.6761 53.8797Z" fill="#ED3237"/>
+<path d="M11.6443 65.997C11.6443 68.9134 11.8874 71.7604 12.3569 74.5374C14.5984 88.2328 22.2108 100.123 32.9688 108.004C33.8376 111.945 34.3247 116.024 34.3764 120.207C14.2684 110.695 0.295707 90.368 0 66.7437V65.997C0 49.4722 6.70852 34.4918 17.5358 23.6425C28.3981 12.7766 43.4135 6.05883 60.011 6.05883C62.2181 6.05883 64.4079 6.18054 66.5458 6.42342C63.5391 9.42651 60.2198 12.0992 56.6393 14.4255C48.3667 15.5363 40.7024 18.6092 34.1501 23.157C20.56 32.5301 11.6443 48.2223 11.6443 65.997Z" fill="#ED3237"/>
+<path d="M111.107 64.9965C111.107 62.0802 110.864 59.2332 110.394 56.4562C108.152 42.7601 100.54 30.8695 89.7825 22.9891C88.9137 19.049 88.4273 14.9695 88.3748 10.7865C108.483 20.2989 122.456 40.6247 122.751 64.2497V64.9965C122.751 81.5215 116.043 96.5018 105.215 107.35C94.3531 118.217 79.337 124.935 62.7402 124.935C60.5331 124.935 58.3434 124.813 56.2054 124.57C59.2122 121.567 62.5314 118.894 66.112 116.568C74.3845 115.457 82.0488 112.384 88.6004 107.837C102.191 98.4628 111.107 82.7714 111.107 64.9965Z" fill="#ED3237"/>
+</g>
+<defs>
+<clipPath id="clip0_152_2266">
+<rect width="486" height="131" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/geral/DefaultHeaderPage.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="q-ml-md">
+    <q-breadcrumbs class="q-mb-md text-primary">
+      <q-breadcrumbs-el
+        v-for="breadcrumb in $route.meta?.breadcrumbs"
+        :key="breadcrumb?.name"
+        :label="breadcrumb?.title"
+        :to="{ name: breadcrumb?.name }"
+      />
+    </q-breadcrumbs>
+
+    <span class="text-h5">{{ $route.meta?.title }}</span>
+    <q-separator class="q-my-sm" />
+  </div>
+</template>
+
+<script setup></script>

src/components/geral/LeftMenuLayout.vue

@@ -4,12 +4,16 @@
     v-model="leftDrawerOpen"
     show-if-above
     :width="250"
-    :mini-width="70"
+    :mini-width="100"
     :breakpoint="500"
     :mini="miniState"
     class="detached-container"
+    :class="{
+      full: !miniState,
+      mini: miniState,
+    }"
   >
-    <div class="q-pa-sm">
+    <div class="q-ma-md">
       <div
         class="toggle-button-wrapper absolute"
         style="top: 50%; right: -32px; z-index: 1"
@@ -26,30 +30,49 @@
           >
         </q-btn>
       </div>
+      <div
+        class="flex overflow-hidden bg-primary"
+        style="width: 100% !important; height: 45px; border-radius: 6px"
+      >
+        <div v-show="miniState" class="q-mx-auto q-my-auto">
+          <q-img
+            src="../../assets/logo_simmer_closed.svg"
+            style="height: 30px; width: 30px"
+          />
+        </div>
 
-      <div v-if="miniState" class="flex bg-primary">
-        <q-img src="../../assets/logo_simmer_closed.svg" style="width: 30px" />
-      </div>
-
-      <div v-else class="flex bg-primary">
-        <q-img src="../../assets/logo_simmer.svg" style="width: 140px" />
+        <div v-show="!miniState" class="q-mx-auto q-my-auto">
+          <q-img
+            src="../../assets/logo_simmer.svg"
+            style="height: 30px; width: 130px"
+          />
+        </div>
       </div>
 
-      <q-list class="column no-wrap">
+      <q-list
+        class="column no-wrap bg-background q-my-sm"
+        style="
+          padding: 5px 10px 5px 10px;
+          gap: 2px;
+          border-radius: 6px;
+          border: 0.2px solid rgba(0, 0, 0, 0.1);
+        "
+      >
         <template v-for="menu in menus" :key="menu.name">
           <!-- Single Menu -->
           <q-item
             v-if="menu.type === 'single'"
             v-ripple
             clickable
-            exact-active-class="menu-selected"
+            exact-active-class="text-primary"
             exact
-            active-class="menu-selected"
+            active-class="text-primary"
             :to="{ name: menu.name }"
             class="q-my-xs"
+            style="border-radius: 6px"
           >
-            <q-item-section avatar>
-              <q-icon :name="menu.icon" style="font-size: 18px" />
+            <q-item-section avatar class="q-ma-none q-pr-xs" dense>
+              <q-icon :name="menu.icon" style="font-size: 22px" />
             </q-item-section>
             <q-item-section>{{ menu.title }}</q-item-section>
             <q-tooltip
@@ -74,14 +97,16 @@
                 v-model="isExpasionItemExpanded"
                 header-class=" menu-item--spaced"
                 :class="{
-                  'menu-selected':
+                  'text-primary ':
                     childrenAreActive(menu.children) && !isExpasionItemExpanded,
+                  'bg-white': isExpasionItemExpanded,
                 }"
                 class="menu-item--spaced"
+                style="border-radius: 6px !important"
               >
                 <template #header>
                   <q-item-section avatar>
-                    <q-icon :name="menu.icon" style="font-size: 18px" />
+                    <q-icon :name="menu.icon" style="font-size: 22px" />
                   </q-item-section>
                   <q-item-section>{{ menu.title }}</q-item-section>
                 </template>
@@ -91,13 +116,13 @@
                     clickable
                     :to="{ name: child.name }"
                     exact
-                    exact-active-class="menu-selected"
+                    exact-active-class="text-primary"
                     class="menu-item--spaced"
+                    style="border-radius: 6px"
                   >
-                    <q-item-section avatar>
-                      <q-icon :name="child.icon" style="font-size: 18px" />
-                    </q-item-section>
-                    <q-item-section>{{ child.title }}</q-item-section>
+                    <q-item-section class="q-pl-lg">{{
+                      child.title
+                    }}</q-item-section>
                     <q-tooltip
                       v-if="miniState"
                       anchor="center right"
@@ -114,8 +139,7 @@
                 v-ripple
                 clickable
                 exact
-                exact-active-class="menu-selected"
-                class="menu-item--spaced"
+                style="border-radius: 6px"
                 @click="openMenu(menu)"
               >
                 <q-item-section avatar>
@@ -129,7 +153,11 @@
                   :offset="[10, 10]"
                   >{{ menu.title }}</q-tooltip
                 >
-                <q-menu anchor="top right" self="top left">
+                <q-menu
+                  anchor="top right"
+                  self="top left"
+                  style="border-radius: 6px"
+                >
                   <q-list style="min-width: 100px">
                     <q-item
                       v-for="child in menu.childrens"
@@ -138,13 +166,11 @@
                       v-close-popup
                       clickable
                       :to="{ name: child.name }"
+                      exact-active-class="text-primary"
                       exact
-                      exact-active-class="menu-selected"
+                      active-class="text-primary"
                       class="menu-item--spaced"
                     >
-                      <q-item-section avatar>
-                        <q-icon :name="child.icon" style="font-size: 18px" />
-                      </q-item-section>
                       <q-item-section>{{ child.title }}</q-item-section>
                     </q-item>
                   </q-list>
@@ -155,23 +181,14 @@
         </template>
       </q-list>
 
-      <q-list class="column q-mt-md no-wrap overflow-hidden">
-        <q-item v-ripple clickable @click="logoutFn">
-          <div class="flex">
-            <q-item-section avatar>
-              <q-icon name="logout" color="negative" style="font-size: 18px" />
-            </q-item-section>
-            <q-item-section>Sair</q-item-section>
-          </div>
-          <q-tooltip
-            v-if="miniState"
-            anchor="center right"
-            self="center left"
-            :offset="[10, 10]"
-            >Sair</q-tooltip
-          >
+      <div class="absolute-bottom flex justify-center items-center">
+        <q-item clickable class="" @click="logoutFn">
+          <q-item-section avatar>
+            <q-icon color="negative-2" name="las la-sign-out-alt" />
+          </q-item-section>
+          <q-item-section class="text-negative-2"> Sair </q-item-section>
         </q-item>
-      </q-list>
+      </div>
     </div>
   </q-drawer>
 </template>

src/css/app.scss

@@ -210,3 +210,18 @@ body,
   box-shadow: 0px;
   text-transform: capitalize;
 }
+
+.q-drawer:has(.detached-container) {
+  margin: 16px !important;
+  margin-bottom: 16px !important;
+  margin-left: 10px !important;
+  border-radius: 6px !important;
+}
+
+.full{
+  .q-item__section--avatar {
+    min-width: 32px !important;
+  }
+}
+
+

src/layouts/MainLayout.vue

@@ -1,11 +1,11 @@
 <template>
-  <q-layout class="relative" view="hHh lpR fFf">
+  <q-layout class="relative bg-background-2" view="hHh lpR fFf">
     <LeftMenuLayout
       v-model="leftDrawerOpen"
     />
 
     <q-page-container>
-      <q-page>
+      <q-page class="bg-background-2">
         <q-scroll-area style="height: 100vh !important">
           <router-view />
         </q-scroll-area>

src/pages/users/UsersPage.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="q-pa-md">
+    <DefaultHeaderPage />
     <DefaultTable
       :key="tableKey"
       :columns="columns"
@@ -23,6 +24,8 @@ import { useQuasar } from "quasar";
 import { permissionStore } from "src/stores/permission";
 import { getUsers, createUser, updateUser } from "src/api/user";
 
+import DefaultHeaderPage from "src/components/geral/DefaultHeaderPage.vue";
+
 const AddEditUserDialog = defineAsyncComponent(
   () => import("src/pages/users/components/AddEditUserDialog.vue"),
 );

src/router/routes/users.route.js

@@ -4,8 +4,19 @@ const routes = [
     name: "UsersPage",
     component: () => import("pages/users/UsersPage.vue"),
     meta: {
+      title: "Usuários",
       requireAuth: true,
       requiredPermission: "config.user",
+      breadcrumbs: [
+        {
+          name: "HomePage",
+          title: "Início",
+        },
+        {
+          name: "UsersPage",
+          title: "Usuários",
+        },
+      ],
     },
   },
 ];