Menu Style (active, ...)

expand-icon-class="my-menu-separat"
header-class="my-menu"
active-class="my-menu-active"

.env.development

@@ -14,6 +14,6 @@ TEST_EMAIL="paolo.arena77@gmail.com"
 TEST_USERNAME="paoloar77"
 TEST_PASSWORD="mypassword@1A"
 PUBLICKEY_PUSH="BGxRrFWnPoa_ImUaWXmeEOFVI9VNKVKaAPsvsM1XY6wn24yxp9MyOQ4crNYCJKxSXV65Y1GblW5_VLoamedcZ1I"
-IN_CONSTRUCTION="1"
+IN_CONSTRUCTION="0"
 DEBUG="1"
 TELEGRAM_SUPPORT="https://t.me/freeplanet_supporto"

src/layouts/menuone/menuOne.scss

@@ -50,3 +50,27 @@
   -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }
+
+.my-menu, .my-menu > i{
+  min-width: 26px;
+  font-size: 1rem;
+}
+
+.my-menu-icon{
+  min-width: 26px;
+  font-size: 1rem;
+}
+
+.my-menu-icon > i{
+  min-width: 26px;
+  font-size: 1.5rem;
+}
+
+.my-menu-active {
+  background-color: rgba(174, 189, 241, 0.71);
+}
+
+.my-menu-separat > i{
+  min-width: 26px;
+  font-size: 1rem;
+}

src/layouts/menuone/menuOne.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="list no-border platform-delimiter light-paragraph">
+    <div class="no-border">
         <q-list class="rounded-borders text-primary">
             <template v-for="(parent, index) in getmenu">
                 <div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
@@ -10,15 +10,17 @@
                                 :content-inset-level="0.5"
                                 :label="$t(item.name)"
                                 :icon="item.materialIcon"
-                                class="titleSubMenu"
+                                expand-icon-class="my-menu-separat"
+                                header-class="my-menu"
+                                active-class="my-menu-active"
                         >
 
                             <q-expansion-item v-for="(child2, index) in item.routes2" :to="child2.route" :key="index"
                                               :header-inset-level="0.5"
                                               :duration="300"
                                               expand-icon="map"
-                                              :active="child2.label === 'Outbox'"
+                                              active-class="my-menu-active"
-                                              class="item item-link drawer-closer cursor-pointer"
+                                              class="item item-link drawer-closer cursor-pointer my-menu"
                                               :label="$t(child2.name)">
                             </q-expansion-item>
 
@@ -29,14 +31,16 @@
                             <div v-show="true">
                                 <q-item
                                         clickable
+                                        v-ripple
                                         exact
                                         :to="item.route"
-                                        active-class="my-menu-link">
+                                        active-class="my-menu-active"
-                                    <q-item-section avatar>
+                                >
+                                    <q-item-section avatar class="my-menu-icon">
                                         <q-icon :name="item.materialIcon"/>
                                     </q-item-section>
 
-                                    <q-item-section>
+                                    <q-item-section class="my-menu">
                                         {{$t(item.name)}}
                                     </q-item-section>
                                 </q-item>
@@ -44,6 +48,9 @@
                             </div>
                         </q-slide-transition>
                     </div>
+
+                    <!--<q-separator spaced />-->
+
                 </div>
             </template>
         </q-list>