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

Update style.css and Header.vue files

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-05 08:43:44 +07:00
parent 88d638e4a1
commit c8f3dc9562
3 changed files with 28 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

62
src/components/Navigation/Header.vue
View File

@ -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
type="button"
class="px-4 text-gray-500 focus:outline-none focus:ring-0 lg:hidden"
@click="openSideBar"
>
<button 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
@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"
>
<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>
<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"
>Cari menu</span
>
<span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">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
size-class="w-8 h-8"
background-class="bg-secondary-100"
font-class="text-xs font-bold text-primary-500"
:name="user.user_name"
/>
<PictureInitial size-class="w-8 h-8" 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
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<transition enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
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
class-name="inline-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"
/>
<PictureInitial class-name="inline-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" />
</div>
<div class="ml-3 space-y-1">
<p class="text-sm font-medium text-primary-50">
@ -105,17 +82,16 @@ 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
@click="showDialogLogout"
:class="[active ? 'menu-item-active' : 'menu-item']"
>
Log out
</button>
<button @click="showDialogLogout" :class="[active ? 'menu-item-active' : 'menu-item']">
Log out
</button>
</MenuItem>
</MenuItems>
</transition>

7
src/stores/user.ts
View File

@ -1,10 +1,11 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import { computed } from 'vue';
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 }
})