feat(sidebar): close when navigating

src/client/theme-default/Layout.vue

@@ -18,6 +18,7 @@
         </template>
       </SideBar>
     </aside>
+    <!-- TODO: make this button accessible -->
     <div
       class="sidebar-mask"
       :class="{ 'sidebar-open': open }"
@@ -38,11 +39,12 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, watch } 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'
+import { useRoute } from 'vitepress'
 
 export default {
   components: {
@@ -54,11 +56,18 @@ export default {
 
   setup() {
     const open = ref(false)
+    const route = useRoute()
 
     const toggleSidebar = (to) => {
       open.value = typeof to === 'boolean' ? to : !open.value
     }
 
+    const hideSidebar = toggleSidebar.bind(null, false)
+    // close the sidebar when navigating to a different location
+    watch(route, hideSidebar)
+    // TODO: route only changes when the pathname changes
+    // listening to hashchange does nothing because it's prevented in router
+
     return { open, toggleSidebar }
   }
 }

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

@@ -58,7 +58,7 @@
 }
 
 .sidebar-items .sidebar-link {
-  padding: .35rem 1rem .35rem 2rem;
+  padding: 0.35rem 1rem 0.35rem 2rem;
   line-height: 1.4;
   font-size: 0.95em;
   font-weight: 400;
@@ -75,16 +75,16 @@
 .sidebar-link {
   display: block;
   margin: 0;
-  border-left: .25rem solid transparent;
-  padding: .35rem 1.5rem .35rem 1.25rem;
+  border-left: 0.25rem solid transparent;
+  padding: 0.35rem 1.5rem 0.35rem 1.25rem;
   line-height: 1.7;
   font-size: 1.05em;
   font-weight: 700;
   color: var(--text-color);
 }
 
 a.sidebar-link {
-  transition: color .15s ease;
+  transition: color 0.15s ease;
 }
 
 a.sidebar-link:hover {