From 2dd672e103b17759f3929d54595e82b31fa76000 Mon Sep 17 00:00:00 2001
From: pengzhanbo <q942450674@outlook.com>
Date: Thu, 7 Apr 2022 16:11:04 +0800
Subject: [PATCH] updte: siderbar develop

---
 .../theme/src/client/components/Navbar.vue    |  4 ++
 .../theme/src/client/components/Sidebar.vue   |  0
 .../src/client/components/SidebarItems.vue    |  0
 .../client/components/ToggleSidebarButton.vue | 65 +++++++++++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 packages/theme/src/client/components/Sidebar.vue
 create mode 100644 packages/theme/src/client/components/SidebarItems.vue
 create mode 100644 packages/theme/src/client/components/ToggleSidebarButton.vue

diff --git a/packages/theme/src/client/components/Navbar.vue b/packages/theme/src/client/components/Navbar.vue
index 2bc5bf72..06404ce2 100644
--- a/packages/theme/src/client/components/Navbar.vue
+++ b/packages/theme/src/client/components/Navbar.vue
@@ -2,10 +2,13 @@
 import DarkModeButton from '@theme-plume/DarkModeButton.vue'
 import NavbarBrand from '@theme-plume/NavbarBrand.vue'
 import NavbarItems from '@theme-plume/NavbarItems.vue'
+import ToggleSidebarButton from '@theme-plume/ToggleSidebarButton.vue'
 import { computed, onMounted, ref } from 'vue'
 import { useThemeLocaleData } from '../composables'
 import { getCssValue } from '../utils'
 
+defineEmits(['toggle-sidebar'])
+
 const themeLocale = useThemeLocaleData()
 
 const navbar = ref<HTMLElement | null>(null)
@@ -44,6 +47,7 @@ onMounted(() => {
 </script>
 <template>
   <header ref="navbar" class="navbar-wrapper">
+    <ToggleSidebarButton @toggle="$emit('toggle-sidebar')" />
     <span ref="navbarBrand">
       <NavbarBrand />
     </span>
diff --git a/packages/theme/src/client/components/Sidebar.vue b/packages/theme/src/client/components/Sidebar.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/theme/src/client/components/SidebarItems.vue b/packages/theme/src/client/components/SidebarItems.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/theme/src/client/components/ToggleSidebarButton.vue b/packages/theme/src/client/components/ToggleSidebarButton.vue
new file mode 100644
index 00000000..4b35682f
--- /dev/null
+++ b/packages/theme/src/client/components/ToggleSidebarButton.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useThemeLocaleData } from '../composables'
+
+defineEmits(['toggle'])
+
+const themeLocale = useThemeLocaleData()
+</script>
+
+<template>
+  <div
+    class="toggle-sidebar-button"
+    :title="themeLocale.toggleSidebar"
+    aria-expanded="false"
+    role="button"
+    tabindex="0"
+    @click="$emit('toggle')"
+  >
+    <div class="icon" aria-hidden="true">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+@import '../styles/_mixins';
+
+.toggle-sidebar-button {
+  position: absolute;
+  top: 0.6rem;
+  left: 1rem;
+  display: none;
+  padding: 0.6rem;
+  cursor: pointer;
+}
+
+.toggle-sidebar-button .icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: inherit;
+
+  span {
+    display: inline-block;
+    width: 100%;
+    height: 2px;
+    border-radius: 2px;
+    background-color: var(--c-text);
+    transition: transform var(--t-transform);
+
+    &:nth-child(2) {
+      margin: 6px 0;
+    }
+  }
+}
+
+@media screen and (max-width: $MQMobile) {
+  .toggle-sidebar-button {
+    display: block;
+  }
+}
+</style>