feat: add sidebar toggle & local-nav

docs/components.d.ts

@@ -19,6 +19,7 @@ declare module '@vue/runtime-core' {
     PressArticle: typeof import('./../packages/valaxy-theme-press/components/PressArticle.vue')['default']
     PressArticleCard: typeof import('./../packages/valaxy-theme-press/components/PressArticleCard.vue')['default']
     PressAuthor: typeof import('./../packages/valaxy-theme-press/components/PressAuthor.vue')['default']
+    PressBackdrop: typeof import('./../packages/valaxy-theme-press/components/PressBackdrop.vue')['default']
     PressButton: typeof import('./../packages/valaxy-theme-press/components/PressButton.vue')['default']
     PressCategories: typeof import('./../packages/valaxy-theme-press/components/PressCategories.vue')['default']
     PressCategory: typeof import('./../packages/valaxy-theme-press/components/PressCategory.vue')['default']
@@ -29,6 +30,7 @@ declare module '@vue/runtime-core' {
     PressHome: typeof import('./../packages/valaxy-theme-press/components/PressHome.vue')['default']
     PressHomeFeatures: typeof import('./../packages/valaxy-theme-press/components/PressHomeFeatures.vue')['default']
     PressHomeHero: typeof import('./../packages/valaxy-theme-press/components/PressHomeHero.vue')['default']
+    PressLocalNav: typeof import('./../packages/valaxy-theme-press/components/PressLocalNav.vue')['default']
     PressNav: typeof import('./../packages/valaxy-theme-press/components/PressNav.vue')['default']
     PressNavBar: typeof import('./../packages/valaxy-theme-press/components/navbar/PressNavBar.vue')['default']
     PressPostList: typeof import('./../packages/valaxy-theme-press/components/PressPostList.vue')['default']

docs/pages/dev/faq.md

@@ -2,7 +2,6 @@
 title: FAQ
 title_zh: 常见问题
 categories:
-  - Docs
   - Dev
 end: false
 ---

docs/pages/dev/index.md

@@ -2,7 +2,6 @@
 title: Participate in Development
 title_zh: 参与开发
 categories:
-  - Docs
   - Dev
 end: false
 ---

docs/pages/faq/index.md

@@ -1,7 +1,6 @@
 ---
 title: FAQ
 categories:
-  - Docs
   - Guide
 end: false
 ---

docs/pages/guide/config.md

@@ -2,7 +2,6 @@
 title: Config
 title_zh: 配置
 categories:
-  - Docs
   - Guide
 end: false
 ---

docs/pages/guide/container.md

@@ -2,7 +2,6 @@
 title_zh: 容器
 title: Container
 categories:
-  - Docs
   - Guide
 end: false
 ---

docs/pages/guide/extend.md

@@ -1,7 +1,6 @@
 ---
 title: 自定义扩展
 categories:
-  - Docs
   - Guide
 end: false
 ---

docs/pages/guide/features.md

@@ -2,7 +2,6 @@
 title: Features
 title_zh: 亮点
 categories:
-  - Docs
   - Guide
 end: false
 ---

docs/pages/guide/getting-started.md

@@ -2,7 +2,6 @@
 title: Getting Started
 title_zh: 开始
 categories:
-  - Docs
   - Guide
 end: false
 ---

docs/pages/guide/i18n.md

@@ -2,7 +2,6 @@
 title: i18n in One Page
 title_zh: 单页 i18n
 categories:
-  - Docs
   - Guide
 ---
 

docs/pages/guide/index.md

@@ -2,7 +2,6 @@
 title: Guide
 title_zh: 指南
 categories:
-  - Docs
   - Guide
 end: false
 ---

docs/pages/guide/third-party.md

@@ -2,7 +2,6 @@
 title: Third Party
 title_zh: 第三方
 categories:
-  - Docs
   - Guide
 end: false
 aplayer: true

docs/pages/posts/hello-press.md

@@ -1,7 +0,0 @@
----
-title: Hello Theme Press
----
-
-Temp Docs: [yun.valaxy.site/docs](https://yun.valaxy.site/docs)
-
-Hello Valaxy Theme Press

docs/pages/theme/comment.md

@@ -3,7 +3,6 @@ title: Implement Comments
 title_zh: 实现评论
 end: false
 categories:
-  - Docs
   - Theme
 ---
 

docs/pages/theme/index.md

@@ -2,7 +2,6 @@
 title: How to create a valaxy theme?
 title_zh: 如何创建一个 Valaxy 主题
 categories:
-  - Docs
   - Theme
 end: false
 ---

packages/valaxy-theme-press/components/PressBackdrop.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+defineProps<{
+  show: boolean
+}>()
+</script>
+
+<template>
+  <transition name="fade">
+    <div v-if="show" class="press-backdrop" />
+  </transition>
+</template>
+
+<style scoped lang="scss">
+.press-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--pr-z-index-backdrop);
+  background: rgba(0, 0, 0, .6);
+  transition: opacity 0.5s;
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .fade-leave-active {
+    transition-duration: .25s;
+  }
+}
+
+@media (min-width: 1280px) {
+  .press-backdrop {
+    display: none;
+  }
+}
+</style>

packages/valaxy-theme-press/components/PressHomeHero.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
 import { useFrontmatter } from 'valaxy'
 import PressButton from './PressButton.vue'
 
-const router = useRouter()
 const fm = useFrontmatter()
 </script>
 

packages/valaxy-theme-press/components/PressLocalNav.vue

@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { useSidebar } from 'valaxy/client'
+
+defineProps<{
+  open: boolean
+}>()
+
+defineEmits<{
+  (e: 'openMenu'): void
+}>()
+
+const { hasSidebar } = useSidebar()
+
+function scrollToTop() {
+  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+}
+</script>
+
+<template>
+  <div v-if="hasSidebar" class="press-local-nav">
+    <button
+      class="menu"
+      :aria-expanded="open"
+      aria-controls="VPSidebarNav"
+      @click="$emit('openMenu')"
+    >
+      <div i-ri-align-left class="menu-icon" />
+      <span class="menu-text">Menu</span>
+    </button>
+
+    <a class="top-link" href="#" @click="scrollToTop">
+      Return to top
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.press-local-nav {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: var(--vp-z-index-local-nav);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--vp-c-divider-light);
+  width: 100%;
+  background-color: var(--va-c-bg);
+  transition: border-color 0.5s, background-color 0.5s;
+}
+
+@media (min-width: 960px) {
+  .press-local-nav {
+    display: none;
+  }
+}
+
+.menu {
+  display: flex;
+  align-items: center;
+  padding: 12px 24px 11px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.menu:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@media (min-width: 768px) {
+  .menu {
+    padding: 0 32px;
+  }
+}
+
+.menu-icon {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.top-link {
+  display: block;
+  padding: 12px 24px 11px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.top-link:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@media (min-width: 768px) {
+  .top-link {
+    padding: 12px 32px 11px;
+  }
+}
+</style>

packages/valaxy-theme-press/components/PressSidebar.vue

@@ -1,16 +1,26 @@
 <script lang="ts" setup>
-import { useCategory, usePageList } from 'valaxy'
+import { useCategory, usePageList, useSidebar } from 'valaxy'
+
+defineProps<{
+  open: boolean
+}>()
 
 const pages = usePageList()
-const categories = useCategory('Docs', pages.value)
+const categories = useCategory('', pages.value)
+
+const { hasSidebar } = useSidebar()
 </script>
 
 <template>
-  <div class="press-sidebar open shadow-lg">
+  <aside
+    v-if="hasSidebar"
+    class="press-sidebar shadow-lg" :class="{ open }"
+    @click.stop
+  >
     <div text="left" m="2">
       <PressCategories :categories="categories.children" :collapsable="false" />
     </div>
-  </div>
+  </aside>
 </template>
 
 <style lang="scss">
@@ -39,4 +49,19 @@ const categories = useCategory('Docs', pages.value)
                 transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
   }
 }
+
+@media (min-width: 960px) {
+  .press-sidebar {
+    z-index: 1;
+    padding-top: var(--vp-nav-height-desktop);
+    padding: 1rem 0;
+    width: var(--pr-sidebar-width);
+    max-width: 100%;
+    background-color: var(--va-c-bg-alt);
+    opacity: 1;
+    visibility: visible;
+    box-shadow: none;
+    transform: translateX(0);
+  }
+}
 </style>

packages/valaxy-theme-press/components/ValaxyMain.vue

@@ -51,9 +51,11 @@ const { hasSidebar } = useSidebar()
 </template>
 
 <style lang="scss">
-.press-main {
-  &.has-sidebar {
-    padding-left: var(--pr-sidebar-width);
+@media (min-width: 960px) {
+  .press-main {
+    &.has-sidebar {
+      padding-left: var(--pr-sidebar-width);
+    }
   }
 }
 </style>

packages/valaxy-theme-press/layouts/default.vue

@@ -1,6 +1,14 @@
+<script lang="ts" setup>
+import { useSidebar } from 'valaxy/client'
+
+const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebar()
+</script>
+
 <template>
   <Layout>
-    <PressSidebar />
+    <PressSidebar :open="isSidebarOpen" />
+    <PressBackdrop :show="isSidebarOpen" @click="closeSidebar" />
+    <PressLocalNav :open="isSidebarOpen" @open-menu="openSidebar()" />
 
     <router-view />
   </Layout>

packages/valaxy-theme-press/layouts/layout.vue

@@ -4,7 +4,7 @@
       <PressNav />
     </div>
 
-    <main class="max-w-3xl mx-auto sm:px-6 xl:max-w-5xl xl:px-0">
+    <main class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
       <slot>
         <router-view v-slot="{ Component }">
           <component :is="Component">

packages/valaxy-theme-press/styles/css-vars.scss

@@ -1,4 +1,6 @@
 :root {
+  --pr-z-index-backdrop: 9;
   --pr-z-index-sidebar: 10;
+
   --pr-sidebar-width: 272px;
 }

packages/valaxy/client/styles/global/index.scss

@@ -1,7 +1,6 @@
 html,
 body,
 #app {
-  height: 100%;
   margin: 0;
   padding: 0;