update header

src/assets/css/style.css

@@ -1081,6 +1081,18 @@ select {
   height: 80vh;
 }
 
+.h-\[calc\(100\%-56px\)\] {
+  height: calc(100% - 56px);
+}
+
+.h-\[calc\(100\%-60px\)\] {
+  height: calc(100% - 60px);
+}
+
+.h-\[calc\(100\%-64px\)\] {
+  height: calc(100% - 64px);
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -1093,6 +1105,10 @@ select {
   max-height: 1000px;
 }
 
+.max-h-full {
+  max-height: 100%;
+}
+
 .min-h-0 {
   min-height: 0px;
 }
@@ -1205,6 +1221,10 @@ select {
   width: 100vw;
 }
 
+.w-\[200px\] {
+  width: 200px;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1501,6 +1521,10 @@ select {
   border-radius: 0.75rem;
 }
 
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -1511,6 +1535,11 @@ select {
   border-bottom-right-radius: 9999px;
 }
 
+.rounded-t-3xl {
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1718,6 +1747,11 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-secondary-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 235 239 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-25 {
   --tw-bg-opacity: 0.25;
 }
@@ -2179,6 +2213,11 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-primary-50 {
+  --tw-text-opacity: 1;
+  color: rgb(230 239 241 / var(--tw-text-opacity));
+}
+
 .text-opacity-100 {
   --tw-text-opacity: 1;
 }
@@ -2987,6 +3026,10 @@ select {
     margin-right: 1.5rem;
   }
 
+  .md\:mr-4 {
+    margin-right: 1rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -3007,6 +3050,14 @@ select {
     width: 20rem;
   }
 
+  .md\:w-\[200px\] {
+    width: 200px;
+  }
+
+  .md\:w-\[300px\] {
+    width: 300px;
+  }
+
   .md\:max-w-\[220px\] {
     max-width: 220px;
   }
@@ -3023,6 +3074,11 @@ select {
     flex-direction: column;
   }
 
+  .md\:bg-primary-500 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+  }
+
   .md\:p-20 {
     padding: 5rem;
   }
@@ -3037,6 +3093,21 @@ select {
     padding-bottom: 1.5rem;
   }
 
+  .md\:px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .md\:py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .md\:px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
   .md\:pl-80 {
     padding-left: 20rem;
   }

src/components/AsideWhite.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { watch } from 'vue';
+import { watch } from 'vue'
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router'
 import { RouterLink } from 'vue-router'
-import Icon from '@/assets/images/pln-with-text.png';
+import Icon from '@/assets/images/pln-with-text.png'
 import { ref } from 'vue'
 import {
     Dialog,
@@ -25,13 +25,13 @@ import {
     ShieldCheckIcon,
     XMarkIcon
 } from '@heroicons/vue/24/outline'
-import { useMenuStore } from '@/stores/menu';
+import { useMenuStore } from '@/stores/menu'
 
-const nav = useMenuStore();
+const nav = useMenuStore()
-const navigation = nav.navigation;
+const navigation = nav.navigation
 
-const route = useRoute();
+const route = useRoute()
-const menuSelected = ref(route.fullPath);
+const menuSelected = ref(route.fullPath)
 
 watch(route, (to, _) => {
     menuSelected.value = to.fullPath
@@ -45,18 +45,15 @@ const isMenu = (name: string) => {
 const props = defineProps({
     sideBarStatus: Boolean,
 });
-const emits = defineEmits(['onChangeSideBarStatus']);
+const emits = defineEmits(['onChangeSideBarStatus'])
 const localSideBarStatus = ref(props.sideBarStatus)
 
-function closeSideBar() {
+const closeSideBar = () => {
-    localSideBarStatus.value = false;
+    localSideBarStatus.value = false
-    emits('onChangeSideBarStatus', false);
+    emits('onChangeSideBarStatus', false)
-};
+}
-
 </script>
 
-<style scoped></style>
-
 <template>
     <TransitionRoot as="template" :show="sideBarStatus">
         <Dialog as="div" class="relative z-40 md:hidden" @close="closeSideBar">
@@ -71,7 +68,7 @@ function closeSideBar() {
                     enter-from="-translate-x-full" enter-to="translate-x-0"
                     leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
                     leave-to="-translate-x-full">
-                    <DialogPanel class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-white">
+                    <DialogPanel class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-primary-50">
                         <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
                             enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100"
                             leave-to="opacity-0">
@@ -179,7 +176,7 @@ function closeSideBar() {
         </Dialog>
     </TransitionRoot>
     <!-- Static sidebar for desktop -->
-    <div class="z-10 hidden bg-white md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
+    <div class="z-10 hidden bg-primary-50 md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
         <!-- Sidebar component, swap this element with another sidebar if you like -->
         <div class="flex items-center flex-shrink-0 h-16 px-5 border-b border-gray-100 border-dashed">
             <RouterLink to="/">

src/components/Header.vue

@@ -1,13 +1,13 @@
 
 <script setup lang="ts">
-import CommandPalettes from '@/components/CommandPalettes.vue';
+import CommandPalettes from '@/components/CommandPalettes.vue'
-import MessageBox from '@/components/MessageBox.vue';
+import MessageBox from '@/components/MessageBox.vue'
-import ActionDialog from '@/components/Dialogs/ActionDialog.vue';
+import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
-import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue';
+import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue'
-import { useAuthStore } from '@/stores/auth';
+import { useAuthStore } from '@/stores/auth'
-import { useUserStore } from '@/stores/user';
+import { useUserStore } from '@/stores/user'
-import { useCommandPalattesStore } from '@/stores/command';
+import { useCommandPalattesStore } from '@/stores/command'
-import { useMessageStore } from '@/stores/message';
+import { useMessageStore } from '@/stores/message'
 import {
     Menu,
     MenuButton,
@@ -19,45 +19,45 @@ import {
     ChatBubbleOvalLeftEllipsisIcon,
     QuestionMarkCircleIcon,
     Bars3BottomLeftIcon
-} from '@heroicons/vue/24/outline';
+} from '@heroicons/vue/24/outline'
-import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid';
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue'
-import PictureInitial from './PictureInitial.vue';
+import PictureInitial from './PictureInitial.vue'
 
-const authStore = useAuthStore();
+const authStore = useAuthStore()
-const userStore = useUserStore();
+const userStore = useUserStore()
-const messageStore = useMessageStore();
+const messageStore = useMessageStore()
-const commandStore = useCommandPalattesStore();
+const commandStore = useCommandPalattesStore()
 
-const props = defineProps({ sideBarStatus: Boolean });
+const props = defineProps({ sideBarStatus: Boolean })
-const status = ref(props.sideBarStatus);
+const status = ref(props.sideBarStatus)
-const emits = defineEmits(['onChangeSideBarStatus']);
+const emits = defineEmits(['onChangeSideBarStatus'])
 
-function openSideBar() {
+const openSideBar = () => {
-    status.value = true;
+    status.value = true
-    emits('onChangeSideBarStatus', true);
+    emits('onChangeSideBarStatus', true)
 };
 
-const dialogLogout = ref(false);
+const dialogLogout = ref(false)
-const dialogChangePassword = ref(false);
+const dialogChangePassword = ref(false)
 
-function handleOnDismissDialogChangePassword() {
+const handleOnDismissDialogChangePassword = () => {
-    dialogChangePassword.value = false;
+    dialogChangePassword.value = false
 }
 
-function showDialogChangePassword() {
+const showDialogChangePassword = () => {
-    dialogChangePassword.value = true;
+    dialogChangePassword.value = true
 }
 
-function handleOnDismissDialogLogout() {
+const handleOnDismissDialogLogout = () => {
-    dialogLogout.value = false;
+    dialogLogout.value = false
 }
 
-function showDialogLogout() {
+const showDialogLogout = () => {
-    dialogLogout.value = true;
+    dialogLogout.value = true
 }
 
-function handleOnConfirmDialogLogout() {
+const handleOnConfirmDialogLogout = () => {
     authStore.logout()
     window.location.href = '/login'
 }
@@ -72,21 +72,17 @@ onUnmounted(() => {
     // document.removeEventListener('keyup', commandStore.onKeyUp);
 });
 </script>
+
+
 <template>
-    <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-white shadow-lg shadow-gray-50 md:ml-80">
+    <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 md:ml-80">
         <button type="button" class="px-4 text-gray-500 border-gray-200 focus:outline-none focus:ring-0 md:hidden"
             @click="openSideBar">
             <span class="sr-only">Open sidebar</span>
             <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
         </button>
-        <!-- <div class="flex items-center flex-shrink-0 md:hidden">
-            <img class="w-auto h-11" :src="Icon" alt="PLN" />
-        </div> -->
-        <!-- <div class="flex items-center flex-shrink-0 hidden my-auto ml-4 md:block">
-            <img class="w-auto h-11" :src="IconWithText" alt="PLN" />
-        </div> -->
         <div class="flex justify-end w-full px-4">
-            <div class="flex flex-1">
+            <!-- <div class="flex flex-1">
                 <div class="flex w-full md:ml-0">
                     <button @click="commandStore.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">
@@ -96,10 +92,10 @@ onUnmounted(() => {
                         </div>
                     </button>
                 </div>
-            </div>
+            </div> -->
 
             <div class="flex items-center ml-4 md:ml-6">
-                <button type="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">FAQ</span>
                     <QuestionMarkCircleIcon class="w-6 h-6" aria-hidden="true" />
@@ -113,16 +109,25 @@ onUnmounted(() => {
                     class="p-1 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
                     <span class="sr-only">Message</span>
                     <ChatBubbleOvalLeftEllipsisIcon class="w-6 h-6" aria-hidden="true" />
+                </button> -->
+                <button @click="commandStore.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>
+                    <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
+                    <span class="hidden px-3 font-medium text-gray-500 md:block text-md">Cari menu</span>
                 </button>
 
                 <!-- Profile dropdown -->
-                <Menu as="div" class="relative ml-3">
+                <Menu as="div" class="relative ml-1">
                     <div>
                         <MenuButton
-                            class="flex items-center max-w-xs text-sm bg-white rounded-full focus:outline-none focus:ring-0">
+                            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">
                             <span class="sr-only">Open user menu</span>
-                            <PictureInitial size-class="w-8 h-8" background-class="bg-gray-100"
+                            <PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
-                                font-class="font-bold text-gray-500 text-md" :name="userStore.user_name" />
+                                font-class="font-bold text-primary-500 text-md" :name="userStore.user_name" />
+                            <span class="hidden px-3 font-medium md:block text-primary-50 text-md">
+                                {{ userStore.user_name }}
+                            </span>
                         </MenuButton>
                     </div>
                     <transition enter-active-class="transition duration-100 ease-out"

src/components/Menus/MenuProvider.vue

@@ -1,5 +1,5 @@
 <template>
-    <main class="flex-1 px-2 py-2 sm:px-4 md:px-6 sm:py-4 md:py-6">
+    <main class="flex-1 px-2 py-2 overflow-y-auto bg-white md:mr-4 sm:px-4 md:px-6 sm:py-4 md:py-6 rounded-t-3xl">
         <div v-if="route.path !== '/home'" class="mx-auto max-w-7xl">
             <h1 class="text-lg font-medium md:text-2xl lg:text-3xl text-dark">{{ currentRouteName }}</h1>
         </div>

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
   <Navigation />
-  <div class="flex flex-col flex-1 md:pl-80">
+  <div class="flex flex-col flex-1 h-[calc(100%-64px)] overflow-hidden md:pl-80 bg-primary-50">
     <MenuProvider>
       <RouterView />
     </MenuProvider>