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

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

@ -705,6 +705,139 @@ select {
--tw-backdrop-sepia: ;
}
/* NavBar */
.menu-item {
display: block;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: left;
font-size: 1rem;
line-height: 1.5rem;
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.menu-item-active {
display: block;
width: 100%;
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: left;
font-size: 1rem;
line-height: 1.5rem;
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.container-menu-item {
position: absolute;
right: 0px;
z-index: 10;
margin-top: 0.5rem;
width: 12rem;
transform-origin: top right;
overflow: hidden;
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
--tw-ring-opacity: 0.05;
}
.container-menu-item:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.container-menu-profile {
display: block;
flex-shrink: 0;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Aside */
.aside-single-item-active {
display: flex;
width: 100%;
align-items: center;
border-radius: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
padding-right: 1rem;
font-size: 0.75rem;
line-height: 1rem;
--tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.aside-single-item-inactive {
display: flex;
width: 100%;
align-items: center;
border-radius: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
padding-right: 1rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 600;
color: rgb(46 53 54 / var(--tw-text-opacity));
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.group:hover .aside-single-item-inactive {
background-color: rgb(205 222 227 / var(--tw-bg-opacity));
--tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.aside-single-item-icon {
height: 1.5rem;
width: 1.5rem;
}
.aside-single-item-icon-inactive {
height: 1.5rem;
width: 1.5rem;
--tw-text-opacity: 1;
color: rgb(46 53 54 / var(--tw-text-opacity));
}
.group:hover .aside-single-item-icon-inactive {
stroke: #fff;
}
.sr-only {
position: absolute;
width: 1px;
@ -1128,10 +1261,6 @@ select {
width: 10rem;
}
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
@ -1524,11 +1653,6 @@ select {
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-gray-50 {
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
}
.border-transparent {
border-color: transparent;
}
@ -1833,10 +1957,6 @@ select {
padding-left: 2.75rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pl-3 {
padding-left: 0.75rem;
}
@ -2039,11 +2159,6 @@ select {
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
@ -2238,10 +2353,6 @@ select {
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}
.ring-transparent {
--tw-ring-color: transparent;
}
.ring-opacity-5 {
--tw-ring-opacity: 0.05;
}
@ -2446,10 +2557,6 @@ select {
border-color: rgb(243 244 246 / var(--tw-border-opacity));
}
.focus\:border-transparent:focus {
border-color: transparent;
}
.focus\:border-vtd-primary-300:focus {
--tw-border-opacity: 1;
border-color: rgb(104 157 170 / var(--tw-border-opacity));
@ -2554,16 +2661,6 @@ select {
background-color: rgb(53 124 141 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-primary-100 {
--tw-bg-opacity: 1;
background-color: rgb(205 222 227 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-primary-500 {
--tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:fill-gray-500 {
fill: #6b7280;
}
@ -2572,10 +2669,6 @@ select {
fill: #fff;
}
.group:hover .group-hover\:stroke-white {
stroke: #fff;
}
.group:hover .group-hover\:text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
@ -2936,10 +3029,6 @@ select {
bottom: 0px;
}
.md\:ml-0 {
margin-left: 0px;
}
.md\:ml-6 {
margin-left: 1.5rem;
}

35
src/assets/css/tailwind.css
View File

@ -3,7 +3,36 @@
@tailwind utilities;
@layer components {
.btn {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
/* NavBar */
.menu-item {
@apply w-full text-left block px-4 py-3 text-base text-gray-800;
}
.menu-item-active {
@apply bg-gray-100 w-full text-left block px-4 py-3 text-base text-gray-800;
}
.container-menu-item {
@apply 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;
}
.container-menu-profile {
@apply flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50;
}
/* Aside */
.aside-single-item {
@apply w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl;
}
.aside-single-item-active {
@apply aside-single-item bg-primary-500 text-white font-bold;
}
.aside-single-item-inactive {
@apply aside-single-item font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500;
}
.aside-single-item-icon{
@apply h-6 w-6;
}
.aside-single-item-icon-active{
@apply aside-single-item-icon stroke-white;
}
.aside-single-item-icon-inactive{
@apply aside-single-item-icon text-aside group-hover:stroke-white;
}
}

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>