feat: show nav contents in sidebar when mobile

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

@@ -12,7 +12,7 @@
     />
     <span>{{ $site.title }}</span>
   </a>
-  <NavBarLinks />
+  <NavBarLinks class="hide-mobile"/>
 </template>
 
 <script src="./NavBar"></script>
@@ -29,4 +29,10 @@
   height: 1.3rem;
   vertical-align: bottom;
 }
+
+@media screen and (max-width: 719px) {
+  .hide-mobile {
+    display: none;
+  }
+}
 </style>

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

@@ -25,7 +25,7 @@
 }
 
 .nav-link {
-  display: inline-block;
+  display: block;
   margin-bottom: -2px;
   border-bottom: 2px solid transparent;
   font-size: 0.9rem;

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

@@ -20,7 +20,8 @@
 
 @media screen and (max-width: 719px) {
   .nav-links {
-    display: none;
+    display: block;
+    height: auto;
   }
 }
 </style>

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

@@ -46,7 +46,7 @@
 .dropdown-wrapper {
   position: relative;
   cursor: pointer;
-  display: inline-block;
+  display: block;
   margin-left: 1.5rem;
 }
 .dropdown-wrapper .dropdown-title {

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

@@ -9,6 +9,7 @@ import { Header } from '../../../../types/shared'
 import { isActive, joinUrl, getPathDirName } from '../utils'
 import { DefaultTheme } from '../config'
 import { useActiveSidebarLinks } from '../composables/activeSidebarLink'
+import NavBarLinks from './NavBarLinks.vue'
 
 const SideBarItem: FunctionalComponent<{
   item: ResolvedSidebarItem
@@ -33,6 +34,7 @@ const SideBarItem: FunctionalComponent<{
 
 export default {
   components: {
+    NavBarLinks,
     SideBarItem
   },
 

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

@@ -1,4 +1,5 @@
 <template>
+  <NavBarLinks class="show-mobile"/>
   <ul class="sidebar">
     <SideBarItem v-for="item of items" :item="item" />
   </ul>
@@ -7,6 +8,15 @@
 <script src="./SideBar"></script>
 
 <style>
+.show-mobile {
+  display: none;
+}
+@media screen and (max-width: 719px) {
+  .show-mobile {
+    display: block;
+  }
+}
+
 .sidebar,
 .sidebar-items {
   list-style-type: none;