feat(projects): add horizontal menu

.vscode/settings.json

@@ -26,6 +26,7 @@
     "ofetch",
     "preflights",
     "sider",
+    "simplebar",
     "tada",
     "Uncapitalize",
     "unocss",

packages/materials/package.json

@@ -12,7 +12,8 @@
     }
   },
   "dependencies": {
-    "@sa/utils": "workspace:*"
+    "@sa/utils": "workspace:*",
+    "simplebar-vue": "2.3.3"
   },
   "devDependencies": {
     "typed-css-modules": "0.8.0"

packages/materials/src/index.ts

@@ -1,5 +1,6 @@
 import AdminLayout from './libs/admin-layout';
 import PageTab from './libs/page-tab';
+import SimpleScrollbar from './libs/simple-scrollbar';
 
-export { AdminLayout, PageTab };
+export { AdminLayout, PageTab, SimpleScrollbar };
 export * from './types';

packages/materials/src/libs/simple-scrollbar/index.ts

@@ -0,0 +1,3 @@
+import SimpleScrollbar from './index.vue';
+
+export default SimpleScrollbar;

packages/materials/src/libs/simple-scrollbar/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import Simplebar from 'simplebar-vue';
+import 'simplebar-vue/dist/simplebar.min.css';
+
+defineOptions({
+  name: 'SimpleScrollbar'
+});
+</script>
+
+<template>
+  <Simplebar class="h-full">
+    <slot />
+  </Simplebar>
+</template>
+
+<style scoped></style>

src/layouts/base-layout/index.vue

@@ -23,17 +23,87 @@ const layoutMode = computed(() => {
   const horizontal: LayoutMode = 'horizontal';
   return themeStore.layout.mode.includes(vertical) ? vertical : horizontal;
 });
+
+const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
+  vertical: {
+    showLogo: false,
+    showMenu: false,
+    showMenuToggler: true
+  },
+  'vertical-mix': {
+    showLogo: false,
+    showMenu: false,
+    showMenuToggler: false
+  },
+  horizontal: {
+    showLogo: true,
+    showMenu: true,
+    showMenuToggler: false
+  },
+  'horizontal-mix': {
+    showLogo: true,
+    showMenu: false,
+    showMenuToggler: true
+  }
+};
+
+const headerProps = computed(() => headerPropsConfig[themeStore.layout.mode]);
+
+const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');
+
+const siderWidth = computed(() => getSiderWidth());
+
+const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());
+
+function getSiderWidth() {
+  const { width, mixedWidth, mixedChildMenuWidth } = themeStore.sider;
+
+  const isVerticalMix = themeStore.layout.mode === 'vertical-mix';
+
+  let w = isVerticalMix ? mixedWidth : width;
+
+  if (isVerticalMix && appStore.mixedSiderFixed) {
+    w += mixedChildMenuWidth;
+  }
+
+  return w;
+}
+
+function getSiderCollapsedWidth() {
+  const { collapsedWidth, mixedCollapsedWidth, mixedChildMenuWidth } = themeStore.sider;
+
+  const isVerticalMix = themeStore.layout.mode === 'vertical-mix';
+
+  let w = isVerticalMix ? mixedCollapsedWidth : collapsedWidth;
+
+  if (isVerticalMix && appStore.mixedSiderFixed) {
+    w += mixedChildMenuWidth;
+  }
+
+  return w;
+}
 </script>
 
 <template>
   <AdminLayout
     v-model:sider-collapse="appStore.siderCollapse"
     :mode="layoutMode"
+    :scroll-mode="themeStore.layout.scrollMode"
     :is-mobile="appStore.isMobile"
     :full-content="appStore.fullContent"
+    :fixed-top="themeStore.fixedHeaderAndTab"
+    :header-height="themeStore.header.height"
+    :tab-visible="themeStore.tab.visible"
+    :tab-height="themeStore.tab.height"
+    :sider-visible="siderVisible"
+    :sider-width="siderWidth"
+    :sider-collapsed-width="siderCollapsedWidth"
+    :footer-visible="themeStore.footer.visible"
+    :fixed-footer="themeStore.footer.fixed"
+    :right-footer="themeStore.footer.floatRight"
   >
     <template #header>
-      <GlobalHeader />
+      <GlobalHeader v-bind="headerProps" />
     </template>
     <template #tab>
       <GlobalTab />

src/layouts/modules/global-header/index.vue

@@ -2,6 +2,8 @@
 import { useFullscreen } from '@vueuse/core';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
+import HorizontalMenu from '../global-menu/base-menu.vue';
+import GlobalLogo from '../global-logo/index.vue';
 import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
 import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';
@@ -13,12 +15,38 @@ const { isFullscreen, toggle } = useFullscreen();
 defineOptions({
   name: 'GlobalHeader'
 });
+
+interface Props {
+  /**
+   * whether to show the logo
+   */
+  showLogo?: App.Global.HeaderProps['showLogo'];
+  /**
+   * whether to show the menu toggler
+   */
+  showMenuToggler?: App.Global.HeaderProps['showMenuToggler'];
+  /**
+   * whether to show the menu
+   */
+  showMenu?: App.Global.HeaderProps['showMenu'];
+}
+
+defineProps<Props>();
 </script>
 
 <template>
   <DarkModeContainer class="flex-y-center h-full shadow-header">
-    <div class="flex-1-hidden flex-y-center h-full">
-      <MenuToggler :collapsed="appStore.siderCollapse" class="mr-12px" @click="appStore.toggleSiderCollapse" />
+    <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
+    <div v-if="showMenu" class="flex-1-hidden h-full px-12px">
+      <HorizontalMenu :dark-theme="themeStore.sider.inverted" mode="horizontal" />
+    </div>
+    <div v-else class="flex-1-hidden flex-y-center h-full">
+      <MenuToggler
+        v-if="showMenuToggler"
+        :collapsed="appStore.siderCollapse"
+        class="mr-12px"
+        @click="appStore.toggleSiderCollapse"
+      />
       <GlobalBreadcrumb v-if="!appStore.isMobile" />
     </div>
     <div class="flex-y-center justify-end h-full">

src/layouts/modules/global-logo/index.vue

@@ -9,10 +9,12 @@ interface Props {
   /**
    * whether to show the title
    */
-  showTitle: boolean;
+  showTitle?: boolean;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+  showTitle: true
+});
 </script>
 
 <template>