refactor: sidebar

apps/admin/src/layouts/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Menu from "./menu/index.vue";
 import Footer from "./footer/index.vue";
 import Header from "./header/index.vue";
 import Content from "./content/index.vue";
 import SearchDialog from "~/component/SearchDialog/src/SearchDialog.vue";
+import SidebarLayout from "~/layouts/sidebar/index.vue";
 
 defineOptions({
   name: "Layout",
@@ -12,8 +12,8 @@ defineOptions({
 
 <template>
   <NEl tag="div" class="flex flex-row flex-1 h-full w-full min-w-[970px]">
-    <div class="w-auto">
-      <Menu />
+    <div>
+      <SidebarLayout />
     </div>
     <div class="flex flex-col flex-1 h-full w-full min-w-[970px]">
       <header class="">

apps/admin/src/layouts/menu/index.vue → apps/admin/src/layouts/sidebar/components/Menu.vue

@@ -5,7 +5,6 @@ import { mapTreeStructure } from "@celeris/utils";
 import type { RouteLocationNormalizedLoaded } from "vue-router";
 import { RouterLink } from "vue-router";
 import { useI18n } from "vue-i18n";
-import { useMenuSetting } from "~/composables/setting/useMenuSetting";
 import { REDIRECT_NAME } from "~/router/constant";
 import { getMenus } from "~/router/menus";
 import { listenToRouteChange } from "~/router/mitt/routeChange";
@@ -14,10 +13,18 @@ import { usePermissionStore } from "~/store/modules/permission";
 defineOptions({
   name: "MenuLayout",
 });
+const props = withDefaults(
+  defineProps<{
+    mode?: "vertical" | "horizontal";
+    collapsed?: boolean;
+  }>(),
+  { mode: "vertical", collapsed: false },
+);
+const { mode, collapsed } = toRefs(props);
+
 const { te, t } = useI18n();
 const activeMenu = ref();
 const permissionStore = usePermissionStore();
-const isCollapse = useMenuSetting().getCollapsed;
 const { currentRoute } = useRouter();
 const menuList = ref<any[]>([]);
 
@@ -76,18 +83,21 @@ watch(
     immediate: true,
   },
 );
+const collapsedWidth = computed<number>(() => collapsed ? 64 : 300);
 </script>
 
 <template>
-  <div :class="isCollapse ? 'w-16' : 'w-75'" class="transition-width h-full shrink-0 flex-col overflow-hidden duration-75 lg:flex">
-    <div class="my-auto flex h-16">
-      <CAAppLogo :show-title="!isCollapse" />
-    </div>
-    <NScrollbar class="overflow-hidden">
-      <NMenu v-model:value="activeMenu" :collapsed="isCollapse" :options="menuList" />
+  <div :class="collapsed ? 'w-16' : 'w-75'" class="transition-width h-full shrink-0 flex-col overflow-hidden duration-75">
+    <NScrollbar>
+      <NMenu
+        v-model:value="activeMenu"
+        :collapsed="collapsed"
+        :collapsed-width="collapsedWidth"
+        :mode="mode" :options="menuList"
+      />
     </NScrollbar>
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 </style>

apps/admin/src/layouts/sidebar/components/SidebarFooter.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+defineOptions({
+  name: "SidebarFooter",
+});
+
+withDefaults(
+  defineProps<{
+    collapsed?: boolean;
+  }>(),
+  { collapsed: false },
+);
+</script>
+
+<template>
+  <div class="sidebar-footer" :class="{ collapsed }" />
+</template>
+
+<style scoped>
+
+</style>

apps/admin/src/layouts/sidebar/components/SidebarHeader.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+defineOptions({
+  name: "SidebarHeader",
+});
+
+const props = defineProps<{
+  collapsed?: boolean;
+}>();
+const { collapsed } = toRefs(props);
+</script>
+
+<template>
+  <div class="my-auto flex h-16">
+    <CAAppLogo :show-title="!collapsed" />
+  </div>
+</template>
+
+<style scoped>
+</style>

apps/admin/src/layouts/sidebar/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import SidebarHeader from "./components/SidebarHeader.vue";
+import SidebarFooter from "./components/SidebarFooter.vue";
+import { useMenuSetting } from "~/composables";
+import MenuLayout from "~/layouts/sidebar/components/Menu.vue";
+
+defineOptions({
+  name: "SidebarLayout",
+});
+
+const isCollapse = useMenuSetting().getCollapsed;
+
+const sidebar = ref(null);
+</script>
+
+<template>
+  <aside
+    id="sidebar"
+    class="sidebar flex flex-col"
+    :class="{ collapsed: isCollapse, opened: !isCollapse }"
+  >
+    <div ref="sidebar" class="sidebar-wrap grow flex flex-col">
+      <SidebarHeader :collapsed="isCollapse" />
+      <NScrollbar>
+        <MenuLayout :collapsed="isCollapse" />
+      </NScrollbar>
+      <SidebarFooter :collapsed="isCollapse" />
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+
+</style>

apps/admin/src/pages/dashboard/index.vue

@@ -8,5 +8,5 @@ defineOptions({
   <div class="w-100 h-100 rounded-2xl bg-red-500" />
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 </style>

packages/web/components/Application/src/AppLogo.vue

@@ -23,7 +23,7 @@ function goHome() {
 
 <template>
   <div :class="`text-${titleSize}`" class="flex items-center justify-center font-semibold dark:text-white" @click="goHome">
-    <img width="44" height="44" :src="logoImage" class="m-4 h-11" alt="Logo">
+    <img width="44" height="44" :src="logoImage" class="m-3 h-11" alt="Logo">
     <span v-show="showTitle">{{ AppName }}</span>
   </div>
 </template>