From d91e3a64baf9ad2dd3f74aa48884c6e13c332694 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 26 Dec 2021 00:29:41 +0100
Subject: [PATCH] feat: add tooltip by icon only sidebar navi

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/TheSidebar.vue | 62 +++++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 86f8c830..ad0aca33 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -34,33 +34,47 @@
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
                 <template v-if="countPrinters">
-                    <v-list-item 
-                        router to="/allPrinters"
-                        class="small-list-item mt-1"
-                    >
-                        <v-list-item-icon class="my-3 mr-3 menu-item-icon">
-                            <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-tooltip right>
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-list-item
+                                router to="/allPrinters"
+                                class="small-list-item mt-1"
+                                v-bind="attrs"
+                                v-on="on"
+                            >
+                                <v-list-item-icon class="my-3 mr-3 menu-item-icon">
+                                    <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>
                 </template>
-                <div v-for="(category, index) in naviPoints" :key="index"> 
-                    <v-list-item 
-                        router :to="category.path"
-                        v-if="showInNavi(category)"
-                        class="small-list-item"
-                    >
-                        <v-list-item-icon class="my-3 mr-3 menu-item-icon">
-                            <v-icon>mdi-{{ category.icon }}</v-icon>
-                        </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>
+                <div v-for="(category, index) in naviPoints" :key="index">
+                    <v-tooltip right :open-delay="500">
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-list-item
+                                router :to="category.path"
+                                v-if="showInNavi(category)"
+                                class="small-list-item"
+                                v-bind="attrs"
+                                v-on="on"
+                            >
+                                <v-list-item-icon class="my-3 mr-3 menu-item-icon">
+                                    <v-icon>mdi-{{ category.icon }}</v-icon>
+                                </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>
             </v-list-item-group>
         </v-list>