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

add design token for sidebar

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-23 16:26:03 +07:00
parent 92bd068430
commit 26649417f8
5 changed files with 174 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Navigation/Aside/AsideMenuMultiple.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, defineProps, onMounted } from 'vue'
import { computed } from 'vue'
import type { MenuItemModel } from '@/utils/interfaces'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
import { useMenuStore } from '@/stores/menu'

7
src/components/Navigation/Aside/AsideMenuSingle.vue
View File

@ -20,10 +20,11 @@ defineProps({
<template>
<div class="group">
<RouterLink :to="item.path"
:class="[selected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500', 'w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl', isChildren ? 'mt-1' : 'mt-0']">
:class="[selected ? 'aside-single-item-active' : 'aside-single-item-inactive', isChildren ? 'mt-1' : 'mt-0']">
<svg v-if="isChildren" :class="[selected ? 'stroke-white' : 'text-aside group-hover:stroke-white', 'h-6 w-6']"
width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<svg v-if="isChildren"
:class="[selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" width="16"
height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g id="DotOutline">
<path id="Vector" opacity="0.2"
d="M9.5 8C9.5 8.29667 9.41203 8.58668 9.24721 8.83336C9.08238 9.08003 8.84812 9.27229 8.57403 9.38582C8.29994 9.49935 7.99834 9.52906 7.70737 9.47118C7.41639 9.4133 7.14912 9.27044 6.93934 9.06066C6.72956 8.85088 6.5867 8.58361 6.52882 8.29264C6.47094 8.00166 6.50065 7.70006 6.61418 7.42597C6.72771 7.15189 6.91997 6.91762 7.16665 6.7528C7.41332 6.58797 7.70333 6.5 8 6.5C8.39783 6.5 8.77936 6.65804 9.06066 6.93934C9.34197 7.22064 9.5 7.60218 9.5 8Z"

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

@ -52,30 +52,7 @@ const showDialogLogout = () => {
<img class="w-auto h-11" :src="IconApp" alt="PLN" />
</div>
<div class="flex justify-end w-full px-4">
<!-- <div class="flex flex-1">
<div class="flex w-full md:ml-0">
<button @click="command.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">
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
<MagnifyingGlassIcon class="w-5 h-5" aria-hidden="true" />
<span class="hidden ml-2 sm:text-sm md:block">Cari menu...</span>
</div>
</button>
<img :src="Icon" alt="pln" class="md:hidden">
</div>
</div> -->
<div class="flex items-center ml-4 md:ml-6">
<!-- <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" />
</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">Manual Book</span>
<BookOpenIcon class="w-6 h-6" aria-hidden="true" />
</button -->
<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>
@ -101,13 +78,11 @@ const showDialogLogout = () => {
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="absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50 group">
<MenuItems class="container-menu-item">
<div class="container-menu-profile group">
<div class="flex items-center">
<div>
<!-- <img class="inline-block rounded-full h-9 w-9" :src="user.user_image" alt="" /> -->
<PictureInitial class-name="nline-block" size-class="w-9 h-9"
<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" />
@ -123,8 +98,7 @@ const showDialogLogout = () => {
</div>
</div>
<MenuItem v-slot="{ active }">
<button @click="showDialogLogout"
:class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-3 text-base text-gray-800']">
<button @click="showDialogLogout" :class="[active ? 'menu-item-active' : 'menu-item']">
Log out
</button>
</MenuItem>