feat: add expand hover when sidebar mini

gitsindonesia · Jan 4, 2022 · b6371ef · b6371ef
1 parent 10a191f
commit b6371ef
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 14 deletions.
diff --git a/src/components/VMenu/VMenu.vue b/src/components/VMenu/VMenu.vue
@@ -22,6 +22,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  expandHover: {
+    type: Boolean,
+    default: false,
+  },
   dark: {
     type: Boolean,
     default: false,
@@ -50,7 +54,7 @@ const props = defineProps({
 
 const router = useRouter();
 
-const {menu, mini, dark, classMenuParent} = toRefs(props);
+const {menu, mini, dark, classMenuParent, expandHover} = toRefs(props);
 
 const panel = ref<HTMLDivElement | null>(null);
 
@@ -104,7 +108,7 @@ const isActive = (path: any) => {
           class="py-3 w-full flex items-center px-2 gap-x-2 rounded"
           :class="[
             openClass(open),
-            mini ? 'justify-center' : '',
+            mini && !expandHover ? 'justify-center' : '',
             open ? menuItemBgColor : '',
           ]"
         >
@@ -125,7 +129,7 @@ const isActive = (path: any) => {
           <span
             :title="menu.text"
             class="text-sm flex-grow text-left truncate"
-            :class="{'sm:hidden': mini}"
+            :class="{'sm:hidden': mini && !expandHover}"
           >
             {{ menu.text }}
           </span>
@@ -134,11 +138,11 @@ const isActive = (path: any) => {
             class="w-5 h-5"
             :class="[
               open ? 'transform rotate-90' : '',
-              mini ? 'inline sm:hidden' : '',
+              mini && !expandHover ? 'inline sm:hidden' : '',
             ]"
           />
 
-          <v-menu-tooltip :show="mini">
+          <v-menu-tooltip :show="mini && !expandHover">
             {{ menu.text }}
           </v-menu-tooltip>
         </div>
@@ -154,6 +158,7 @@ const isActive = (path: any) => {
           :key="j"
           :item="child"
           :mini="mini"
+          :expandHover="expandHover"
           :dark="dark"
           :text-color="
             isActive(child)
@@ -187,14 +192,16 @@ const isActive = (path: any) => {
         isActive(menu)
           ? `${menuItemColor} text-white fill-white hover:bg-gray-300`
           : textColor,
-        mini ? 'justify-start sm:justify-center' : '',
+        mini && !expandHover ? 'justify-start sm:justify-center' : '',
       ]"
     >
       <img v-if="menu.img" :src="menu.img" alt="img icon" class="w-5 h-5" />
       <component :is="menu.icon" v-else-if="menu.icon" class="w-5 h-5" />
-      <span :class="{'sm:hidden': mini}"> {{ menu.text }}</span>
+      <span :class="{'sm:hidden': mini && !expandHover}">
+       {{ menu.text }}
+      </span>
 
-      <v-menu-tooltip :show="mini">
+      <v-menu-tooltip :show="mini && !expandHover">
         {{ menu.text }}
       </v-menu-tooltip>
     </router-link>

diff --git a/src/components/VMenu/VMenuItem.vue b/src/components/VMenu/VMenuItem.vue
@@ -18,6 +18,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  expandHover: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
@@ -26,7 +30,7 @@ const props = defineProps({
     :to="item.to"
     exact
     class="group sub-menu gap-x-2 w-full pl-5 px-2 py-3 rounded flex items-center text-sm truncate"
-    :class="[textColor, mini ? 'justify-start sm:justify-center' : '']"
+    :class="[textColor, mini && !expandHover ? 'justify-start sm:justify-center' : '']"
   >
     <span class="px-1">
       <svg
@@ -40,8 +44,8 @@ const props = defineProps({
       </svg>
     </span>
 
-    <span :class="{'sm:hidden': mini}"> {{ item.text }}</span>
-    <v-menu-tooltip :show="mini">
+    <span :class="{'sm:hidden': mini && !expandHover}"> {{ item.text }}</span>
+    <v-menu-tooltip :show="mini && !expandHover">
       {{ item.text }}
     </v-menu-tooltip>
   </router-link>

diff --git a/src/components/VNavDrawer/VNavDrawer.vue b/src/components/VNavDrawer/VNavDrawer.vue
@@ -52,18 +52,37 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  expandHover: {
+    type: Boolean,
+    default: false,
+  },
+  isExpandHover: {
+    type: Boolean,
+    default: false,
+  }
 });
 
-const {mini, menus, logoProps, dark, color, hideToggle, classMenuParent} =
+const {mini, menus, logoProps, dark, color, hideToggle, classMenuParent, expandHover, isExpandHover} =
   toRefs(props);
 
-const emit = defineEmits(['update:modelValue', 'update:mini', 'toggle:click']);
+const emit = defineEmits(['update:modelValue', 'update:mini', 'toggle:click', 'update:expandHover']);
 
 const toggleMenu = () => {
   emit('toggle:click');
   emit('update:mini', !mini.value);
 };
 
+const mouseOver = () => {
+  if (isExpandHover.value) {
+    emit('update:expandHover', true);
+  }
+};
+const mouseOverLeave = () => {
+  if (isExpandHover.value) {
+    emit('update:expandHover', false);
+  }
+};
+
 const bgColor = computed(() =>
   getBgColor(color.value, dark.value ? 'bg-gray-900' : 'bg-white'),
 );
@@ -89,6 +108,8 @@ const bgColor = computed(() =>
   </transition>
 
   <div
+    @mouseover="mouseOver"
+    @mouseleave="mouseOverLeave"
     class="
       fixed
       top-0
@@ -108,6 +129,7 @@ const bgColor = computed(() =>
       mini
         ? 'w-10/12 sm:w-[85px]'
         : 'transform -translate-x-full sm:transform-none sm:w-[260px]',
+      expandHover ? 'hover:sm:w-[260px]' : '',
     ]"
   >
     <div class="hidden sm:block">
@@ -130,7 +152,7 @@ const bgColor = computed(() =>
           </v-btn>
         </slot>
       </template>
-      <template v-if="mini">
+      <template v-if="mini && !expandHover">
         <slot name="logo.mini" />
       </template>
       <slot v-else name="logo">
@@ -154,6 +176,7 @@ const bgColor = computed(() =>
           :key="i"
           :menu="menu"
           :mini="mini"
+          :expandHover="expandHover"
           :dark="dark"
           :bg-color="expandColor"
           :color="color"