|
|
@@ -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>
|
Heron Slovinski
