diff options
Diffstat (limited to 'src/components/MenuLayout.vue')
| -rw-r--r-- | src/components/MenuLayout.vue | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/src/components/MenuLayout.vue b/src/components/MenuLayout.vue new file mode 100644 index 0000000..48150c1 --- /dev/null +++ b/src/components/MenuLayout.vue @@ -0,0 +1,47 @@ +<template> + <n-layout has-sider> + <n-layout-sider bordered collapse-mode="width" :collapsed-width="0" :width="240" :collapsed="isMenuCollapsed" + @collapse="isMenuCollapsed = true" @expand="isMenuCollapsed = false" :show-trigger="false" + :native-scrollbar="false" :position="siderPosition"> + <slot name="sider" /> + </n-layout-sider> + <n-layout class="content"> + <slot name="content" /> + <div class="overlay" v-show="isSmallScreen && !isMenuCollapsed" @click="isMenuCollapsed = true" /> + </n-layout> + </n-layout> +</template> + +<script setup lang="ts"> +import { useStyleStore } from '@/stores/style.store'; +import { toRefs } from 'vue'; +import { computed } from 'vue'; + +const styleStore = useStyleStore() +const { isMenuCollapsed, isSmallScreen } = toRefs(styleStore) +const siderPosition = computed(() => isSmallScreen.value ? 'absolute' : 'static') +</script> + +<style lang="less" scoped> +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #00000080; + cursor: pointer; +} + +.content { + + // background-color: #f1f5f9; + ::v-deep(.n-layout-scroll-container) { + padding: 26px; + } +} + +.n-layout { + height: 100vh; +} +</style>
\ No newline at end of file |