Update style.css and Header.vue files

src/assets/css/style.css

@@ -2565,6 +2565,11 @@ body {
   border-color: rgb(255 255 51 / var(--tw-border-opacity));
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));

src/components/Navigation/Header.vue

@@ -35,11 +35,7 @@ const showDialogLogout = () => {
 
 <template>
   <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 lg:ml-80">
-    <button
+    <button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 lg:hidden" @click="openSideBar">
-      type="button"
-      class="px-4 text-gray-500 focus:outline-none focus:ring-0 lg:hidden"
-      @click="openSideBar"
-    >
       <span class="sr-only">Open sidebar</span>
       <IconBars3 class="w-6 h-6 fill-gray-600" />
     </button>
@@ -48,55 +44,36 @@ const showDialogLogout = () => {
     </RouterLink>
     <div class="flex justify-end w-full px-4">
       <div class="flex items-center ml-4 md:ml-6">
-        <button
+        <button @click="command.showCommandPalettes" type="button"
-          @click="command.showCommandPalettes"
+          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">
-          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>
           <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
-          <span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md"
+          <span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span>
-            >Cari menu</span
-          >
         </button>
 
         <!-- Profile dropdown -->
         <Menu as="div" class="relative ml-1">
           <div>
             <MenuButton
-              class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1"
+              class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1">
-            >
               <span class="sr-only">Open user menu</span>
-              <PictureInitial
+              <PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
-                size-class="w-8 h-8"
+                font-class="text-xs font-bold text-primary-500" :name="user.user_name" />
-                background-class="bg-secondary-100"
-                font-class="text-xs font-bold text-primary-500"
-                :name="user.user_name"
-              />
               <span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
                 {{ user.user_name }}
               </span>
             </MenuButton>
           </div>
-          <transition
+          <transition enter-active-class="transition duration-100 ease-out"
-            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
-            enter-from-class="transform scale-95 opacity-0"
+            leave-active-class="transition duration-75 ease-in" leave-from-class="transform scale-100 opacity-100"
-            enter-to-class="transform scale-100 opacity-100"
+            leave-to-class="transform scale-95 opacity-0">
-            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 class="container-menu-item">
               <div class="container-menu-profile group">
                 <div class="flex items-center">
                   <div>
-                    <PictureInitial
+                    <PictureInitial class-name="inline-block" size-class="w-9 h-9" background-class="bg-secondary-100"
-                      class-name="inline-block"
+                      font-class="text-xs font-normal font-semibold text-primary-500" :name="user.user_name" />
-                      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"
-                    />
                   </div>
                   <div class="ml-3 space-y-1">
                     <p class="text-sm font-medium text-primary-50">
@@ -105,15 +82,14 @@ const showDialogLogout = () => {
                     <p class="text-xs font-normal text-primary-50">
                       {{ user.user_access }}
                     </p>
-                    <p class="text-xs font-normal text-primary-50">UID Jakarta Raya</p>
+                    <p class="text-xs font-normal border-t border-white text-primary-50">
+                      • UID {{ user.user_uid }}
+                    </p>
                   </div>
                 </div>
               </div>
               <MenuItem v-slot="{ active }">
-                <button
+              <button @click="showDialogLogout" :class="[active ? 'menu-item-active' : 'menu-item']">
-                  @click="showDialogLogout"
-                  :class="[active ? 'menu-item-active' : 'menu-item']"
-                >
                 Log out
               </button>
               </MenuItem>

src/stores/user.ts

@@ -1,10 +1,11 @@
-import { ref, computed } from 'vue'
+import { computed } from 'vue';
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
 
 export const useUserStore = defineStore('user', () => {
     const user_name = computed(() => localStorage.getItem('user_name') || 'Demo User')
     const user_access = computed(() => localStorage.getItem('user_access') || 'Super Admin')
+    const user_uid = computed(() => localStorage.getItem('user_uid') || 'Jakarta Raya')
     const user_image = computed(() => localStorage.getItem('user_image') || 'https://iidamidamerica.org/wp-content/uploads/2020/12/male-placeholder-image.jpeg')
 
-    return { user_name, user_access, user_image }
+    return { user_name, user_access, user_image, user_uid }
 })