feat: mobile friendly menu

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