feat: responsive sidebar

src/client/theme-default/Layout.vue

@@ -2,9 +2,10 @@
   <div class="theme">
     <header>
       <NavBar />
+      <ToggleSideBarButton @toggle="toggleSidebar" />
     </header>
-    <aside>
-      <SideBar />
+    <aside :class="{ open }">
+      <SideBar/>
     </aside>
     <main>
       <Page />
@@ -14,15 +15,29 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import NavBar from './components/NavBar.vue'
+import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
 
 export default {
   components: {
     NavBar,
+    ToggleSideBarButton,
     SideBar,
     Page
+  },
+  setup() {
+    let open = ref(false)
+    const toggleSidebar = () => {
+      open.value = !open.value
+    }
+    return {
+      open,
+      toggleSidebar
+    }
   }
 }
 </script>

src/client/theme-default/components/ToggleSideBarButton.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="sidebar-button" @click="$emit('toggle')">
+    <svg
+      class="icon"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      role="img"
+      viewBox="0 0 448 512"
+    >
+      <path
+        fill="currentColor"
+        d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
+        class
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+
+export default {
+  emits: ['toggle']
+}
+</script>
+
+<style>
+.sidebar-button {
+  cursor: pointer;
+  display: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  position: absolute;
+  top: 1.25rem;
+  left: 1rem;
+}
+.sidebar-button .icon {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+@media screen and (max-width: 719px) {
+  .sidebar-button {
+    display: block;
+  }
+}
+</style>

src/client/theme-default/styles/layout.css

@@ -28,6 +28,11 @@ header {
   justify-content: space-between;
   padding: 0 1.75rem 0 1.5rem;
 }
+@media screen and (max-width: 719px) {
+  header {
+    padding: 0 1.75rem 0 4rem;
+  }
+}
 
 aside {
   position: fixed;
@@ -41,11 +46,25 @@ aside {
   z-index: 3;
   overflow-y: auto;
 }
+@media screen and (max-width: 719px) {
+  aside {
+    transition: transform .2s ease;
+    transform: translateX(-100%);
+  }
+  aside.open {
+    transform: translateX(0);
+  }
+}
 
 main {
   margin-top: var(--header-height);
   margin-left: var(--sidebar-width);
 }
+@media screen and (max-width: 719px) {
+  main {
+    margin-left: 0;
+  }
+}
 
 a {
   text-decoration: none;
@@ -69,7 +88,7 @@ h1 {
 
 h2 {
   font-size: 1.65rem;
-  padding-bottom: .3rem;
+  padding-bottom: 0.3rem;
   border-bottom: 1px solid var(--border-color);
 }
 

src/client/theme-default/styles/vars.css

@@ -6,4 +6,9 @@
   --text-color-light: #476582;
   --code-bg-color: #282c34;
   --accent-color: #3eaf7c;
+
+  /* responsive breakpoints */
+  /* --mq-narrow: 959px; */
+  /* --mq-mobile: 719px; */
+  /* --mq-mobile-narrow: 419px; */
 }