fix: new drawer menu
This commit is contained in:
puriphatt
parent
16f3385a5a
commit
3119cef2ff
1 changed files with 384 additions and 123 deletions
|
|
@ -1,16 +1,88 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, onMounted } from 'vue';
|
import { computed, ref, onMounted, watch, nextTick } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { Icon } from '@iconify/vue';
|
import { Icon } from '@iconify/vue';
|
||||||
import useMyBranch from 'stores/my-branch';
|
import useMyBranch from 'stores/my-branch';
|
||||||
import { getUserId, getRole } from 'src/services/keycloak';
|
import { getUserId, getRole } from 'src/services/keycloak';
|
||||||
|
|
||||||
defineProps<{
|
const props = defineProps<{
|
||||||
mini?: boolean;
|
mini?: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const role = ref();
|
const role = ref();
|
||||||
|
const router = useRouter();
|
||||||
|
const userBranch = useMyBranch();
|
||||||
|
const { currentMyBranch } = storeToRefs(userBranch);
|
||||||
|
|
||||||
|
const menuActive = ref<boolean[]>([false, false, false, false, false]);
|
||||||
|
const currentPath = computed(() => {
|
||||||
|
return router.currentRoute.value.path;
|
||||||
|
});
|
||||||
|
|
||||||
|
// const labelMenu = ref<
|
||||||
|
// {
|
||||||
|
// label: string;
|
||||||
|
// icon: string;
|
||||||
|
// route: string;
|
||||||
|
// hidden?: boolean;
|
||||||
|
// disabled?: boolean;
|
||||||
|
// isax?: boolean;
|
||||||
|
// }[]
|
||||||
|
// >([]);
|
||||||
|
|
||||||
|
type Menu = {
|
||||||
|
label: string;
|
||||||
|
route?: string;
|
||||||
|
icon?: string;
|
||||||
|
hidden?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
isax?: boolean;
|
||||||
|
children?: Menu[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const menuData = ref<Menu[]>([]);
|
||||||
|
|
||||||
|
const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
|
||||||
|
default: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
function navigateTo(label: string, destination?: string) {
|
||||||
|
if (!destination) return;
|
||||||
|
router.push(`${destination}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function branchSetting() {}
|
||||||
|
|
||||||
|
function reActiveMenu() {
|
||||||
|
menuActive.value.fill(false);
|
||||||
|
|
||||||
|
const currMenu = menuData.value.find((m) =>
|
||||||
|
m.children?.some((c) => c.route === currentPath.value),
|
||||||
|
);
|
||||||
|
|
||||||
|
const currMenuIndex = menuData.value.findIndex((m) => m === currMenu);
|
||||||
|
menuActive.value[currMenuIndex] = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => currentPath.value,
|
||||||
|
() => {
|
||||||
|
if (currentPath.value === '/') {
|
||||||
|
menuActive.value.fill(false);
|
||||||
|
menuActive.value[0] = true;
|
||||||
|
} else reActiveMenu();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.mini,
|
||||||
|
() => {
|
||||||
|
if (props.mini) {
|
||||||
|
reActiveMenu();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const uid = getUserId();
|
const uid = getUserId();
|
||||||
|
|
@ -25,129 +97,178 @@ onMounted(async () => {
|
||||||
const result = await userBranch.fetchListMyBranch(uid);
|
const result = await userBranch.fetchListMyBranch(uid);
|
||||||
if (result && result.total > 0) currentMyBranch.value = result.result[0];
|
if (result && result.total > 0) currentMyBranch.value = result.result[0];
|
||||||
|
|
||||||
labelMenu.value = [
|
// labelMenu.value = [
|
||||||
|
// {
|
||||||
|
// label: 'menu.dashboard',
|
||||||
|
// icon: 'isax-element-35',
|
||||||
|
// route: '',
|
||||||
|
// isax: true,
|
||||||
|
// disabled: true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.branch',
|
||||||
|
// icon: 'mdi-chart-donut',
|
||||||
|
// route: '/branch-management',
|
||||||
|
// hidden:
|
||||||
|
// role.value.includes('admin') ||
|
||||||
|
// role.value.includes('branch_admin') ||
|
||||||
|
// role.value.includes('head_of_admin') ||
|
||||||
|
// role.value.includes('system') ||
|
||||||
|
// role.value.includes('owner') ||
|
||||||
|
// role.value.includes('head_of_account')
|
||||||
|
// ? false
|
||||||
|
// : true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.user',
|
||||||
|
// icon: 'fa6-solid:building-user',
|
||||||
|
// route: '/personnel-management',
|
||||||
|
// hidden:
|
||||||
|
// role.value.includes('admin') ||
|
||||||
|
// role.value.includes('branch_admin') ||
|
||||||
|
// role.value.includes('head_of_admin') ||
|
||||||
|
// role.value.includes('system') ||
|
||||||
|
// role.value.includes('owner') ||
|
||||||
|
// role.value.includes('branch_manager')
|
||||||
|
// ? false
|
||||||
|
// : true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.customer',
|
||||||
|
// icon: 'isax-frame5',
|
||||||
|
// route: '/customer-management',
|
||||||
|
// isax: true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.product',
|
||||||
|
// icon: 'heroicons-truck-solid',
|
||||||
|
// route: '/product-service',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.dms',
|
||||||
|
// icon: 'mdi-folder-file',
|
||||||
|
// route: '/document-management',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.quotation',
|
||||||
|
// icon: 'mdi-file-document',
|
||||||
|
// route: '/quotation',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.requestList',
|
||||||
|
// icon: 'isax-device-message5',
|
||||||
|
// route: '',
|
||||||
|
// disabled: true,
|
||||||
|
// isax: true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.workOrder',
|
||||||
|
// icon: 'isax-receipt-2-15',
|
||||||
|
// route: '',
|
||||||
|
// disabled: true,
|
||||||
|
// isax: true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.invoice',
|
||||||
|
// icon: 'material-symbols:box',
|
||||||
|
// route: '',
|
||||||
|
// disabled: true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.accountingLedger',
|
||||||
|
// icon: 'isax-dollar-circle4',
|
||||||
|
// route: '',
|
||||||
|
// isax: true,
|
||||||
|
// disabled: true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'menu.report',
|
||||||
|
// icon: 'mdi-file-document',
|
||||||
|
// route: '',
|
||||||
|
// disabled: true,
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
|
||||||
|
menuData.value = [
|
||||||
{
|
{
|
||||||
label: 'menu.dashboard',
|
label: 'menu.manage',
|
||||||
icon: 'isax-element-35',
|
icon: 'mdi-account-cog-outline',
|
||||||
route: '',
|
children: [
|
||||||
isax: true,
|
{
|
||||||
|
label: 'branch',
|
||||||
|
route: '/branch-management',
|
||||||
|
hidden:
|
||||||
|
role.value.includes('admin') ||
|
||||||
|
role.value.includes('branch_admin') ||
|
||||||
|
role.value.includes('head_of_admin') ||
|
||||||
|
role.value.includes('system') ||
|
||||||
|
role.value.includes('owner') ||
|
||||||
|
role.value.includes('head_of_account')
|
||||||
|
? false
|
||||||
|
: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'personnel',
|
||||||
|
route: '/personnel-management',
|
||||||
|
hidden:
|
||||||
|
role.value.includes('admin') ||
|
||||||
|
role.value.includes('branch_admin') ||
|
||||||
|
role.value.includes('head_of_admin') ||
|
||||||
|
role.value.includes('system') ||
|
||||||
|
role.value.includes('owner') ||
|
||||||
|
role.value.includes('branch_manager')
|
||||||
|
? false
|
||||||
|
: true,
|
||||||
|
},
|
||||||
|
{ label: 'productService', route: '/product-service' },
|
||||||
|
{ label: 'document', route: '/document-management' },
|
||||||
|
{ label: 'workflow', route: '/workflow' },
|
||||||
|
{ label: 'customer', route: '/customer-management' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'menu.sales',
|
||||||
|
icon: 'mdi-store-settings-outline',
|
||||||
|
children: [{ label: 'quotation', route: '/quotation' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'menu.order',
|
||||||
|
icon: 'mdi-file-chart-outline',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
|
children: [
|
||||||
|
{ label: 'requestList', route: '' },
|
||||||
|
{ label: 'documentCheck', route: '' },
|
||||||
|
{ label: 'workOrder', route: '' },
|
||||||
|
{ label: 'goodReceipt', route: '' },
|
||||||
|
{ label: 'workReceipt', route: '' },
|
||||||
|
{ label: 'workDelivery', route: '' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'menu.branch',
|
label: 'menu.account',
|
||||||
icon: 'mdi-chart-donut',
|
icon: 'mdi-bank-outline',
|
||||||
route: '/branch-management',
|
|
||||||
hidden:
|
|
||||||
role.value.includes('admin') ||
|
|
||||||
role.value.includes('branch_admin') ||
|
|
||||||
role.value.includes('head_of_admin') ||
|
|
||||||
role.value.includes('system') ||
|
|
||||||
role.value.includes('owner') ||
|
|
||||||
role.value.includes('head_of_account')
|
|
||||||
? false
|
|
||||||
: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'menu.user',
|
|
||||||
icon: 'fa6-solid:building-user',
|
|
||||||
route: '/personnel-management',
|
|
||||||
hidden:
|
|
||||||
role.value.includes('admin') ||
|
|
||||||
role.value.includes('branch_admin') ||
|
|
||||||
role.value.includes('head_of_admin') ||
|
|
||||||
role.value.includes('system') ||
|
|
||||||
role.value.includes('owner') ||
|
|
||||||
role.value.includes('branch_manager')
|
|
||||||
? false
|
|
||||||
: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'menu.customer',
|
|
||||||
icon: 'isax-frame5',
|
|
||||||
route: '/customer-management',
|
|
||||||
isax: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'menu.product',
|
|
||||||
icon: 'heroicons-truck-solid',
|
|
||||||
route: '/product-service',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'menu.dms',
|
|
||||||
icon: 'mdi-folder-file',
|
|
||||||
route: '/document-management',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'menu.quotation',
|
|
||||||
icon: 'mdi-file-document',
|
|
||||||
route: '/quotation',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'menu.requestList',
|
|
||||||
icon: 'isax-device-message5',
|
|
||||||
route: '',
|
|
||||||
disabled: true,
|
disabled: true,
|
||||||
isax: true,
|
children: [
|
||||||
|
{ label: 'uploadSlip', route: '' },
|
||||||
|
{ label: 'receipt', route: '' },
|
||||||
|
{ label: 'creditNote', route: '' },
|
||||||
|
{ label: 'debitNote', route: '' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'menu.workOrder',
|
label: 'menu.overall',
|
||||||
icon: 'isax-receipt-2-15',
|
icon: 'mdi-monitor-dashboard',
|
||||||
route: '',
|
|
||||||
disabled: true,
|
|
||||||
isax: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'menu.invoice',
|
|
||||||
icon: 'material-symbols:box',
|
|
||||||
route: '',
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'menu.accountingLedger',
|
|
||||||
icon: 'isax-dollar-circle4',
|
|
||||||
route: '',
|
|
||||||
isax: true,
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'menu.report',
|
|
||||||
icon: 'mdi-file-document',
|
|
||||||
route: '',
|
|
||||||
disabled: true,
|
disabled: true,
|
||||||
|
children: [
|
||||||
|
{ label: 'report', route: '' },
|
||||||
|
{ label: 'dashboard', route: '' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
if (currentPath.value === '/') menuActive.value[0] = true;
|
||||||
|
else reActiveMenu();
|
||||||
});
|
});
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const userBranch = useMyBranch();
|
|
||||||
const { currentMyBranch } = storeToRefs(userBranch);
|
|
||||||
|
|
||||||
const currentRoute = ref<string>('');
|
|
||||||
const currentPath = computed(() => {
|
|
||||||
return router.currentRoute.value.path;
|
|
||||||
});
|
|
||||||
|
|
||||||
const labelMenu = ref<
|
|
||||||
{
|
|
||||||
label: string;
|
|
||||||
icon: string;
|
|
||||||
route: string;
|
|
||||||
hidden?: boolean;
|
|
||||||
disabled?: boolean;
|
|
||||||
isax?: boolean;
|
|
||||||
}[]
|
|
||||||
>([]);
|
|
||||||
|
|
||||||
const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
|
|
||||||
default: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
function navigateTo(label: string, destination: string) {
|
|
||||||
currentRoute.value = label;
|
|
||||||
router.push(`${destination}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
function branchSetting() {}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -163,8 +284,11 @@ function branchSetting() {}
|
||||||
show-if-above
|
show-if-above
|
||||||
>
|
>
|
||||||
<!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
|
<!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
|
||||||
<div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">
|
<section
|
||||||
<div
|
class="scroll"
|
||||||
|
style="overflow-x: hidden; scrollbar-gutter: stable"
|
||||||
|
>
|
||||||
|
<header
|
||||||
class="flex justify-center items-center q-pl-sm cursor-pointer"
|
class="flex justify-center items-center q-pl-sm cursor-pointer"
|
||||||
@click="$router.push('/')"
|
@click="$router.push('/')"
|
||||||
id="btn-drawer-home"
|
id="btn-drawer-home"
|
||||||
|
|
@ -176,10 +300,106 @@ function branchSetting() {}
|
||||||
:style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
|
:style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
|
||||||
style="height: 64px"
|
style="height: 64px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</header>
|
||||||
|
|
||||||
<div id="drawer-menu" class="q-pl-md q-mr-xs">
|
<div id="drawer-menu" class="q-pl-md q-mr-xs q-gutter-y-sm">
|
||||||
<q-item
|
<template v-for="(menu, i) in menuData" :key="i">
|
||||||
|
<q-expansion-item
|
||||||
|
v-if="!menu.hidden"
|
||||||
|
dense
|
||||||
|
:model-value="menuActive[i]"
|
||||||
|
expand-icon-class="no-padding"
|
||||||
|
:hide-expand-icon="mini"
|
||||||
|
:disable="menu.disabled"
|
||||||
|
:header-class="{
|
||||||
|
row: true,
|
||||||
|
'justify-between': !mini,
|
||||||
|
'no-padding justify-center': mini,
|
||||||
|
'active-menu text-weight-bold': menuActive[i],
|
||||||
|
'text-weight-medium': !menu.disabled,
|
||||||
|
}"
|
||||||
|
@update:model-value="
|
||||||
|
() => {
|
||||||
|
mini ? '' : (menuActive[i] = !menuActive[i]);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<nav class="row items-center q-py-sm no-wrap">
|
||||||
|
<i
|
||||||
|
v-if="menu.isax"
|
||||||
|
:class="`isax ${menu.icon}`"
|
||||||
|
style="font-size: 24px"
|
||||||
|
/>
|
||||||
|
<Icon v-else :icon="menu.icon || ''" width="24px" />
|
||||||
|
<span v-if="!mini" class="q-pl-sm" style="white-space: nowrap">
|
||||||
|
{{ $t(`${menu.label}.title`) }}
|
||||||
|
</span>
|
||||||
|
<q-tooltip :delay="500">
|
||||||
|
{{ $t(`${menu.label}.title`) }}
|
||||||
|
</q-tooltip>
|
||||||
|
|
||||||
|
<q-menu
|
||||||
|
v-if="mini"
|
||||||
|
fit
|
||||||
|
anchor="center end"
|
||||||
|
self="top left"
|
||||||
|
:offset="[16, 0]"
|
||||||
|
>
|
||||||
|
<q-list dense>
|
||||||
|
<template v-for="(sub, i) in menu.children" :key="i">
|
||||||
|
<q-item
|
||||||
|
v-if="!sub.hidden"
|
||||||
|
clickable
|
||||||
|
:disabled="sub.disabled"
|
||||||
|
class="row items-center no-wrap"
|
||||||
|
:class="{
|
||||||
|
'text-weight-bold app-bg-brand-1':
|
||||||
|
currentPath === sub.route,
|
||||||
|
}"
|
||||||
|
@click="
|
||||||
|
() => {
|
||||||
|
!sub.disabled && navigateTo('', sub.route);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span style="white-space: nowrap">
|
||||||
|
{{ $t(`${menu.label}.${sub.label}`) }}
|
||||||
|
</span>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<q-list v-if="!mini" dense>
|
||||||
|
<template v-for="(sub, i) in menu.children" :key="i">
|
||||||
|
<div
|
||||||
|
v-if="!sub.hidden"
|
||||||
|
class="row items-center q-ml-lg q-py-sm no-wrap"
|
||||||
|
:class="{ 'q-mt-sm': i === 0, 'sub-menu': !sub.disabled }"
|
||||||
|
style="border-left: 2px solid var(--surface-tab)"
|
||||||
|
@click="!sub.disabled && navigateTo('', sub.route)"
|
||||||
|
>
|
||||||
|
<nav
|
||||||
|
class="row items-center no-wrap"
|
||||||
|
:class="{
|
||||||
|
active: currentPath === sub.route,
|
||||||
|
disabled: sub.disabled,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<span class="q-px-md" style="white-space: nowrap">
|
||||||
|
{{ $t(`${menu.label}.${sub.label}`) }}
|
||||||
|
</span>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-list>
|
||||||
|
</q-expansion-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- <q-item
|
||||||
v-for="v in labelMenu.filter((v) => !v.hidden)"
|
v-for="v in labelMenu.filter((v) => !v.hidden)"
|
||||||
:id="`drawer-${v.label}`"
|
:id="`drawer-${v.label}`"
|
||||||
dense
|
dense
|
||||||
|
|
@ -209,11 +429,11 @@ function branchSetting() {}
|
||||||
<div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
|
<div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
|
||||||
{{ $t(v.label) }}
|
{{ $t(v.label) }}
|
||||||
</div>
|
</div>
|
||||||
</q-item>
|
</q-item> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<div
|
<footer
|
||||||
class="surface-2 q-px-md q-py-sm row items-center no-wrap justify-start"
|
class="surface-2 q-px-md q-py-sm row items-center no-wrap justify-start"
|
||||||
:class="{ 'justify-center': mini }"
|
:class="{ 'justify-center': mini }"
|
||||||
style="min-height: 56px; overflow-x: hidden"
|
style="min-height: 56px; overflow-x: hidden"
|
||||||
|
|
@ -266,7 +486,7 @@ function branchSetting() {}
|
||||||
@click="branchSetting"
|
@click="branchSetting"
|
||||||
style="margin-left: auto"
|
style="margin-left: auto"
|
||||||
/>
|
/>
|
||||||
</div>
|
</footer>
|
||||||
</q-drawer>
|
</q-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -327,4 +547,45 @@ function branchSetting() {}
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 1.5px solid white;
|
border: 1.5px solid white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.active-menu) {
|
||||||
|
color: white !important;
|
||||||
|
background: var(--brand-1) !important;
|
||||||
|
|
||||||
|
i.q-icon.mdi.mdi-chevron-down.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
font-weight: 400;
|
||||||
|
.active {
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: -3px;
|
||||||
|
width: 4px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50px;
|
||||||
|
background-color: var(--brand-2);
|
||||||
|
}
|
||||||
|
color: var(--brand-1) !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
nav::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: -3px;
|
||||||
|
width: 4px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50px;
|
||||||
|
background-color: var(--brand-2);
|
||||||
|
}
|
||||||
|
color: var(--brand-1) !important;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue