feat: adiciona background

src/components/layout/LeftMenuLayout.vue

@@ -12,15 +12,18 @@
     :behavior="'desktop'"
     class="detached-container"
   >
-    <div class="column full-height no-wrap">
+    <div class="column full-height no-wrap q-drawer-container">
       <div class="overflow-hidden" style="border-radius: 8px 8px 0px 0px">
-        <div class="flex flex-center full-width q-pa-sm" style="height: 60px">
+        <div
+          class="flex flex-center full-width q-pa-sm bg-terciary"
+          style="height: 60px"
+        >
           <q-img
             v-if="!miniState"
             :src="Logo"
-            style="width: 92px; height: 32px"
+            style="width: 138px; height: 39px"
           />
-          <q-img v-else :src="Logo" style="width: 32px" />
+          <q-img v-else :src="MiniLogo" style="width: 59px; height: 50px" />
         </div>
       </div>
 
@@ -28,7 +31,7 @@
         <div
           v-if="!$q.screen.lt.md"
           class="toggle-button-wrapper absolute"
-          style="top: 10px; right: -32px; z-index: 1"
+          style="top: 2px; right: -32px; z-index: 1"
         >
           <div @click="miniState = !miniState">
             <q-icon
@@ -66,7 +69,11 @@
                 :to="{ name: item.name }"
               >
                 <q-item-section avatar>
-                  <q-icon :name="item.icon" style="font-size: 20px" />
+                  <q-icon
+                    :name="item.icon"
+                    style="font-size: 20px"
+                    color="secondary"
+                  />
                 </q-item-section>
                 <q-item-section>{{ $t(item.title) }}</q-item-section>
                 <q-tooltip
@@ -183,15 +190,18 @@
         </q-list>
         <q-list class="q-mt-auto">
           <q-item v-ripple clickable @click="logoutFn">
-            <div class="flex">
+            <div class="flex q-mx-auto">
               <q-item-section avatar>
-                <q-icon
-                  name="logout"
-                  color="negative"
-                  style="font-size: 20px"
-                />
+                <div class="flex q-mx-auto q-gutter-x-xs">
+                  <q-icon
+                    name="logout"
+                    color="negative"
+                    style="font-size: 20px"
+                  />
+
+                  <div>SAIR</div>
+                </div>
               </q-item-section>
-              <q-item-section>{{ $t("auth.logout") }}</q-item-section>
             </div>
             <q-tooltip
               v-if="miniState"
@@ -207,7 +217,9 @@
                 :src="
                   miniState || $q.screen.lt.md
                     ? LogoSoftparMini
-                    : LogoSoftparDark
+                    : $q.dark.isActive
+                      ? LogoSoftparLight
+                      : LogoSoftparDark
                 "
                 style="width: 100%; height: 30px"
                 :style="
@@ -220,17 +232,13 @@
           </q-item>
         </q-list>
         <div
-          class="full-width text-center text-subtitle3 q-pb-xs cursor-pointer"
+          class="full-width text-center q-pb-xs cursor-pointer text-dark"
           @click="gotoVersionPage()"
         >
-          <span
-            v-if="!(miniState || $q.screen.lt.md)"
-            class="text-caption text-weight-light"
-            >{{ $t("common.terms.version") + " " + version }}</span
-          >
-          <span v-else class="text-caption text-weight-light">{{
-            version
+          <span v-if="!(miniState || $q.screen.lt.md)" class="text-caption">{{
+            $t("common.terms.version") + " " + version
           }}</span>
+          <span v-else class="text-caption">{{ version }}</span>
         </div>
       </div>
     </div>
@@ -244,7 +252,9 @@ import { navigationStore } from "src/stores/navigation";
 import { useQuasar, Cookies } from "quasar";
 import { version } from "src/../package.json";
 
-import Logo from "src/assets/logo.png";
+import Logo from "src/assets/images/logo.svg";
+import MiniLogo from "src/assets/images/mini-logo.svg";
+import LogoSoftparLight from "src/assets/softpar_logo_light.svg";
 import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
 import LogoSoftparMini from "src/assets/softpar_logo_mini.svg";
 
@@ -304,13 +314,8 @@ onMounted(() => {
 <style lang="scss" scoped>
 @import "/src/css/quasar.variables.scss";
 
-.text-subtitle3 {
-  font-size: 1.1rem !important;
-  font-weight: 400 !important;
-}
-
 .menu-selected {
-  background-color: rgba($primary, 0.1);
+  background-color: $terciary;
   color: $primary;
 }
 
@@ -321,4 +326,9 @@ onMounted(() => {
 .toggle-button-wrapper:hover {
   transform: scale(1.1);
 }
+
+.q-drawer-container {
+  background-image: url("images/background-opacity.png");
+  background-position: 15%;
+}
 </style>

src/css/quasar.variables.scss

@@ -1,5 +1,6 @@
 $primary: #003e29; 
 $secondary: #ff8340; 
+$terciary: #ace4e4;
 $accent: #e91e63;
 
 $positive: #2e7d32;

src/stores/navigation.js

@@ -21,52 +21,6 @@ export const navigationStore = defineStore("navigation", () => {
       permission: false,
       permissionScope: "dashboard",
     },
-    {
-      type: "expansive",
-      title: "ui.navigation.registration",
-      icon: "mdi-plus",
-      disable: false,
-      permission: false,
-      permissionScope: "config",
-      childrens: [
-        {
-          type: "single",
-          title: "ui.navigation.users",
-          name: "UsersPage",
-          icon: "mdi-account-multiple-outline",
-          disable: false,
-          permission: false,
-          permissionScope: "config.user",
-        },
-        {
-          type: "single",
-          title: "ui.navigation.city",
-          name: "CityPage",
-          icon: "mdi-city-variant-outline",
-          disable: false,
-          permission: false,
-          permissionScope: "config.city",
-        },
-        {
-          type: "single",
-          title: "ui.navigation.country",
-          name: "CountryPage",
-          icon: "mdi-earth",
-          disable: false,
-          permission: false,
-          permissionScope: "config.country",
-        },
-        {
-          type: "single",
-          title: "ui.navigation.state",
-          name: "StatePage",
-          icon: "mdi-map-marker",
-          disable: false,
-          permission: false,
-          permissionScope: "config.state",
-        },
-      ],
-    },
   ]);
 
   const getNavigationAccess = () => {