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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/assets/css/style.css
View File

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

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>

2
src/views/HomeView.vue
View File

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