修复header问题

Author: CSBigCaptain

app/assets/css/global.less

@@ -18,6 +18,9 @@ li {
   font-variation-settings: 'wght' 480;
   letter-spacing: 0.015rem;
   word-spacing: 0.1rem;
+
+  --mdui-breakpoint-md: 767px;
+  --mdui-breakpoint-sm: 424px;
 }
 
 body {
@@ -65,8 +68,9 @@ pre {
 }
 
 mdui-top-app-bar,
-.footer {
-  color: var(--bar-text-color);
+footer {
+  color: rgb(var(--mdui-color-on-surface-variant));
+  background-color: rgb(var(--mdui-color-surface-variant));
 }
 
 .body {

app/components/DefaultNav.vue

@@ -1,6 +1,6 @@
 <template>
-  <ClientOnly>
-    <mdui-top-app-bar style="position: fixed">
+  <header class="header" style="position: fixed; top: 0; left: 0; right: 0">
+    <mdui-top-app-bar>
       <mdui-button-icon @click="$emit('open-drawer')">
         <mdui-icon-menu></mdui-icon-menu>
       </mdui-button-icon>
@@ -14,10 +14,10 @@
         <NavDarkChangeButton />
         <NavChangeWebColor />
         <NavShareButton />
-        <!-- <NavMoreButton /> -->
+        <NavMoreButton />
       </div>
     </mdui-top-app-bar>
-  </ClientOnly>
+  </header>
 </template>
 
 <script lang="ts" setup>
@@ -32,11 +32,12 @@ import '@mdui/icons/share.js'
 </script>
 
 <style scoped>
-mdui-top-app-bar {
+.header {
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
-  background-color: rgb(var(--mdui-color-surface-variant));
+  position: fixed;
+  height: 64px;
 }
 </style>

app/components/navigation-drawer/List.vue

@@ -20,6 +20,10 @@ const list = data.value[0].meta.body
 </script>
 
 <style scoped>
+mdui-list {
+  padding-top: 64px;
+}
+
 mdui-list-item {
   padding-left: 4px;
 }

app/layouts/Default.vue

@@ -3,15 +3,17 @@
     <DefaultNav @open-drawer="toggleDrawer">
       <template #topic-text><slot name="topic-text" /></template>
     </DefaultNav>
-    <mdui-navigation-drawer
-      modal
-      close-on-overlay-click
-      close-on-esc
-      :open="drawerStatus"
-      @close="drawerStatus = false"
-    >
-      <NavigationDrawerList />
-    </mdui-navigation-drawer>
+    <aside>
+      <mdui-navigation-drawer
+        modal
+        close-on-overlay-click
+        close-on-esc
+        :open="drawerStatus"
+        @close="drawerStatus = false"
+      >
+        <NavigationDrawerList />
+      </mdui-navigation-drawer>
+    </aside>
     <mdui-layout-main>
       <slot name="full-width"></slot>
       <AppContainer>
@@ -37,26 +39,21 @@ useHead({
     },
   ],
 })
-
-useSeoMeta({
-  ogImage: '/__og-image__/static/og.png',
-})
 </script>
 
 <style lang="less" scoped>
 mdui-layout {
   scroll-behavior: smooth;
   min-width: 320px;
-  overflow: hidden;
-  position: relative;
 }
 // top-app-bar 的 z-index 值为100
 // navigation-drawer 的 z-index 值为99
+
+aside {
+  z-index: 99;
+}
+
 mdui-navigation-drawer {
   --shape-corner: 0px;
-  --z-index: 99;
-  mdui-list {
-    padding-top: 64px;
-  }
 }
 </style>