feat: improved navdrawer and v-menus

src/components/VLogo/VLogo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {toRefs,  computed} from 'vue';
+import {toRefs, computed} from 'vue';
 
 const props = defineProps({
   white: {
@@ -10,6 +10,10 @@ const props = defineProps({
     type: String,
     default: '/',
   },
+  imgClass: {
+    type: String,
+    default: '',
+  },
 });
 
 const {white, to} = toRefs(props);
@@ -21,13 +25,13 @@ const tag = computed(() => (to.value ? 'router-link' : 'a'));
   <component :is="tag" :to="to">
     <img
       v-if="white"
-      class="max-w-full mx-auto h-10"
+      :class="imgClass"
       alt="Logo"
       src="../../../public/logo-white.png"
     />
     <img
       v-else
-      class="max-w-full mx-auto h-10"
+      :class="imgClass"
       alt="Logo"
       src="../../../public/logo-base.png"
     />

src/components/VMenu/VMenu.vue

@@ -63,7 +63,7 @@ const menuItemBgColor = computed(() => {
 
 const textColor = computed(() =>
   dark.value
-    ? 'text-gray-400 hover:bg-gray-600'
+    ? 'text-gray-500 hover:bg-gray-800 hover:text-gray-200'
     : 'text-gray-700 hover:bg-gray-100',
 );
 
@@ -89,7 +89,7 @@ const isActive = (path: any) => {
     <Disclosure v-if="menu.children" v-slot="{open}">
       <DisclosureButton
         v-slot="{open}"
-        class="focus:outline-none w-full transition duration-300 rounded group"
+        class="focus:outline-none w-full transition duration-300 rounded group text-sm"
         :class="[textColor]"
       >
         <div
@@ -134,24 +134,30 @@ const isActive = (path: any) => {
       <DisclosurePanel
         ref="panel"
         static
-        class="mt-2 duration-300 overflow-hidden transition-all h-auto"
+        class="duration-300 overflow-hidden transition-all h-auto"
         :style="{maxHeight: open ? `${scrollHeight}px` : 0}"
       >
         <v-menu-item
           v-for="(child, j) in menu.children"
           :key="j"
           :item="child"
           :mini="mini"
-          :text-color="isActive(child) ? 'text-primary-600' : textColor"
+          :dark="dark"
+          :text-color="
+            isActive(child) ? 'text-primary-600 hover:bg-gray-100' : textColor
+          "
         />
       </DisclosurePanel>
     </Disclosure>
     <router-link
       v-else
       :to="menu.to"
       exact
-      class="group menu-item transition duration-300 w-full px-2 py-3 rounded flex gap-x-2 items-center text-sm mb-1 relative"
-      :class="[isActive(menu) ? 'text-primary-600' : textColor, mini ? 'justify-start sm:justify-center' : '']"
+      class="group menu-item transition duration-300 w-full px-2.5 py-3 rounded flex w-full gap-x-2 items-center text-sm relative"
+      :class="[
+        isActive(menu) ? 'text-primary-600 hover:bg-gray-100' : textColor,
+        mini ? '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" />

src/components/VMenu/VMenuItem.vue

@@ -14,27 +14,18 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  dark: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
 <template>
   <router-link
     :to="item.to"
     exact
-    class="
-      group
-      sub-menu
-      gap-x-2
-      w-full
-      pl-5
-      px-2
-      py-2
-      rounded
-      flex
-      items-center
-      text-sm
-      truncate
-    "
+    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' : '']"
   >
     <span class="px-1">

src/components/VMenus/VMenus.vue

@@ -34,16 +34,7 @@ const placementClass = computed(() => (props.right ? 'right-0' : 'left-0'));
   <Menu as="div" class="relative inline-block mx-4 text-left">
     <div>
       <MenuButton
-        class="
-          inline-flex
-          font-bold
-          text-gray-700
-          justify-center
-          items-center
-          w-full
-          py-1
-          focus:outline-none
-        "
+        class="inline-flex font-semibold text-gray-700 justify-center items-center w-full py-1 focus:outline-none text-sm"
         :class="btnClass"
       >
         <slot />
@@ -62,18 +53,7 @@ const placementClass = computed(() => (props.right ? 'right-0' : 'left-0'));
       leave-to-class="transform scale-95 opacity-0"
     >
       <MenuItems
-        class="
-          absolute
-          z-10
-          w-56
-          mt-2
-          bg-white
-          divide-y divide-gray-100
-          rounded-md
-          shadow-lg
-          ring-1 ring-black ring-opacity-5
-          focus:outline-none
-        "
+        class="absolute z-10 w-56 mt-2 bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         :class="placementClass"
       >
         <div :class="['arrow', {right: right}]"></div>
@@ -85,17 +65,7 @@ const placementClass = computed(() => (props.right ? 'right-0' : 'left-0'));
               text
               no-ring
               :color="active ? 'primary' : ''"
-              class="
-                !items-center
-                !justify-between
-                font-bold
-                hover:text-primary
-                !pl-3
-                !pr-1
-                !py-2
-                w-full
-                focus:outline-none
-              "
+              class="!items-center !justify-between text-sm font-semibold hover:text-primary !pl-3 !pr-1 !py-2 w-full focus:outline-none"
             >
               <span class="flex-none">
                 {{ item.text }}

src/components/VNavDrawer/VNavDrawer.vue

@@ -42,11 +42,11 @@ const props = defineProps({
   },
   classMenuParent: {
     type: String,
-    default: 'text-primary-600 bg-gray-700'
-  }
+    default: '',
+  },
 });
 
-const {modelValue, mini, menus, logoProps, dark, color, hideToggle, classMenuParent} =
+const {mini, menus, logoProps, dark, color, hideToggle, classMenuParent} =
   toRefs(props);
 
 const emit = defineEmits(['update:modelValue', 'update:mini', 'toggle:click']);
@@ -57,7 +57,7 @@ const toggleMenu = () => {
 };
 
 const bgColor = computed(() =>
-  getBgColor(color.value, dark.value ? 'bg-gray-800' : 'bg-white'),
+  getBgColor(color.value, dark.value ? 'bg-gray-900' : 'bg-white'),
 );
 </script>
 
@@ -81,21 +81,7 @@ const bgColor = computed(() =>
   </transition>
 
   <div
-    class="
-      fixed
-      top-0
-      left-0
-      z-20
-      h-screen
-      min-h-screen
-      shadow-md
-      py-2
-      pl-2
-      pr-0
-      transition-all
-      duration-300
-      flex flex-col
-    "
+    class="fixed top-0 left-0 z-20 h-screen min-h-screen shadow-md py-2 px-2 transition-all duration-300 flex flex-col"
     :class="[
       bgColor,
       mini
@@ -139,7 +125,7 @@ const bgColor = computed(() =>
       </v-btn>
     </div>
 
-    <div class="mt-5 flex-grow overflow-auto">
+    <div class="mt-5 flex-grow overflow-auto space-y-1">
       <v-menu
         v-for="(menu, i) in menus"
         :classMenuParent="classMenuParent"

src/components/VNavbar/VNavbar.vue

@@ -30,6 +30,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  dense: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const {menus, modelValue, user, loginPath} = toRefs(props);
@@ -59,7 +63,7 @@ const userFirstName = computed(() => user.value?.name?.split(' ')?.[0]);
 </script>
 
 <template>
-  <div class="py-4 shadow-md">
+  <div class="shadow-md" :class="[dense ? 'py-1' : 'py-2']">
     <!--    mobile -->
     <div class="container mx-auto sm:hidden">
       <div class="flex w-full items-center px-4 justify-between">
@@ -85,18 +89,7 @@ const userFirstName = computed(() => user.value?.name?.split(' ')?.[0]);
             <template v-for="menu in menus" :key="menu.text">
               <Disclosure v-if="menu.children">
                 <DisclosureButton
-                  class="
-                    flex
-                    items-center
-                    justify-between
-                    w-full
-                    text-left
-                    font-semibold
-                    py-2
-                    px-4
-                    text-gray-700
-                    focus:outline-none
-                  "
+                  class="flex items-center justify-between w-full text-left font-semibold py-2 px-4 text-gray-700 focus:outline-none"
                 >
                   <span>{{ menu.text }}</span>
                   <ChevronDownIcon class="w-5 h-5" />
@@ -125,21 +118,7 @@ const userFirstName = computed(() => user.value?.name?.split(' ')?.[0]);
             <div class="mt-2">
               <Disclosure v-if="user">
                 <DisclosureButton
-                  class="
-                    flex
-                    items-center
-                    justify-between
-                    w-full
-                    px-4
-                    py-2
-                    text-left
-                    font-semibold
-                    block
-                    py-2
-                    px-4
-                    text-gray-700
-                    focus:outline-none
-                  "
+                  class="flex items-center justify-between w-full px-4 py-2 text-left font-semibold block py-2 px-4 text-gray-700 focus:outline-none"
                 >
                   <span class="inline-flex items-center">
                     <UserCircleIcon class="w-[30px] inline h-[30px] mr-2" />
@@ -179,52 +158,36 @@ const userFirstName = computed(() => user.value?.name?.split(' ')?.[0]);
 
     <!--    desktop -->
     <div
-      class="
-        container
-        mx-auto
-        hidden
-        sm:flex
-        gap-x-4
-        items-center
-        px-4
-        2xl:px-0
-      "
+      class="container mx-auto hidden sm:flex gap-x-4 items-center px-4 2xl:px-0"
     >
       <slot name="logo">
         <v-logo />
       </slot>
-      <div class="sm:hidden md:block lg:flex-grow"></div>
 
-      <nav class="ml-4 flex items-center">
+      <nav class="ml-4 flex items-center flex-grow">
         <template v-for="menu in menus" :key="menu.text">
           <v-menus v-if="menu.children" :items="menu.children">
             {{ menu.text }}
           </v-menus>
           <router-link
             v-else
             :to="menu.to"
-            class="
-              transition
-              duration-300
-              font-semibold
-              mx-4
-              hover:text-primary-600
-            "
+            class="transition duration-300 font-semibold mx-4 hover:text-primary-600 text-sm"
           >
             {{ menu.text }}
           </router-link>
         </template>
       </nav>
 
-      <Menu v-if="user" as="div" class="relative inline-block text-left">
+      <Menu v-if="user" as="div" class="relative inline-block text-left mt-1">
         <v-menus right>
           <template #append>
-            <div class="px-1 py-1">
+            <div class="p-0.5">
               <MenuItem v-slot="{active}" @click.prevent="logout">
                 <button
                   :class="[
-                    active ? 'bg-lime-50 text-primary' : 'text-gray-700',
-                    'group flex rounded-md items-center w-full px-3 py-2 font-semibold',
+                    active ? 'bg-primary-50 text-primary-500' : 'text-gray-700',
+                    'group flex rounded-md items-center w-full px-3 py-2 font-semibold text-sm',
                   ]"
                 >
                   Logout
@@ -234,10 +197,10 @@ const userFirstName = computed(() => user.value?.name?.split(' ')?.[0]);
           </template>
 
           <template #icon>
-            <ChevronDownIcon class="w-5 h-5" />
+            <ChevronDownIcon class="ml-2 w-5 h-5" />
           </template>
 
-          <UserCircleIcon class="w-[30px] h-[30px] mr-2" />
+          <UserCircleIcon class="w-[30px] h-[30px] mr-2 text-sm" />
           {{ userFirstName }}
         </v-menus>
       </Menu>