aboutsummaryrefslogtreecommitdiff
path: root/src/components/MenuLayout.vue
diff options
context:
space:
mode:
authorGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2022-04-15 12:21:09 +0200
committerGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2022-04-15 12:21:09 +0200
commit1e67fa6e0bede8c055d9e4cb9bf7f97423bc9bdf (patch)
tree5b7874b3258b6872966b8453839cb72317c494e2 /src/components/MenuLayout.vue
parentf872972e69aeb4fde4c17f0c122ca3fd4aa1c56c (diff)
downloadit-tools-1e67fa6e0bede8c055d9e4cb9bf7f97423bc9bdf.tar.gz
it-tools-1e67fa6e0bede8c055d9e4cb9bf7f97423bc9bdf.tar.zst
it-tools-1e67fa6e0bede8c055d9e4cb9bf7f97423bc9bdf.zip
feat: mobile friendly menu
Diffstat (limited to 'src/components/MenuLayout.vue')
-rw-r--r--src/components/MenuLayout.vue47
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