defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update header

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-16 16:51:22 +07:00
parent 7c6a28b98d
commit 1080aeca75
5 changed files with 140 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/AsideWhite.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { watch } from 'vue';
import { useRoute } from 'vue-router';
import { watch } from 'vue'
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 navigation = nav.navigation;
const nav = useMenuStore()
const navigation = nav.navigation
const route = useRoute();
const menuSelected = ref(route.fullPath);
const route = useRoute()
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() {
localSideBarStatus.value = false;
emits('onChangeSideBarStatus', false);
};
const closeSideBar = () => {
localSideBarStatus.value = 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="/">

99
src/components/Header.vue
View File

@@ -1,13 +1,13 @@
<script setup lang="ts">
import CommandPalettes from '@/components/CommandPalettes.vue';
import MessageBox from '@/components/MessageBox.vue';
import ActionDialog from '@/components/Dialogs/ActionDialog.vue';
import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue';
import { useAuthStore } from '@/stores/auth';
import { useUserStore } from '@/stores/user';
import { useCommandPalattesStore } from '@/stores/command';
import { useMessageStore } from '@/stores/message';
import CommandPalettes from '@/components/CommandPalettes.vue'
import MessageBox from '@/components/MessageBox.vue'
import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue'
import { useAuthStore } from '@/stores/auth'
import { useUserStore } from '@/stores/user'
import { useCommandPalattesStore } from '@/stores/command'
import { useMessageStore } from '@/stores/message'
import {
Menu,
MenuButton,
@@ -19,45 +19,45 @@ import {
ChatBubbleOvalLeftEllipsisIcon,
QuestionMarkCircleIcon,
Bars3BottomLeftIcon
} from '@heroicons/vue/24/outline';
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid';
import { onMounted, onUnmounted, ref } from 'vue';
import PictureInitial from './PictureInitial.vue';
} from '@heroicons/vue/24/outline'
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
import { onMounted, onUnmounted, ref } from 'vue'
import PictureInitial from './PictureInitial.vue'
const authStore = useAuthStore();
const userStore = useUserStore();
const messageStore = useMessageStore();
const commandStore = useCommandPalattesStore();
const authStore = useAuthStore()
const userStore = useUserStore()
const messageStore = useMessageStore()
const commandStore = useCommandPalattesStore()
const props = defineProps({ sideBarStatus: Boolean });
const status = ref(props.sideBarStatus);
const emits = defineEmits(['onChangeSideBarStatus']);
const props = defineProps({ sideBarStatus: Boolean })
const status = ref(props.sideBarStatus)
const emits = defineEmits(['onChangeSideBarStatus'])
function openSideBar() {
status.value = true;
emits('onChangeSideBarStatus', true);
const openSideBar = () => {
status.value = true
emits('onChangeSideBarStatus', true)
};
const dialogLogout = ref(false);
const dialogChangePassword = ref(false);
const dialogLogout = ref(false)
const dialogChangePassword = ref(false)
function handleOnDismissDialogChangePassword() {
dialogChangePassword.value = false;
const handleOnDismissDialogChangePassword = () => {
dialogChangePassword.value = false
}
function showDialogChangePassword() {
dialogChangePassword.value = true;
const showDialogChangePassword = () => {
dialogChangePassword.value = true
}
function handleOnDismissDialogLogout() {
dialogLogout.value = false;
const handleOnDismissDialogLogout = () => {
dialogLogout.value = false
}
function showDialogLogout() {
dialogLogout.value = true;
const showDialogLogout = () => {
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"
font-class="font-bold text-gray-500 text-md" :name="userStore.user_name" />
<PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
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"

2
src/components/Menus/MenuProvider.vue
View File

@@ -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>