443 lines
9.9 KiB
Vue
443 lines
9.9 KiB
Vue
<template>
|
|
<li
|
|
class="mb-1"
|
|
@mouseenter="emitCustomEvent($event, 'in')"
|
|
@mouseleave="emitCustomEvent($event, 'out')"
|
|
v-for="(item, key, index) in menuItem"
|
|
:class="['color-' + item.color]"
|
|
>
|
|
<div v-if="item?.subMenu?.length">
|
|
<RouterLink :to="{ name: item.link }" class="has-sub-items gl-link">
|
|
<i class="nav-icon-container" :class="item.icon"></i>
|
|
<span class="nav-item-name">
|
|
{{ item.title }}
|
|
</span>
|
|
</RouterLink>
|
|
|
|
<ul class="sidebar-sub-level-items" :id="item.link">
|
|
<li class="fly-out-top-item active gl-link">
|
|
<span class="fly-out-top-item-container">
|
|
<strong class="fly-out-top-item-name">
|
|
{{ item.title }}
|
|
</strong>
|
|
</span>
|
|
</li>
|
|
<li class="divider fly-out-top-item"></li>
|
|
|
|
<li
|
|
@click.prevent="navigateTo(subMenu)"
|
|
v-for="(subMenu, j) in item.subMenu"
|
|
:key="j"
|
|
>
|
|
<RouterLink
|
|
tag="span"
|
|
:disabled="true"
|
|
exact
|
|
:to="{ name: subMenu.link }"
|
|
:title="subMenu.title"
|
|
class="gl-link btn sub-level-item"
|
|
>
|
|
<i class="nav-icon-container " :class="subMenu.icon">
|
|
<span class="path1"></span><span class="path2"></span>
|
|
</i>
|
|
<span class="nav-item-name gl-link mr-1">
|
|
{{ subMenu.title }}
|
|
</span>
|
|
</RouterLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<RouterLink
|
|
v-else
|
|
exact
|
|
:to="{ name: item.link }"
|
|
:title="item.title"
|
|
class="gl-link"
|
|
>
|
|
<i class="nav-icon-container" :class="item.icon">
|
|
<span class="path1"></span><span class="path2"></span
|
|
></i>
|
|
<span class="nav-item-name">
|
|
{{ item.title }}
|
|
</span>
|
|
</RouterLink>
|
|
</li>
|
|
</template>
|
|
<script>
|
|
import { mapState, mapActions } from "pinia";
|
|
import { useCommonStore } from "~/stores/commonStore";
|
|
import { useAuthStore } from "~/stores/authStore";
|
|
export default {
|
|
props: ["menuItem"],
|
|
|
|
data() {
|
|
return {
|
|
topico: [],
|
|
botico: [],
|
|
top: 0,
|
|
menuColor: 1,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(useCommonStore,["isSidebarCollapsed", "isDesktop", "isMobile"]),
|
|
},
|
|
|
|
methods: {
|
|
navigateTo(route) {
|
|
this.menuColor = route.color;
|
|
this.$router.push({ name: route.link }).catch(() => {});
|
|
},
|
|
toggleSidebarMenu() {
|
|
this.$store.commit("TOGGLE_SIDEBAR_MENU");
|
|
},
|
|
emitCustomEvent(event, type) {
|
|
const posY = event.pageY - event.offsetY;
|
|
event.target.lastChild.style.top = posY + "px";
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.gl-link {
|
|
font-size: 0.875rem;
|
|
color: #333238;
|
|
|
|
.tavasi {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
|
|
.square.s16,
|
|
svg.s16 {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
svg.s12 {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
svg.s18 {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.nav-sidebar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
transition: width 0.2s, left 0.2s;
|
|
z-index: 600;
|
|
width: var(--sidebar-width);
|
|
top: var(--header-height, 48px);
|
|
background-color: #fbfafd;
|
|
border-left: 1px solid #e9e9e9;
|
|
|
|
.has-sub-items.RouterLink-exact-active.RouterLink-active {
|
|
background-color: #fbfafd !important;
|
|
font-weight: bold;
|
|
& + .sidebar-sub-level-items {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.has-sub-items.RouterLink-exact-active.RouterLink-active
|
|
+ .sidebar-sub-level-items {
|
|
opacity: 1;
|
|
display: block;
|
|
position: static;
|
|
box-shadow: none;
|
|
border-style: none;
|
|
visibility: hidden;
|
|
visibility: visible;
|
|
padding-right: 0.4em;
|
|
|
|
.fly-out-top-item {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.sidebar-expanded-mobile {
|
|
right: 0 !important;
|
|
}
|
|
li.active > a,
|
|
li:hover > a {
|
|
background-color: #d8f8fd;
|
|
}
|
|
|
|
li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
|
|
background-color: rgba(121, 248, 222, 0.301);
|
|
}
|
|
|
|
li > a,
|
|
li > .fly-out-top-item-container {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 0.25rem;
|
|
width: auto;
|
|
line-height: 1rem;
|
|
transition: none;
|
|
margin: 1px 8px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-sidebar-inner-scroll {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
|
|
.sidebar-top-level-items {
|
|
margin-bottom: 60px;
|
|
|
|
li {
|
|
white-space: nowrap;
|
|
position: relative;
|
|
|
|
.context-header {
|
|
position: relative;
|
|
margin-left: 2px;
|
|
// width: 256px;
|
|
width: var(--sidebar-width);
|
|
}
|
|
|
|
&:hover > .sidebar-sub-level-items {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
.nav-icon-container {
|
|
display: flex;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
a.has-sub-items + .sidebar-sub-level-items {
|
|
min-width: 150px;
|
|
}
|
|
}
|
|
|
|
.sidebar-sub-level-items {
|
|
list-style: none;
|
|
position: fixed;
|
|
// margin-right: 0.5rem;
|
|
margin-right: 0;
|
|
margin-top: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
padding-bottom: 0.25rem;
|
|
padding-top: 0;
|
|
background-color: #fbfafd;
|
|
box-shadow: 0 0.25rem 1rem rgba(31, 30, 36, 0.24),
|
|
0 0 0.125rem rgba(31, 30, 36, 0.24);
|
|
border-style: none;
|
|
border-radius: 4px;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
// right: 0;
|
|
// right: 3.5em;
|
|
right: calc(var(--sidebar-width) - 1px);
|
|
|
|
li {
|
|
margin-bottom: 0.2em;
|
|
|
|
&:not(.fly-out-top-item) {
|
|
padding: 0 0.4em;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fly-out-top-item-container {
|
|
margin: 0;
|
|
border-radius: 0;
|
|
background-color: rgba(41, 41, 97, 0.08);
|
|
}
|
|
}
|
|
|
|
.sub-level-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: auto;
|
|
border-radius: 0.5rem;
|
|
width: 100%;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-icon-container {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.badge.badge-pill:not(.fly-out-badge),
|
|
.nav-item-name {
|
|
// border: 0;
|
|
// clip: rect(0, 0, 0, 0);
|
|
// height: 1px;
|
|
// margin: -1px;
|
|
// overflow: hidden;
|
|
// padding: 0;
|
|
// position: absolute;
|
|
// white-space: nowrap;
|
|
// width: 1px;
|
|
|
|
text-align: right;
|
|
text-align: start;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
li:not(.fly-out-top-item) > .RouterLink-exact-active.RouterLink-active {
|
|
background-color: #bdf6ff63;
|
|
}
|
|
|
|
li:not(.fly-out-top-item):hover > .sub-level-item {
|
|
background-color: rgba(97, 41, 69, 0.08);
|
|
}
|
|
}
|
|
|
|
.toggle-sidebar-button,
|
|
.close-nav-button {
|
|
transition: width 0.2s;
|
|
height: 48px;
|
|
padding: 0 16px;
|
|
background-color: #fbfafd;
|
|
border: 0;
|
|
color: #737278;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fbfafd;
|
|
position: fixed;
|
|
bottom: 0;
|
|
// width: 255px;
|
|
width: calc(var(--sidebar-width) - 1px);
|
|
}
|
|
}
|
|
&.js-sidebar-collapsed {
|
|
.nav-sidebar-inner-scroll {
|
|
.sidebar-top-level-items {
|
|
li {
|
|
.context-header {
|
|
}
|
|
|
|
&:hover > .sidebar-sub-level-items {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
&.fly-out-top-item {
|
|
display: block;
|
|
}
|
|
|
|
.nav-icon-container {
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
a.has-sub-items + .sidebar-sub-level-items {
|
|
}
|
|
}
|
|
|
|
.sidebar-sub-level-items {
|
|
position: fixed;
|
|
padding-right: 0;
|
|
box-shadow: 0 0.25rem 1rem rgba(31, 30, 36, 0.24),
|
|
0 0 0.125rem rgba(31, 30, 36, 0.24);
|
|
border-style: none;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
right: calc(var(--sidebar-collapsed-width) - 1px);
|
|
|
|
li {
|
|
&:not(.fly-out-top-item) {
|
|
}
|
|
|
|
&:hover {
|
|
}
|
|
|
|
.fly-out-top-item-container {
|
|
}
|
|
}
|
|
|
|
.sub-level-item {
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-icon-container {
|
|
}
|
|
|
|
.badge.badge-pill:not(.fly-out-badge),
|
|
.nav-item-name {
|
|
}
|
|
|
|
li:not(.fly-out-top-item)
|
|
> .RouterLink-exact-active.RouterLink-active {
|
|
background-color: #bdf6ff63;
|
|
}
|
|
}
|
|
}
|
|
|
|
.has-sub-items.RouterLink-exact-active.RouterLink-active
|
|
+ .sidebar-sub-level-items {
|
|
.fly-out-top-item {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sidebar-collapsed-desktop {
|
|
width: var(--sidebar-collapsed-width);
|
|
.nav-sidebar-inner-scroll {
|
|
.sidebar-top-level-items {
|
|
.sidebar-sub-level-items {
|
|
right: calc(var(--sidebar-collapsed-width) - 5px);
|
|
}
|
|
}
|
|
|
|
.toggle-sidebar-button {
|
|
width: calc(var(--sidebar-collapsed-width) - 1px);
|
|
padding: 0 21px;
|
|
|
|
.collapse-text {
|
|
text-decoration: none;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.sidebar-expanded-mobile {
|
|
right: 0 !important;
|
|
}
|
|
.toggle-sidebar-button,
|
|
.close-nav-button {
|
|
transition: width 0.2s;
|
|
height: 48px;
|
|
padding: 0 16px;
|
|
background-color: #fbfafd;
|
|
border: 0;
|
|
color: #737278;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fbfafd;
|
|
position: fixed;
|
|
bottom: 0;
|
|
// width: 255px;
|
|
width: calc(var(--sidebar-width) - 1px);
|
|
}
|
|
}
|
|
</style>
|