CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add tooltip by icon only sidebar navi

Browse Source 
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-12-26 00:29:41 +01:00
parent 81a7289194
commit d91e3a64ba
No known key found for this signature in database
GPG Key ID: 5D3A5823133D2246
1 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/TheSidebar.vue
View File

@ -34,33 +34,47 @@
<v-list class="pr-0 pt-0 ml-0"> <v-list class="pr-0 pt-0 ml-0">
<v-list-item-group active-class="active-nav-item"> <v-list-item-group active-class="active-nav-item">
<template v-if="countPrinters"> <template v-if="countPrinters">
<v-list-item <v-tooltip right>
router to="/allPrinters" <template v-slot:activator="{ on, attrs }">
class="small-list-item mt-1" <v-list-item
> router to="/allPrinters"
<v-list-item-icon class="my-3 mr-3 menu-item-icon"> class="small-list-item mt-1"
<v-icon>mdi-view-dashboard-outline</v-icon> v-bind="attrs"
</v-list-item-icon> v-on="on"
<v-list-item-content> >
<v-list-item-title tile class="menu-item-title">{{ $t("App.Printers")}}</v-list-item-title> <v-list-item-icon class="my-3 mr-3 menu-item-icon">
</v-list-item-content> <v-icon>mdi-view-dashboard-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title tile class="menu-item-title">{{ $t("App.Printers") }}</v-list-item-title>
</v-list-item-content>
</v-list-item> </v-list-item>
</template>
<span v-if="navigationStyle === 'iconsOnly'">{{ $t("App.Printers") }}</span>
</v-tooltip>
<v-divider class="my-1"></v-divider> <v-divider class="my-1"></v-divider>
</template> </template>
<div v-for="(category, index) in naviPoints" :key="index"> <div v-for="(category, index) in naviPoints" :key="index">
<v-list-item <v-tooltip right :open-delay="500">
router :to="category.path" <template v-slot:activator="{ on, attrs }">
v-if="showInNavi(category)" <v-list-item
class="small-list-item" router :to="category.path"
> v-if="showInNavi(category)"
<v-list-item-icon class="my-3 mr-3 menu-item-icon"> class="small-list-item"
<v-icon>mdi-{{ category.icon }}</v-icon> v-bind="attrs"
</v-list-item-icon> v-on="on"
<v-list-item-content> >
<v-list-item-title tile class="menu-item-title">{{ $t(`Router.${category.title}`) }}</v-list-item-title> <v-list-item-icon class="my-3 mr-3 menu-item-icon">
</v-list-item-content> <v-icon>mdi-{{ category.icon }}</v-icon>
</v-list-item> </v-list-item-icon>
<v-list-item-content>
<v-list-item-title tile class="menu-item-title">{{ $t(`Router.${category.title}`) }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<span v-if="navigationStyle === 'iconsOnly'">{{ $t(`Router.${category.title}`) }}</span>
</v-tooltip>
</div> </div>
</v-list-item-group> </v-list-item-group>
</v-list> </v-list>