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

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>