add design token for sidebar

src/assets/css/style.css

@@ -705,6 +705,139 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+/* NavBar */
+
+.menu-item {
+  display: block;
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: left;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.menu-item-active {
+  display: block;
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: left;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.container-menu-item {
+  position: absolute;
+  right: 0px;
+  z-index: 10;
+  margin-top: 0.5rem;
+  width: 12rem;
+  transform-origin: top right;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
+  --tw-ring-opacity: 0.05;
+}
+
+.container-menu-item:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.container-menu-profile {
+  display: block;
+  flex-shrink: 0;
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(249 250 251 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+/* Aside */
+
+.aside-single-item-active {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.aside-single-item-inactive {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  color: rgb(46 53 54 / var(--tw-text-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.group:hover .aside-single-item-inactive {
+  background-color: rgb(205 222 227 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.aside-single-item-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.aside-single-item-icon-inactive {
+  height: 1.5rem;
+  width: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(46 53 54 / var(--tw-text-opacity));
+}
+
+.group:hover .aside-single-item-icon-inactive {
+  stroke: #fff;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1128,10 +1261,6 @@ select {
   width: 10rem;
 }
 
-.w-48 {
-  width: 12rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -1524,11 +1653,6 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-gray-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 250 251 / var(--tw-border-opacity));
-}
-
 .border-transparent {
   border-color: transparent;
 }
@@ -1833,10 +1957,6 @@ select {
   padding-left: 2.75rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2039,11 +2159,6 @@ select {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2238,10 +2353,6 @@ select {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
-.ring-transparent {
-  --tw-ring-color: transparent;
-}
-
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -2446,10 +2557,6 @@ select {
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
-.focus\:border-transparent:focus {
-  border-color: transparent;
-}
-
 .focus\:border-vtd-primary-300:focus {
   --tw-border-opacity: 1;
   border-color: rgb(104 157 170 / var(--tw-border-opacity));
@@ -2554,16 +2661,6 @@ select {
   background-color: rgb(53 124 141 / var(--tw-bg-opacity));
 }
 
-.group:hover .group-hover\:bg-primary-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(205 222 227 / var(--tw-bg-opacity));
-}
-
-.group:hover .group-hover\:bg-primary-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
-}
-
 .group:hover .group-hover\:fill-gray-500 {
   fill: #6b7280;
 }
@@ -2572,10 +2669,6 @@ select {
   fill: #fff;
 }
 
-.group:hover .group-hover\:stroke-white {
-  stroke: #fff;
-}
-
 .group:hover .group-hover\:text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2936,10 +3029,6 @@ select {
     bottom: 0px;
   }
 
-  .md\:ml-0 {
-    margin-left: 0px;
-  }
-
   .md\:ml-6 {
     margin-left: 1.5rem;
   }

src/assets/css/tailwind.css

@@ -3,7 +3,36 @@
 @tailwind utilities;
 
 @layer components {
-  .btn {
+    /* NavBar */
-    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
+    .menu-item {
+        @apply w-full text-left block px-4 py-3 text-base text-gray-800;
+    }
+    .menu-item-active {
+        @apply bg-gray-100 w-full text-left block px-4 py-3 text-base text-gray-800;
+    }
+    .container-menu-item {
+        @apply absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
+    }
+    .container-menu-profile {
+        @apply flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50;
+    }
+    /* Aside */
+    .aside-single-item {
+        @apply w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl;
+    }
+    .aside-single-item-active {
+        @apply aside-single-item bg-primary-500 text-white font-bold;
+    }
+    .aside-single-item-inactive {
+        @apply aside-single-item font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500;
+    }
+    .aside-single-item-icon{
+        @apply h-6 w-6;
+    }
+    .aside-single-item-icon-active{
+        @apply aside-single-item-icon stroke-white;
+    }
+    .aside-single-item-icon-inactive{
+        @apply aside-single-item-icon text-aside group-hover:stroke-white;
     }
 }

src/components/Navigation/Aside/AsideMenuMultiple.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineProps, onMounted } from 'vue'
+import { computed } from 'vue'
 import type { MenuItemModel } from '@/utils/interfaces'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import { useMenuStore } from '@/stores/menu'

src/components/Navigation/Aside/AsideMenuSingle.vue

@@ -20,10 +20,11 @@ defineProps({
 <template>
     <div class="group">
         <RouterLink :to="item.path"
-            :class="[selected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500', 'w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl', isChildren ? 'mt-1' : 'mt-0']">
+            :class="[selected ? 'aside-single-item-active' : 'aside-single-item-inactive', isChildren ? 'mt-1' : 'mt-0']">
 
-            <svg v-if="isChildren" :class="[selected ? 'stroke-white' : 'text-aside group-hover:stroke-white', 'h-6 w-6']"
+            <svg v-if="isChildren"
-                width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                :class="[selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" width="16"
+                height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                 <g id="DotOutline">
                     <path id="Vector" opacity="0.2"
                         d="M9.5 8C9.5 8.29667 9.41203 8.58668 9.24721 8.83336C9.08238 9.08003 8.84812 9.27229 8.57403 9.38582C8.29994 9.49935 7.99834 9.52906 7.70737 9.47118C7.41639 9.4133 7.14912 9.27044 6.93934 9.06066C6.72956 8.85088 6.5867 8.58361 6.52882 8.29264C6.47094 8.00166 6.50065 7.70006 6.61418 7.42597C6.72771 7.15189 6.91997 6.91762 7.16665 6.7528C7.41332 6.58797 7.70333 6.5 8 6.5C8.39783 6.5 8.77936 6.65804 9.06066 6.93934C9.34197 7.22064 9.5 7.60218 9.5 8Z"

src/components/Navigation/Header.vue

@@ -52,30 +52,7 @@ const showDialogLogout = () => {
             <img class="w-auto h-11" :src="IconApp" alt="PLN" />
         </div>
         <div class="flex justify-end w-full px-4">
-            <!-- <div class="flex flex-1">
-                <div class="flex w-full md:ml-0">
-                    <button @click="command.showCommandPalettes"
-                        class="relative w-full text-gray-400 border-0 border-transparent rounded-xl hover:text-primary-500 ring-0 ring-transparent focus:border-transparent focus:border-0 focus:ring-0">
-                        <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
-                            <MagnifyingGlassIcon class="w-5 h-5" aria-hidden="true" />
-                            <span class="hidden ml-2 sm:text-sm md:block">Cari menu...</span>
-                        </div>
-                    </button>
-                    <img :src="Icon" alt="pln" class="md:hidden">
-                </div>
-            </div> -->
-
             <div class="flex items-center ml-4 md:ml-6">
-                <!-- <button type="button"
-                    class="p-1 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
-                    <span class="sr-only">FAQ</span>
-                    <QuestionMarkCircleIcon class="w-6 h-6" aria-hidden="true" />
-                </button>
-                <button type="button"
-                    class="p-1 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
-                    <span class="sr-only">Manual Book</span>
-                    <BookOpenIcon class="w-6 h-6" aria-hidden="true" />
-                </button -->
                 <button @click="command.showCommandPalettes" type="button"
                     class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
                     <span class="sr-only">Search</span>
@@ -101,13 +78,11 @@ const showDialogLogout = () => {
                         leave-active-class="transition duration-75 ease-in"
                         leave-from-class="transform scale-100 opacity-100" leave-to-class="transform scale-95 opacity-0">
 
-                        <MenuItems
+                        <MenuItems class="container-menu-item">
-                            class="absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                            <div class="container-menu-profile group">
-                            <div class="flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50 group">
                                 <div class="flex items-center">
                                     <div>
-                                        <!-- <img class="inline-block rounded-full h-9 w-9" :src="user.user_image" alt="" /> -->
+                                        <PictureInitial class-name="inline-block" size-class="w-9 h-9"
-                                        <PictureInitial class-name="nline-block" size-class="w-9 h-9"
                                             background-class="bg-secondary-100"
                                             font-class="text-xs font-normal font-semibold text-primary-500"
                                             :name="user.user_name" />
@@ -123,8 +98,7 @@ const showDialogLogout = () => {
                                 </div>
                             </div>
                             <MenuItem v-slot="{ active }">
-                            <button @click="showDialogLogout"
+                            <button @click="showDialogLogout" :class="[active ? 'menu-item-active' : 'menu-item']">
-                                :class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-3 text-base text-gray-800']">
                                 Log out
                             </button>
                             </MenuItem>