initial commit
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import {
|
||||
HorizontalNavGroup,
|
||||
HorizontalNavLink,
|
||||
} from '@layouts/components'
|
||||
|
||||
const props = defineProps({
|
||||
navItems: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const resolveNavItemComponent = item => {
|
||||
if ('children' in item)
|
||||
return HorizontalNavGroup
|
||||
|
||||
return HorizontalNavLink
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="nav-items">
|
||||
<Component
|
||||
:is="resolveNavItemComponent(item)"
|
||||
v-for="(item, index) in navItems"
|
||||
:key="index"
|
||||
:item="item"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-wrapper.layout-nav-type-horizontal {
|
||||
.nav-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<script setup>
|
||||
import { useLayouts } from '@layouts'
|
||||
import {
|
||||
HorizontalNavLink,
|
||||
HorizontalNavPopper,
|
||||
} from '@layouts/components'
|
||||
import { config } from '@layouts/config'
|
||||
import { canViewNavMenuGroup } from '@layouts/plugins/casl'
|
||||
import { isNavGroupActive } from '@layouts/utils'
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
childrenAtEnd: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
isSubItem: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
defineOptions({ name: 'HorizontalNavGroup' })
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { dynamicI18nProps, isAppRtl } = useLayouts()
|
||||
const isGroupActive = ref(false)
|
||||
|
||||
watch(() => route.path, () => {
|
||||
const isActive = isNavGroupActive(props.item.children, router)
|
||||
|
||||
isGroupActive.value = isActive
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HorizontalNavPopper
|
||||
v-if="canViewNavMenuGroup(item)"
|
||||
:is-rtl="isAppRtl"
|
||||
class="nav-group"
|
||||
tag="li"
|
||||
content-container-tag="ul"
|
||||
:class="[{
|
||||
'active': isGroupActive,
|
||||
'children-at-end': childrenAtEnd,
|
||||
'sub-item': isSubItem,
|
||||
'disabled': item.disable,
|
||||
}]"
|
||||
:popper-inline-end="childrenAtEnd"
|
||||
>
|
||||
<div class="nav-group-label">
|
||||
<Component
|
||||
:is="config.app.iconRenderer || 'div'"
|
||||
class="nav-item-icon"
|
||||
v-bind="item.icon || config.verticalNav.defaultNavItemIconProps"
|
||||
/>
|
||||
<Component
|
||||
:is="config.app.enableI18n ? 'i18n-t' : 'span'"
|
||||
v-bind="dynamicI18nProps(item.title, 'span')"
|
||||
class="nav-item-title"
|
||||
>
|
||||
{{ item.title }}
|
||||
</Component>
|
||||
<Component
|
||||
v-bind="config.icons.chevronDown"
|
||||
:is="config.app.iconRenderer || 'div'"
|
||||
class="nav-group-arrow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template #content>
|
||||
<Component
|
||||
:is="'children' in child ? 'HorizontalNavGroup' : HorizontalNavLink"
|
||||
v-for="child in item.children"
|
||||
:key="child.title"
|
||||
:item="child"
|
||||
children-at-end
|
||||
is-sub-item
|
||||
/>
|
||||
</template>
|
||||
</HorizontalNavPopper>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-horizontal-nav {
|
||||
.nav-group {
|
||||
.nav-group-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popper-content {
|
||||
z-index: 1;
|
||||
|
||||
> div {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<script setup>
|
||||
import { HorizontalNav } from '@layouts/components'
|
||||
|
||||
// import { useLayouts } from '@layouts'
|
||||
import { useLayouts } from '@layouts/composable/useLayouts'
|
||||
|
||||
const props = defineProps({
|
||||
navItems: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { y: windowScrollY } = useWindowScroll()
|
||||
const { width: windowWidth } = useWindowSize()
|
||||
const router = useRouter()
|
||||
const shallShowPageLoading = ref(false)
|
||||
|
||||
router.beforeEach(() => {
|
||||
shallShowPageLoading.value = true
|
||||
})
|
||||
router.afterEach(() => {
|
||||
shallShowPageLoading.value = false
|
||||
})
|
||||
|
||||
const {
|
||||
_layoutClasses: layoutClasses,
|
||||
isNavbarBlurEnabled,
|
||||
} = useLayouts()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="layout-wrapper"
|
||||
:class="layoutClasses(windowWidth, windowScrollY)"
|
||||
>
|
||||
<div
|
||||
class="layout-navbar-and-nav-container"
|
||||
:class="isNavbarBlurEnabled && 'header-blur'"
|
||||
>
|
||||
<!-- 👉 Navbar -->
|
||||
<div class="layout-navbar">
|
||||
<div class="navbar-content-container">
|
||||
<slot name="navbar" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 👉 Navigation -->
|
||||
<div class="layout-horizontal-nav">
|
||||
<div class="horizontal-nav-content-container">
|
||||
<HorizontalNav :nav-items="navItems" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="layout-page-content">
|
||||
<template v-if="$slots['content-loading']">
|
||||
<template v-if="shallShowPageLoading">
|
||||
<slot name="content-loading" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot />
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot />
|
||||
</template>
|
||||
</main>
|
||||
|
||||
<!-- 👉 Footer -->
|
||||
<footer class="layout-footer">
|
||||
<div class="footer-content-container">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@layouts/styles/placeholders";
|
||||
@use "@layouts/styles/mixins";
|
||||
|
||||
.layout-wrapper {
|
||||
&.layout-nav-type-horizontal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
|
||||
// min-height: 100%;
|
||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||
|
||||
.layout-navbar-and-nav-container {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.layout-navbar {
|
||||
z-index: variables.$layout-horizontal-nav-layout-navbar-z-index;
|
||||
block-size: variables.$layout-horizontal-nav-navbar-height;
|
||||
|
||||
// ℹ️ For now we are not independently managing navbar and horizontal nav so we won't use below style to avoid conflicting with combo style of navbar and horizontal nav
|
||||
// If we add independent style of navbar & horizontal nav then we have to add :not for avoiding conflict with combo styles
|
||||
// .layout-navbar-sticky & {
|
||||
// @extend %layout-navbar-sticky;
|
||||
// }
|
||||
|
||||
// ℹ️ For now we are not independently managing navbar and horizontal nav so we won't use below style to avoid conflicting with combo style of navbar and horizontal nav
|
||||
// If we add independent style of navbar & horizontal nav then we have to add :not for avoiding conflict with combo styles
|
||||
// .layout-navbar-hidden & {
|
||||
// @extend %layout-navbar-hidden;
|
||||
// }
|
||||
}
|
||||
|
||||
// 👉 Navbar
|
||||
.navbar-content-container {
|
||||
@include mixins.boxed-content;
|
||||
}
|
||||
|
||||
// 👉 Content height fixed
|
||||
&.layout-content-height-fixed {
|
||||
max-block-size: calc(var(--vh) * 100);
|
||||
|
||||
.layout-page-content {
|
||||
overflow: hidden;
|
||||
|
||||
> :first-child {
|
||||
max-block-size: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Footer
|
||||
// Boxed content
|
||||
.layout-footer {
|
||||
.footer-content-container {
|
||||
@include mixins.boxed-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If both navbar & horizontal nav sticky
|
||||
&.layout-navbar-sticky.horizontal-nav-sticky {
|
||||
.layout-navbar-and-nav-container {
|
||||
position: sticky;
|
||||
inset-block-start: 0;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-navbar-hidden.horizontal-nav-hidden {
|
||||
.layout-navbar-and-nav-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Horizontal nav nav
|
||||
.layout-horizontal-nav {
|
||||
z-index: variables.$layout-horizontal-nav-z-index;
|
||||
|
||||
// .horizontal-nav-sticky & {
|
||||
// width: 100%;
|
||||
// will-change: transform;
|
||||
// position: sticky;
|
||||
// top: 0;
|
||||
// }
|
||||
|
||||
// .horizontal-nav-hidden & {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.horizontal-nav-content-container {
|
||||
@include mixins.boxed-content(true);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
import { useLayouts } from '@layouts'
|
||||
import { config } from '@layouts/config'
|
||||
import { can } from '@layouts/plugins/casl'
|
||||
import {
|
||||
getComputedNavLinkToProp,
|
||||
isNavLinkActive,
|
||||
} from '@layouts/utils'
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
isSubItem: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const { dynamicI18nProps } = useLayouts()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
v-if="can(item.action, item.subject)"
|
||||
class="nav-link"
|
||||
:class="[{
|
||||
'sub-item': props.isSubItem,
|
||||
'disabled': item.disable,
|
||||
}]"
|
||||
>
|
||||
<Component
|
||||
:is="item.to ? 'RouterLink' : 'a'"
|
||||
v-bind="getComputedNavLinkToProp(item)"
|
||||
:class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }"
|
||||
>
|
||||
<Component
|
||||
:is="config.app.iconRenderer || 'div'"
|
||||
class="nav-item-icon"
|
||||
v-bind="item.icon || config.verticalNav.defaultNavItemIconProps"
|
||||
/>
|
||||
<Component
|
||||
:is="config.app.enableI18n ? 'i18n-t' : 'span'"
|
||||
class="nav-item-title"
|
||||
v-bind="dynamicI18nProps(item.title, 'span')"
|
||||
>
|
||||
{{ item.title }}
|
||||
</Component>
|
||||
</Component>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-horizontal-nav {
|
||||
.nav-link a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,166 @@
|
||||
<script setup>
|
||||
import {
|
||||
computePosition,
|
||||
flip,
|
||||
shift,
|
||||
} from '@floating-ui/dom'
|
||||
import { useLayouts } from '@layouts/composable/useLayouts'
|
||||
import { config } from '@layouts/config'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const props = defineProps({
|
||||
popperInlineEnd: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'div',
|
||||
},
|
||||
contentContainerTag: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'div',
|
||||
},
|
||||
isRtl: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
const refPopperContainer = ref()
|
||||
const refPopper = ref()
|
||||
|
||||
const popperContentStyles = ref({
|
||||
left: '0px',
|
||||
top: '0px',
|
||||
|
||||
// strategy: 'fixed',
|
||||
})
|
||||
|
||||
const updatePopper = async () => {
|
||||
const { x, y } = await computePosition(refPopperContainer.value, refPopper.value, {
|
||||
placement: props.popperInlineEnd ? props.isRtl ? 'left-start' : 'right-start' : 'bottom-start',
|
||||
middleware: [
|
||||
flip({ boundary: document.querySelector('body') }),
|
||||
shift({ boundary: document.querySelector('body') }),
|
||||
],
|
||||
|
||||
// strategy: 'fixed',
|
||||
})
|
||||
|
||||
popperContentStyles.value.left = `${ x }px`
|
||||
popperContentStyles.value.top = `${ y }px`
|
||||
}
|
||||
|
||||
until(config.horizontalNav.type).toMatch(type => type === 'static').then(() => {
|
||||
useEventListener('scroll', updatePopper)
|
||||
|
||||
// strategy: 'fixed',
|
||||
})
|
||||
|
||||
const isContentShown = ref(false)
|
||||
|
||||
const showContent = () => {
|
||||
isContentShown.value = true
|
||||
updatePopper()
|
||||
}
|
||||
|
||||
const hideContent = () => {
|
||||
isContentShown.value = false
|
||||
}
|
||||
|
||||
onMounted(updatePopper)
|
||||
|
||||
const { isAppRtl, appContentWidth } = useLayouts()
|
||||
|
||||
watch([
|
||||
isAppRtl,
|
||||
appContentWidth,
|
||||
], updatePopper)
|
||||
|
||||
// Watch for route changes and close popper content if route is changed
|
||||
const route = useRoute()
|
||||
|
||||
watch(() => route.fullPath, hideContent)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="nav-popper"
|
||||
:class="[{
|
||||
'popper-inline-end': popperInlineEnd,
|
||||
'show-content': isContentShown,
|
||||
}]"
|
||||
>
|
||||
<div
|
||||
ref="refPopperContainer"
|
||||
class="popper-triggerer"
|
||||
@mouseenter="showContent"
|
||||
@mouseleave="hideContent"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!-- SECTION Popper Content -->
|
||||
<!-- 👉 Without transition -->
|
||||
<template v-if="!themeConfig.horizontalNav.transition">
|
||||
<div
|
||||
ref="refPopper"
|
||||
class="popper-content"
|
||||
:style="popperContentStyles"
|
||||
@mouseenter="showContent"
|
||||
@mouseleave="hideContent"
|
||||
>
|
||||
<div>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 👉 CSS Transition -->
|
||||
<template v-else-if="typeof themeConfig.horizontalNav.transition === 'string'">
|
||||
<Transition :name="themeConfig.horizontalNav.transition">
|
||||
<div
|
||||
v-show="isContentShown"
|
||||
ref="refPopper"
|
||||
class="popper-content"
|
||||
:style="popperContentStyles"
|
||||
@mouseenter="showContent"
|
||||
@mouseleave="hideContent"
|
||||
>
|
||||
<div>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<!-- 👉 Transition Component -->
|
||||
<template v-else>
|
||||
<Component :is="themeConfig.horizontalNav.transition">
|
||||
<div
|
||||
v-show="isContentShown"
|
||||
ref="refPopper"
|
||||
class="popper-content"
|
||||
:style="popperContentStyles"
|
||||
@mouseenter="showContent"
|
||||
@mouseleave="hideContent"
|
||||
>
|
||||
<div>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</div>
|
||||
</Component>
|
||||
</template>
|
||||
<!-- !SECTION -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.popper-content {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<script>
|
||||
import { useLayouts } from '@layouts'
|
||||
|
||||
export default defineComponent({
|
||||
setup(props, { slots }) {
|
||||
const { y: windowScrollY } = useWindowScroll()
|
||||
const { width: windowWidth } = useWindowSize()
|
||||
const { _layoutClasses: layoutClasses, isNavbarBlurEnabled } = useLayouts()
|
||||
|
||||
const router = useRouter()
|
||||
const shallShowPageLoading = ref(false)
|
||||
|
||||
return () => {
|
||||
// 👉 Navbar
|
||||
const navbar = h('header', { class: ['layout-navbar', { 'navbar-blur': isNavbarBlurEnabled.value }] }, [
|
||||
h('div', { class: 'navbar-content-container' }, slots.navbar?.()),
|
||||
])
|
||||
|
||||
// 👉 Content area
|
||||
let mainChildren = slots.default?.()
|
||||
|
||||
// 💡 Only show loading and attach `beforeEach` & `afterEach` hooks if `content-loading` slot is used
|
||||
if (slots['content-loading']) {
|
||||
router.beforeEach(() => {
|
||||
console.info('setting to true')
|
||||
shallShowPageLoading.value = true
|
||||
})
|
||||
router.afterEach(() => {
|
||||
console.info('setting to false')
|
||||
shallShowPageLoading.value = false
|
||||
})
|
||||
mainChildren = shallShowPageLoading.value ? slots['content-loading']?.() : slots.default?.()
|
||||
}
|
||||
const main = h('main', { class: 'layout-page-content' }, h('div', { class: 'page-content-container' }, mainChildren))
|
||||
|
||||
return h('div', { class: ['layout-wrapper', ...layoutClasses.value(windowWidth.value, windowScrollY.value)] }, [
|
||||
h('div', {}, [
|
||||
navbar,
|
||||
main,
|
||||
]),
|
||||
])
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@layouts/styles/placeholders";
|
||||
@use "@layouts/styles/mixins";
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
// TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
|
||||
block-size: 100%;
|
||||
|
||||
.layout-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||
transition: padding-inline-start 0.2s ease-in-out;
|
||||
will-change: padding-inline-start;
|
||||
}
|
||||
|
||||
.layout-navbar {
|
||||
z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
|
||||
|
||||
.navbar-content-container {
|
||||
block-size: variables.$layout-vertical-nav-navbar-height;
|
||||
}
|
||||
|
||||
@at-root {
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
.layout-navbar {
|
||||
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||
@include mixins.boxed-content;
|
||||
} @else {
|
||||
.navbar-content-container {
|
||||
@include mixins.boxed-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-navbar-sticky .layout-navbar {
|
||||
@extend %layout-navbar-sticky;
|
||||
}
|
||||
|
||||
&.layout-navbar-hidden .layout-navbar {
|
||||
@extend %layout-navbar-hidden;
|
||||
}
|
||||
|
||||
// 👉 Footer
|
||||
.layout-footer {
|
||||
@include mixins.boxed-content;
|
||||
}
|
||||
|
||||
// 👉 Layout overlay
|
||||
.layout-overlay {
|
||||
position: fixed;
|
||||
z-index: variables.$layout-overlay-z-index;
|
||||
background-color: rgb(0 0 0 / 60%);
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
will-change: transform;
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.layout-overlay-nav) .layout-content-wrapper {
|
||||
padding-inline-start: variables.$layout-vertical-nav-width;
|
||||
}
|
||||
|
||||
// Adjust right column pl when vertical nav is collapsed
|
||||
&.layout-vertical-nav-collapsed .layout-content-wrapper {
|
||||
padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
|
||||
}
|
||||
|
||||
// 👉 Content height fixed
|
||||
&.layout-content-height-fixed {
|
||||
.layout-content-wrapper {
|
||||
max-block-size: calc(var(--vh) * 100);
|
||||
}
|
||||
|
||||
.layout-page-content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
.page-content-container {
|
||||
inline-size: 100%;
|
||||
|
||||
> :first-child {
|
||||
max-block-size: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!-- Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ -->
|
||||
|
||||
<script>
|
||||
import { Transition } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TransitionExpand',
|
||||
setup(_, { slots }) {
|
||||
const onEnter = element => {
|
||||
const width = getComputedStyle(element).width
|
||||
|
||||
element.style.width = width
|
||||
element.style.position = 'absolute'
|
||||
element.style.visibility = 'hidden'
|
||||
element.style.height = 'auto'
|
||||
|
||||
const height = getComputedStyle(element).height
|
||||
|
||||
element.style.width = ''
|
||||
element.style.position = ''
|
||||
element.style.visibility = ''
|
||||
element.style.height = '0px'
|
||||
|
||||
// Force repaint to make sure the
|
||||
// animation is triggered correctly.
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
getComputedStyle(element).height
|
||||
|
||||
// Trigger the animation.
|
||||
// We use `requestAnimationFrame` because we need
|
||||
// to make sure the browser has finished
|
||||
// painting after setting the `height`
|
||||
// to `0` in the line above.
|
||||
requestAnimationFrame(() => {
|
||||
element.style.height = height
|
||||
})
|
||||
}
|
||||
|
||||
const onAfterEnter = element => {
|
||||
element.style.height = 'auto'
|
||||
}
|
||||
|
||||
const onLeave = element => {
|
||||
const height = getComputedStyle(element).height
|
||||
|
||||
element.style.height = height
|
||||
|
||||
// Force repaint to make sure the
|
||||
// animation is triggered correctly.
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
getComputedStyle(element).height
|
||||
requestAnimationFrame(() => {
|
||||
element.style.height = '0px'
|
||||
})
|
||||
}
|
||||
|
||||
return () => h(h(Transition), {
|
||||
name: 'expand',
|
||||
onEnter,
|
||||
onAfterEnter,
|
||||
onLeave,
|
||||
}, () => slots.default?.())
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.expand-enter-active,
|
||||
.expand-leave-active {
|
||||
overflow: hidden;
|
||||
transition: block-size var(--expand-transition-duration, 0.25s) ease;
|
||||
}
|
||||
|
||||
.expand-enter-from,
|
||||
.expand-leave-to {
|
||||
block-size: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
transform: translateZ(0);
|
||||
will-change: block-size;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
export const VNodeRenderer = defineComponent({
|
||||
name: 'VNodeRenderer',
|
||||
props: {
|
||||
nodes: {
|
||||
type: [Array, Object],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
return () => props.nodes
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,226 @@
|
||||
<script setup>
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
||||
import { VNodeRenderer } from './VNodeRenderer'
|
||||
import {
|
||||
injectionKeyIsVerticalNavHovered,
|
||||
useLayouts,
|
||||
} from '@layouts'
|
||||
import {
|
||||
VerticalNavGroup,
|
||||
VerticalNavLink,
|
||||
VerticalNavSectionTitle,
|
||||
} from '@layouts/components'
|
||||
import { config } from '@layouts/config'
|
||||
|
||||
const props = defineProps({
|
||||
tag: {
|
||||
type: [
|
||||
String,
|
||||
null,
|
||||
],
|
||||
required: false,
|
||||
default: 'aside',
|
||||
},
|
||||
navItems: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
isOverlayNavActive: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
toggleIsOverlayNavActive: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const refNav = ref()
|
||||
const { width: windowWidth } = useWindowSize()
|
||||
const isHovered = useElementHover(refNav)
|
||||
|
||||
provide(injectionKeyIsVerticalNavHovered, isHovered)
|
||||
|
||||
const {
|
||||
isVerticalNavCollapsed: isCollapsed,
|
||||
isLessThanOverlayNavBreakpoint,
|
||||
isVerticalNavMini,
|
||||
isAppRtl,
|
||||
} = useLayouts()
|
||||
|
||||
const hideTitleAndIcon = isVerticalNavMini(windowWidth, isHovered)
|
||||
|
||||
const resolveNavItemComponent = item => {
|
||||
if ('heading' in item)
|
||||
return VerticalNavSectionTitle
|
||||
if ('children' in item)
|
||||
return VerticalNavGroup
|
||||
|
||||
return VerticalNavLink
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
watch(() => route.name, () => {
|
||||
props.toggleIsOverlayNavActive(false)
|
||||
})
|
||||
|
||||
const isVerticalNavScrolled = ref(false)
|
||||
const updateIsVerticalNavScrolled = val => isVerticalNavScrolled.value = val
|
||||
|
||||
const handleNavScroll = evt => {
|
||||
isVerticalNavScrolled.value = evt.target.scrollTop > 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Component
|
||||
:is="props.tag"
|
||||
ref="refNav"
|
||||
class="layout-vertical-nav"
|
||||
:class="[
|
||||
{
|
||||
'overlay-nav': isLessThanOverlayNavBreakpoint(windowWidth),
|
||||
'hovered': isHovered,
|
||||
'visible': isOverlayNavActive,
|
||||
'scrolled': isVerticalNavScrolled,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="nav-header">
|
||||
<slot name="nav-header">
|
||||
<a
|
||||
href="/"
|
||||
class="app-logo d-flex align-center gap-x-3 app-title-wrapper"
|
||||
>
|
||||
<VNodeRenderer :nodes="config.app.logo" />
|
||||
|
||||
<Transition name="vertical-nav-app-title">
|
||||
<h1
|
||||
v-show="!hideTitleAndIcon"
|
||||
class="app-title font-weight-bold text-capitalize leading-normal text-xl"
|
||||
>
|
||||
{{ config.app.title }}
|
||||
</h1>
|
||||
</Transition>
|
||||
</a>
|
||||
<!-- 👉 Vertical nav actions -->
|
||||
<!-- Show toggle collapsible in >md and close button in <md -->
|
||||
<template v-if="!isLessThanOverlayNavBreakpoint(windowWidth)">
|
||||
<Component
|
||||
:is="config.app.iconRenderer || 'div'"
|
||||
v-show="isCollapsed && !hideTitleAndIcon"
|
||||
class="header-action"
|
||||
v-bind="config.icons.verticalNavUnPinned"
|
||||
@click="isCollapsed = !isCollapsed"
|
||||
/>
|
||||
<Component
|
||||
:is="config.app.iconRenderer || 'div'"
|
||||
v-show="!isCollapsed && !hideTitleAndIcon"
|
||||
class="header-action"
|
||||
v-bind="config.icons.verticalNavPinned"
|
||||
@click="isCollapsed = !isCollapsed"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Component
|
||||
:is="config.app.iconRenderer || 'div'"
|
||||
class="header-action"
|
||||
v-bind="config.icons.close"
|
||||
@click="toggleIsOverlayNavActive(false)"
|
||||
/>
|
||||
</template>
|
||||
</slot>
|
||||
</div>
|
||||
<slot name="before-nav-items">
|
||||
<div class="vertical-nav-items-shadow" />
|
||||
</slot>
|
||||
<slot
|
||||
name="nav-items"
|
||||
:update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled"
|
||||
>
|
||||
<PerfectScrollbar
|
||||
:key="isAppRtl"
|
||||
tag="ul"
|
||||
class="nav-items"
|
||||
:options="{ wheelPropagation: false }"
|
||||
@ps-scroll-y="handleNavScroll"
|
||||
>
|
||||
<Component
|
||||
:is="resolveNavItemComponent(item)"
|
||||
v-for="(item, index) in navItems"
|
||||
:key="index"
|
||||
:item="item"
|
||||
/>
|
||||
</PerfectScrollbar>
|
||||
</slot>
|
||||
</Component>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@layouts/styles/mixins";
|
||||
|
||||
// 👉 Vertical Nav
|
||||
.layout-vertical-nav {
|
||||
position: fixed;
|
||||
z-index: variables.$layout-vertical-nav-z-index;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
block-size: 100%;
|
||||
inline-size: variables.$layout-vertical-nav-width;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
transition: transform 0.25s ease-in-out, inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
|
||||
will-change: transform, inline-size;
|
||||
|
||||
.nav-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.app-title-wrapper {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
block-size: 100%;
|
||||
|
||||
// ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
|
||||
// overflow-x: hidden;
|
||||
|
||||
// // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
|
||||
// overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-item-title {
|
||||
overflow: hidden;
|
||||
margin-inline-end: auto;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 👉 Collapsed
|
||||
.layout-vertical-nav-collapsed & {
|
||||
&:not(.hovered) {
|
||||
inline-size: variables.$layout-vertical-nav-collapsed-width;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Overlay nav
|
||||
&.overlay-nav {
|
||||
&:not(.visible) {
|
||||
transform: translateX(-#{variables.$layout-vertical-nav-width});
|
||||
|
||||
@include mixins.rtl {
|
||||
transform: translateX(variables.$layout-vertical-nav-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,180 @@
|
||||
<script setup>
|
||||
import {
|
||||
injectionKeyIsVerticalNavHovered,
|
||||
useLayouts,
|
||||
} from '@layouts'
|
||||
import {
|
||||
TransitionExpand,
|
||||
VerticalNavLink,
|
||||
} from '@layouts/components'
|
||||
import { config } from '@layouts/config'
|
||||
import { canViewNavMenuGroup } from '@layouts/plugins/casl'
|
||||
import {
|
||||
isNavGroupActive,
|
||||
openGroups,
|
||||
} from '@layouts/utils'
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
defineOptions({ name: 'VerticalNavGroup' })
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { width: windowWidth } = useWindowSize()
|
||||
const { isVerticalNavMini, dynamicI18nProps } = useLayouts()
|
||||
const hideTitleAndBadge = isVerticalNavMini(windowWidth)
|
||||
const isVerticalNavHovered = inject(injectionKeyIsVerticalNavHovered, ref(false))
|
||||
|
||||
// })
|
||||
const isGroupActive = ref(false)
|
||||
const isGroupOpen = ref(false)
|
||||
|
||||
const isAnyChildOpen = children => {
|
||||
return children.some(child => {
|
||||
let result = openGroups.value.includes(child.title)
|
||||
if ('children' in child)
|
||||
result = isAnyChildOpen(child.children) || result
|
||||
|
||||
return result
|
||||
})
|
||||
}
|
||||
|
||||
const collapseChildren = children => {
|
||||
children.forEach(child => {
|
||||
if ('children' in child)
|
||||
collapseChildren(child.children)
|
||||
openGroups.value = openGroups.value.filter(group => group !== child.title)
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => route.path, () => {
|
||||
const isActive = isNavGroupActive(props.item.children, router)
|
||||
|
||||
// Don't open group if vertical nav is collapsed and window size is more than overlay nav breakpoint
|
||||
isGroupOpen.value = isActive && !isVerticalNavMini(windowWidth, isVerticalNavHovered).value
|
||||
isGroupActive.value = isActive
|
||||
}, { immediate: true })
|
||||
watch(isGroupOpen, val => {
|
||||
|
||||
// Find group index for adding/removing group from openGroups array
|
||||
const grpIndex = openGroups.value.indexOf(props.item.title)
|
||||
|
||||
// If group is opened => Add it to `openGroups` array
|
||||
if (val && grpIndex === -1) {
|
||||
openGroups.value.push(props.item.title)
|
||||
} else if (!val && grpIndex !== -1) {
|
||||
openGroups.value.splice(grpIndex, 1)
|
||||
collapseChildren(props.item.children)
|
||||
}
|
||||
}, { immediate: true })
|
||||
watch(openGroups, val => {
|
||||
|
||||
// Prevent closing recently opened inactive group.
|
||||
const lastOpenedGroup = val.at(-1)
|
||||
if (lastOpenedGroup === props.item.title)
|
||||
return
|
||||
const isActive = isNavGroupActive(props.item.children, router)
|
||||
|
||||
// Goal of this watcher is to close inactive groups. So don't do anything for active groups.
|
||||
if (isActive)
|
||||
return
|
||||
|
||||
// We won't close group if any of child group is open in current group
|
||||
if (isAnyChildOpen(props.item.children))
|
||||
return
|
||||
isGroupOpen.value = isActive
|
||||
isGroupActive.value = isActive
|
||||
}, { deep: true })
|
||||
|
||||
// ℹ️ Previously instead of below watcher we were using two individual watcher for `isVerticalNavHovered`, `isVerticalNavCollapsed` & `isLessThanOverlayNavBreakpoint`
|
||||
watch(isVerticalNavMini(windowWidth, isVerticalNavHovered), val => {
|
||||
isGroupOpen.value = val ? false : isGroupActive.value
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
v-if="canViewNavMenuGroup(item)"
|
||||
class="nav-group"
|
||||
:class="[
|
||||
{
|
||||
active: isGroupActive,
|
||||
open: isGroupOpen,
|
||||
disabled: item.disable,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div
|
||||
class="nav-group-label"
|
||||
@click="isGroupOpen = !isGroupOpen"
|
||||
>
|
||||
<Component
|
||||
:is="config.app.iconRenderer || 'div'"
|
||||
v-bind="item.icon || config.verticalNav.defaultNavItemIconProps"
|
||||
class="nav-item-icon"
|
||||
/>
|
||||
<TransitionGroup name="transition-slide-x">
|
||||
<!-- 👉 Title -->
|
||||
<Component
|
||||
:is=" config.app.enableI18n ? 'i18n-t' : 'span'"
|
||||
v-bind="dynamicI18nProps(item.title, 'span')"
|
||||
v-show="!hideTitleAndBadge"
|
||||
key="title"
|
||||
class="nav-item-title"
|
||||
>
|
||||
{{ item.title }}
|
||||
</Component>
|
||||
|
||||
<!-- 👉 Badge -->
|
||||
<Component
|
||||
:is="config.app.enableI18n ? 'i18n-t' : 'span'"
|
||||
v-bind="dynamicI18nProps(item.badgeContent, 'span')"
|
||||
v-show="!hideTitleAndBadge"
|
||||
v-if="item.badgeContent"
|
||||
key="badge"
|
||||
class="nav-item-badge"
|
||||
:class="item.badgeClass"
|
||||
>
|
||||
{{ item.badgeContent }}
|
||||
</Component>
|
||||
<Component
|
||||
:is="config.app.iconRenderer || 'div'"
|
||||
v-show="!hideTitleAndBadge"
|
||||
v-bind="config.icons.chevronRight"
|
||||
key="arrow"
|
||||
class="nav-group-arrow"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
<TransitionExpand>
|
||||
<ul
|
||||
v-show="isGroupOpen"
|
||||
class="nav-group-children"
|
||||
>
|
||||
<Component
|
||||
:is="'children' in child ? 'VerticalNavGroup' : VerticalNavLink"
|
||||
v-for="child in item.children"
|
||||
:key="child.title"
|
||||
:item="child"
|
||||
/>
|
||||
</ul>
|
||||
</TransitionExpand>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-vertical-nav {
|
||||
.nav-group {
|
||||
&-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<script>
|
||||
import { useLayouts } from '@layouts'
|
||||
import { VerticalNav } from '@layouts/components'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
navItems: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
verticalNavAttrs: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const { y: windowScrollY } = useWindowScroll()
|
||||
const { width: windowWidth } = useWindowSize()
|
||||
const { _layoutClasses: layoutClasses, isLessThanOverlayNavBreakpoint, isNavbarBlurEnabled } = useLayouts()
|
||||
const isOverlayNavActive = ref(false)
|
||||
const isLayoutOverlayVisible = ref(false)
|
||||
const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
|
||||
|
||||
|
||||
// ℹ️ This is alternative to below two commented watcher
|
||||
// We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
|
||||
syncRef(isOverlayNavActive, isLayoutOverlayVisible)
|
||||
|
||||
// watch(isOverlayNavActive, value => {
|
||||
// // Sync layout overlay with overlay nav
|
||||
// isLayoutOverlayVisible.value = value
|
||||
// })
|
||||
// watch(isLayoutOverlayVisible, value => {
|
||||
// // If overlay is closed via click, close hide overlay nav
|
||||
// if (!value) isOverlayNavActive.value = false
|
||||
// })
|
||||
// ℹ️ Hide overlay if user open overlay nav in <md and increase the window width without closing overlay nav
|
||||
watch(windowWidth, value => {
|
||||
if (!isLessThanOverlayNavBreakpoint.value(value) && isLayoutOverlayVisible.value)
|
||||
isLayoutOverlayVisible.value = false
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const shallShowPageLoading = ref(false)
|
||||
|
||||
return () => {
|
||||
const verticalNavAttrs = toRef(props, 'verticalNavAttrs')
|
||||
const { wrapper: verticalNavWrapper, wrapperProps: verticalNavWrapperProps, ...additionalVerticalNavAttrs } = verticalNavAttrs.value
|
||||
|
||||
|
||||
// 👉 Vertical nav
|
||||
const verticalNav = h(VerticalNav, { isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive, navItems: props.navItems, ...additionalVerticalNavAttrs }, {
|
||||
'nav-header': () => slots['vertical-nav-header']?.(),
|
||||
'before-nav-items': () => slots['before-vertical-nav-items']?.(),
|
||||
})
|
||||
|
||||
|
||||
// 👉 Navbar
|
||||
const navbar = h('header', { class: ['layout-navbar', { 'navbar-blur': isNavbarBlurEnabled.value }] }, [
|
||||
h('div', { class: 'navbar-content-container' }, slots.navbar?.({
|
||||
toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
|
||||
})),
|
||||
])
|
||||
|
||||
|
||||
// 👉 Content area
|
||||
let mainChildren = slots.default?.()
|
||||
|
||||
// 💡 Only show loading and attach `beforeEach` & `afterEach` hooks if `content-loading` slot is used
|
||||
if (slots['content-loading']) {
|
||||
router.beforeEach(() => {
|
||||
console.info('setting to true')
|
||||
shallShowPageLoading.value = true
|
||||
})
|
||||
router.afterEach(() => {
|
||||
console.info('setting to false')
|
||||
shallShowPageLoading.value = false
|
||||
})
|
||||
mainChildren = shallShowPageLoading.value ? slots['content-loading']?.() : slots.default?.()
|
||||
}
|
||||
const main = h('main', { class: 'layout-page-content' }, h('div', { class: 'page-content-container' }, mainChildren))
|
||||
|
||||
|
||||
// 👉 Footer
|
||||
const footer = h('footer', { class: 'layout-footer' }, [
|
||||
h('div', { class: 'footer-content-container' }, slots.footer?.()),
|
||||
])
|
||||
|
||||
|
||||
// 👉 Overlay
|
||||
const layoutOverlay = h('div', {
|
||||
class: ['layout-overlay', { visible: isLayoutOverlayVisible.value }],
|
||||
onClick: () => { isLayoutOverlayVisible.value = !isLayoutOverlayVisible.value },
|
||||
})
|
||||
|
||||
return h('div', { class: ['layout-wrapper', ...layoutClasses.value(windowWidth.value, windowScrollY.value)] }, [
|
||||
verticalNavWrapper ? h(verticalNavWrapper, verticalNavWrapperProps, { default: () => verticalNav }) : verticalNav,
|
||||
h('div', { class: 'layout-content-wrapper' }, [
|
||||
navbar,
|
||||
main,
|
||||
footer,
|
||||
]),
|
||||
layoutOverlay,
|
||||
])
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@layouts/styles/placeholders";
|
||||
@use "@layouts/styles/mixins";
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
// TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
|
||||
block-size: 100%;
|
||||
|
||||
.layout-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||
transition: padding-inline-start 0.2s ease-in-out;
|
||||
will-change: padding-inline-start;
|
||||
}
|
||||
|
||||
.layout-navbar {
|
||||
z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
|
||||
|
||||
.navbar-content-container {
|
||||
block-size: variables.$layout-vertical-nav-navbar-height;
|
||||
}
|
||||
|
||||
@at-root {
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
.layout-navbar {
|
||||
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||
@include mixins.boxed-content;
|
||||
} @else {
|
||||
.navbar-content-container {
|
||||
@include mixins.boxed-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-navbar-sticky .layout-navbar {
|
||||
@extend %layout-navbar-sticky;
|
||||
}
|
||||
|
||||
&.layout-navbar-hidden .layout-navbar {
|
||||
@extend %layout-navbar-hidden;
|
||||
}
|
||||
|
||||
// 👉 Footer
|
||||
.layout-footer {
|
||||
@include mixins.boxed-content;
|
||||
}
|
||||
|
||||
// 👉 Layout overlay
|
||||
.layout-overlay {
|
||||
position: fixed;
|
||||
z-index: variables.$layout-overlay-z-index;
|
||||
background-color: rgb(0 0 0 / 60%);
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
will-change: transform;
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.layout-overlay-nav) .layout-content-wrapper {
|
||||
padding-inline-start: variables.$layout-vertical-nav-width;
|
||||
}
|
||||
|
||||
// Adjust right column pl when vertical nav is collapsed
|
||||
&.layout-vertical-nav-collapsed .layout-content-wrapper {
|
||||
padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
|
||||
}
|
||||
|
||||
// 👉 Content height fixed
|
||||
&.layout-content-height-fixed {
|
||||
.layout-content-wrapper {
|
||||
max-block-size: calc(var(--vh) * 100);
|
||||
}
|
||||
|
||||
.layout-page-content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
.page-content-container {
|
||||
inline-size: 100%;
|
||||
|
||||
> :first-child {
|
||||
max-block-size: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script setup>
|
||||
import { useLayouts } from '@layouts'
|
||||
import { config } from '@layouts/config'
|
||||
import { can } from '@layouts/plugins/casl'
|
||||
import {
|
||||
getComputedNavLinkToProp,
|
||||
isNavLinkActive,
|
||||
} from '@layouts/utils'
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { width: windowWidth } = useWindowSize()
|
||||
const { isVerticalNavMini, dynamicI18nProps } = useLayouts()
|
||||
const hideTitleAndBadge = isVerticalNavMini(windowWidth)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
v-if="can(item.action, item.subject)"
|
||||
class="nav-link"
|
||||
:class="{ disabled: item.disable }"
|
||||
>
|
||||
<Component
|
||||
:is="item.to ? 'RouterLink' : 'a'"
|
||||
v-bind="getComputedNavLinkToProp(item)"
|
||||
:class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }"
|
||||
>
|
||||
<Component
|
||||
:is="config.app.iconRenderer || 'div'"
|
||||
v-bind="item.icon || config.verticalNav.defaultNavItemIconProps"
|
||||
class="nav-item-icon"
|
||||
/>
|
||||
<TransitionGroup name="transition-slide-x">
|
||||
<!-- 👉 Title -->
|
||||
<Component
|
||||
:is="config.app.enableI18n ? 'i18n-t' : 'span'"
|
||||
v-show="!hideTitleAndBadge"
|
||||
key="title"
|
||||
class="nav-item-title"
|
||||
v-bind="dynamicI18nProps(item.title, 'span')"
|
||||
>
|
||||
{{ item.title }}
|
||||
</Component>
|
||||
|
||||
<!-- 👉 Badge -->
|
||||
<Component
|
||||
:is="config.app.enableI18n ? 'i18n-t' : 'span'"
|
||||
v-if="item.badgeContent"
|
||||
v-show="!hideTitleAndBadge"
|
||||
key="badge"
|
||||
class="nav-item-badge"
|
||||
:class="item.badgeClass"
|
||||
v-bind="dynamicI18nProps(item.badgeContent, 'span')"
|
||||
>
|
||||
{{ item.badgeContent }}
|
||||
</Component>
|
||||
</TransitionGroup>
|
||||
</Component>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-vertical-nav {
|
||||
.nav-link a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { useLayouts } from '@layouts'
|
||||
import { config } from '@layouts/config'
|
||||
import { can } from '@layouts/plugins/casl'
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { isVerticalNavMini, dynamicI18nProps } = useLayouts()
|
||||
const { width: windowWidth } = useWindowSize()
|
||||
const shallRenderIcon = isVerticalNavMini(windowWidth)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
v-if="can(item.action, item.subject)"
|
||||
class="nav-section-title"
|
||||
>
|
||||
<div class="title-wrapper">
|
||||
<Transition
|
||||
name="vertical-nav-section-title"
|
||||
mode="out-in"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
|
||||
<Component
|
||||
:is="shallRenderIcon ? config.app.iconRenderer : config.app.enableI18n ? 'i18n-t' : 'span'"
|
||||
:key="shallRenderIcon"
|
||||
:class="shallRenderIcon ? 'placeholder-icon' : 'title-text'"
|
||||
v-bind="{ ...config.icons.sectionTitlePlaceholder, ...dynamicI18nProps(item.heading, 'span') }"
|
||||
v-text="!shallRenderIcon ? item.heading : null"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
|
||||
</Transition>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
Reference in New Issue
Block a user