feat: add and chang nav config

Author: WRXinYue

docs/pages/reference/theme-config/nav.md

@@ -5,3 +5,5 @@ categories:
   - themeConfig
 end: true
 ---
+
+默认情况下，nav 显示 `siteConfig.title` 作为站点的标题。如果想更改导航栏上显示的内容，可以在 themeConfig.navTitle 选项中定义自定义文本。

docs/valaxy.config.ts

@@ -9,79 +9,84 @@ export default defineConfig<ThemeConfig>({
   devtools: true,
 
   themeConfig: {
-    header: {
-      favicon: false,
 
-      title: pkg.name,
+    logo: false,
+    navTitle: pkg.name,
 
-      nav: [
-        {
-          text: '主页',
-          link: '/',
-        },
-        {
-          text: '指南',
-          link: '/guide',
-          sidebar: ['getting-started', 'writing'],
-          subNav: [
-            {
-              text: '安装',
-              link: '/guide/getting-started/installation',
-            },
-            {
-              text: '更新',
-              link: '/guide/getting-started/update',
-            },
-            {
-              text: '资源处理',
-              link: '/guide/writing/asset-handling',
-            },
-            {
-              text: 'Frontmatter',
-              link: '/guide/writing/frontmatter',
-            },
-            {
-              text: '国际化',
-              link: '/guide/writing/i18n',
-            },
-            {
-              text: 'Markdown',
-              link: '/guide/writing/markdown',
-            },
-          ],
-        },
-        {
-          text: '参考',
-          link: '/reference',
-          sidebar: ['reference', 'themeConfig'],
-          subNav: [
-            {
-              text: '站点配置',
-              link: '/reference/site-config',
-            },
-            {
-              text: 'frontmatter 配置',
-              link: '/reference/frontmatter-config',
-            },
-            {
-              text: '主题配置',
-              link: '/reference/theme-config',
-              sidebar: ['themeConfig'],
-            },
-          ],
-        },
-        {
-          text: pkg.version,
-          link: 'https://github.com/WRXinYue/valaxy-theme-oceanus/releases',
-        },
-        {
-          text: '关于',
-          link: '/about',
-        },
-      ],
+    nav: [
+      {
+        text: '主页',
+        link: '/',
+      },
+      {
+        text: '指南',
+        link: '/guide',
+        sidebar: ['getting-started', 'writing'],
+        subNav: [
+          {
+            text: '安装',
+            link: '/guide/getting-started/installation',
+          },
+          {
+            text: '更新',
+            link: '/guide/getting-started/update',
+          },
+          {
+            text: '资源处理',
+            link: '/guide/writing/asset-handling',
+          },
+          {
+            text: 'Frontmatter',
+            link: '/guide/writing/frontmatter',
+          },
+          {
+            text: '国际化',
+            link: '/guide/writing/i18n',
+          },
+          {
+            text: 'Markdown',
+            link: '/guide/writing/markdown',
+          },
+        ],
+      },
+      {
+        text: '参考',
+        link: '/reference',
+        sidebar: ['reference', 'themeConfig'],
+        subNav: [
+          {
+            text: '站点配置',
+            link: '/reference/site-config',
+          },
+          {
+            text: 'frontmatter 配置',
+            link: '/reference/frontmatter-config',
+          },
+          {
+            text: '主题配置',
+            link: '/reference/theme-config',
+            sidebar: ['themeConfig'],
+          },
+        ],
+      },
+      {
+        text: pkg.version,
+        link: 'https://github.com/WRXinYue/valaxy-theme-oceanus/releases',
+      },
+      {
+        text: '关于',
+        link: '/about',
+      },
+    ],
 
-      github: pkg.repository.url,
-    },
+    navTools: [
+      ['togglTheme', 'toggleLocale'],
+      [{
+        icon: 'i-ri-github-fill',
+        link: pkg.repository.url,
+      }],
+      ['search'],
+    ],
 
     hero: {
       title: 'VALAXY THEME OCEANUS',

theme/components/OceanusFooter.vue

@@ -19,7 +19,7 @@ const isThisYear = computed(() => {
   <footer class="oceanus-footer">
     <div class="oceanus-home-container footer-content">
       <div class="footer-columns">
-        <template v-for="(nav, index) in themeConfig.header.nav">
+        <template v-for="(nav, index) in themeConfig.nav">
           <div v-if="nav.subNav?.length" :key="index" class="footer-column">
             <h4 class="footer-nav-title">
               {{ nav.text }}

theme/components/OceanusHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAppStore, useSiteConfig } from 'valaxy'
-import { computed, toValue } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useMatchingNavItems, useThemeConfig } from '../composables'
 
@@ -13,16 +13,16 @@ const routePath = computed(() => route.path)
 
 const matchingNavItems = useMatchingNavItems(routePath)
 
-const { favicon, nav, title } = toValue(themeConfig).header
+const { logo, nav, navTitle } = themeConfig.value
 const currentNavItem = computed(() => matchingNavItems.value.firstNavItems)
 
-const navFavicon = computed(() => {
-  if (typeof favicon === 'boolean')
-    return favicon === true ? siteConfig.value.favicon : ''
-  else if (typeof favicon === 'string')
-    return favicon
-  else if (typeof favicon === 'object')
-    return appStore.isDark ? favicon.dark : favicon.light
+const navLogo = computed(() => {
+  if (typeof logo === 'boolean')
+    return logo === true ? siteConfig.value.favicon : ''
+  else if (typeof logo === 'string')
+    return logo
+  else if (typeof logo === 'object')
+    return appStore.isDark ? logo.dark : logo.light
 
   console.error('Invalid favicon type, check ThemeConfig.header.favicon config')
   return ''
@@ -32,7 +32,7 @@ const navFavicon = computed(() => {
 <template>
   <!-- <OceanusNavBanner /> -->
   <!-- <OceanusNavToolbar /> -->
-  <OceanusNav :nav="nav" :favicon="navFavicon" :title :class="!currentNavItem?.subNav && 'fixed'" />
+  <OceanusNav :nav="nav" :favicon="navLogo" :title="navTitle" :class="!currentNavItem?.subNav && 'fixed'" />
   <div :style="{ marginTop: currentNavItem?.subNav ? 0 : 'var(--oceanus-nav-height)' }" class="nav-placeholder" />
   <OceanusSubNav v-if="currentNavItem?.subNav" :title="currentNavItem?.text" :sub-nav="currentNavItem?.subNav" :class="currentNavItem?.subNav && 'sticky'" />
 </template>

theme/components/OceanusNav.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { NavItem } from '../types'
-import { useAppStore } from 'valaxy'
-import { ref } from 'vue'
+import { useToggle } from '@vueuse/core'
 import { useThemeConfig } from '../composables'
 
 defineProps<{
@@ -11,35 +10,19 @@ defineProps<{
 }>()
 
 const themeConfig = useThemeConfig()
-const appStore = useAppStore()
 
-const isOpen = ref(false)
-// const isMobile = useMobile()
-
-function open() {
-  isOpen.value = true
-}
-
-function close() {
-  isOpen.value = false
-}
-
-function toggle() {
-  isOpen.value ? close() : open()
-}
+const [isOpen, toggle] = useToggle(false)
 </script>
 
 <template>
   <nav class="oceanus-nav" w="full" role="navigation" :class="[isOpen && 'screen-open']">
     <div class="nav-content" flex="~ items-center">
       <div class="oceanus-safe-padding nav-content-header" flex="~ center md:justify-between">
-        <OceanusNavMenu class="nav-menu left-2 z-50 absolute! md:hidden" h="full" :active="isOpen" @click="toggle" />
+        <OceanusNavMenu class="nav-menu left-2 z-50 absolute! md:hidden" h="full" :active="isOpen" @click="toggle()" />
 
-        <AppLink to="/" :aria-label="title">
-          <div class="h-30px flex text-center text-xl">
-            <img v-if="favicon" class="mr-2 object-cover" alt="logo" :src="favicon">
-            <span class="oceanus-text oceanus-nav-title md:inline">{{ title }}</span>
-          </div>
+        <AppLink to="/" :aria-label="title" class="flex text-center">
+          <img v-if="favicon" class="oceanus-nav-icon mr-2 object-cover text-xl" alt="logo" :src="favicon">
+          <span class="oceanus-text oceanus-nav-title text-xl md:inline">{{ title }}</span>
         </AppLink>
 
         <div class="items-center leading-5 <md:hidden">
@@ -55,30 +38,11 @@ function toggle() {
           </template>
         </div>
 
-        <div flex="~ center" class="<md:hidden">
-          <div flex="~ center">
-            <OceanusToggleLocale />
-
-            <div class="oceanus-nav-toolbar-text text-icon" flex="~ center">
-              <button type="button" aria-label="Toggle Dark Mode" @click="appStore.toggleDarkWithTransition">
-                <div v-if="!appStore.isDark" i-tabler-sun />
-                <div v-else i-tabler-moon />
-              </button>
-            </div>
-          </div>
-
-          <div v-if="themeConfig.header?.github" class="text-b" flex="~ center">
-            <AppLink class="oceanus-nav-toolbar-text text-icon" :to="themeConfig.header.github">
-              <div i-ri-github-fill />
-            </AppLink>
+        <slot name="toolbar">
+          <div flex="~ center" class="oceanus-nav-toolbar <md:hidden">
+            <OceanusNavTools :nav-tools="themeConfig.navTools" />
           </div>
-
-          <div class="text-b cursor-not-allowed" flex="~ center">
-            <div class="text-icon">
-              <div i-tabler-search items-center />
-            </div>
-          </div>
-        </div>
+        </slot>
       </div>
 
       <div class="search-placeholder-container absolute" w="full">
@@ -357,23 +321,4 @@ function toggle() {
     }
   }
 }
-
-.text-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 36px;
-  height: 36px;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
-}
-
-.text-b::before {
-  margin-right: 8px;
-  margin-left: 8px;
-  width: 1px;
-  height: 24px;
-  background-color: var(--oceanus-c-divider);
-  content: '';
-}
 </style>

theme/components/OceanusNavTools.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { NavTools } from '../types'
+
+defineProps<{
+  navTools: NavTools
+}>()
+</script>
+
+<template>
+  <div v-for="(tools, i) in navTools" :key="i" flex="~ center">
+    <template v-for="(tool, j) in tools" :key="j">
+      <OceanusToggleLocale v-if="tool === 'toggleLocale'" />
+      <OceanusToggleTheme v-if="tool === 'togglTheme'" />
+      <div v-if="tool === 'search'" class="text-icon cursor-not-allowed">
+        <!-- TODO: -->
+        <div i-tabler-search items-center />
+      </div>
+
+      <template v-if="typeof tool === 'object'">
+        <AppLink class="text-icon oceanus-nav-toolbar-text" :to="tool?.link">
+          <div :class="tool.icon" />
+        </AppLink>
+      </template>
+    </template>
+    <div v-if="i !== navTools.length - 1" class="text-icon text-b" />
+  </div>
+</template>

theme/components/OceanusToggleTheme.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { useAppStore } from 'valaxy'
+
+const appStore = useAppStore()
+</script>
+
+<template>
+  <div class="oceanus-nav-toolbar-text text-icon" flex="~ center">
+    <button type="button" aria-label="Toggle Dark Mode" @click="appStore.toggleDarkWithTransition">
+      <div v-if="!appStore.isDark" i-tabler-sun />
+      <div v-else i-tabler-moon />
+    </button>
+  </div>
+</template>

theme/composables/nav.ts

@@ -36,7 +36,7 @@ export function useSplitPathSegments(path: MaybeRefOrGetter<string>) {
  */
 export function useMatchingNavItems(path: MaybeRefOrGetter<string>) {
   const themeConfig = useThemeConfig()
-  const navItems = themeConfig.value.header.nav!
+  const navItems = themeConfig.value.nav!
 
   return computed(() => {
     const matchingNavItems: {