feat: navlinks in sidebar (#80)

* feat: make navBarLinks component

* feat: show nav contents in sidebar when mobile

* feat: nav links style in mobile

Author: Spice-Z

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

@@ -1,24 +1,14 @@
-import { computed } from 'vue'
 import { withBase } from '../utils'
-import { useSiteDataByRoute } from 'vitepress'
-import NavBarLink from './NavBarLink.vue'
-import NavDropdownLink from './NavDropdownLink.vue'
+import NavBarLinks from './NavBarLinks.vue'
 
 export default {
   components: {
-    NavBarLink,
-    NavDropdownLink
+    NavBarLinks
   },
 
   setup() {
     return {
-      withBase,
-      navData:
-        process.env.NODE_ENV === 'production'
-          ? // navbar items do not change in production
-            useSiteDataByRoute().value.themeConfig.nav
-          : // use computed in dev for hot reload
-            computed(() => useSiteDataByRoute().value.themeConfig.nav)
+      withBase
     }
   }
 }

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

@@ -12,12 +12,7 @@
     />
     <span>{{ $site.title }}</span>
   </a>
-  <nav class="nav-links" v-if="navData">
-    <template v-for="item of navData">
-      <NavDropdownLink v-if='item.items' :item="item"/>
-      <NavBarLink v-else :item="item"/>
-    </template>
-  </nav>
+  <NavBarLinks class="hide-mobile"/>
 </template>
 
 <script src="./NavBar"></script>
@@ -35,16 +30,8 @@
   vertical-align: bottom;
 }
 
-.nav-links {
-  display: flex;
-  align-items: center;
-  height: 35px;
-  list-style-type: none;
-  transform: translateY(1px);
-}
-
 @media screen and (max-width: 719px) {
-  .nav-links {
+  .hide-mobile {
     display: none;
   }
 }

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;
@@ -43,4 +43,23 @@
 .nav-link.external:hover {
   border-bottom-color: transparent;
 }
+
+@media screen and (max-width: 719px) {
+  .nav-item {
+    margin-left: 0;
+    padding: 0.35rem 1.5rem 0.35rem 1.25rem;
+  }
+
+  .nav-link {
+    line-height: 1.7;
+    font-size: 1em;
+    font-weight: 600;
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+  .nav-link:hover,
+  .nav-link.active {
+    color: var(--accent-color);
+  }
+}
 </style>

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

@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+import { useSiteDataByRoute } from 'vitepress'
+import NavBarLink from './NavBarLink.vue'
+import NavDropdownLink from './NavDropdownLink.vue'
+
+export default {
+  components: {
+    NavBarLink,
+    NavDropdownLink
+  },
+
+  setup() {
+    return {
+      navData:
+        process.env.NODE_ENV === 'production'
+          ? // navbar items do not change in production
+            useSiteDataByRoute().value.themeConfig.nav
+          : // use computed in dev for hot reload
+            computed(() => useSiteDataByRoute().value.themeConfig.nav)
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+<template>
+  <nav class="nav-links" v-if="navData">
+    <template v-for="item of navData">
+      <NavDropdownLink v-if='item.items' :item="item"/>
+      <NavBarLink v-else :item="item"/>
+    </template>
+  </nav>
+</template>
+
+<script src="./NavBarLinks"></script>
+
+<style>
+.nav-links {
+  display: flex;
+  align-items: center;
+  height: 35px;
+  list-style-type: none;
+  transform: translateY(1px);
+}
+
+@media screen and (max-width: 719px) {
+  .nav-links {
+    display: block;
+    height: auto;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+}
+</style>

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

@@ -10,7 +10,7 @@
       <span class="arrow" :class="open ? 'down' : 'right'" />
     </button>
 
-    <ul v-show="open" class="nav-dropdown">
+    <ul class="nav-dropdown">
       <li v-for="(subItem, index) in item.items" :key="subItem.link || index" class="dropdown-item">
         <h4 v-if="subItem.items">{{ subItem.text }}</h4>
         <ul v-if="subItem.items" class="dropdown-subitem-wrapper">
@@ -46,7 +46,7 @@
 .dropdown-wrapper {
   position: relative;
   cursor: pointer;
-  display: inline-block;
+  display: block;
   margin-left: 1.5rem;
 }
 .dropdown-wrapper .dropdown-title {
@@ -129,7 +129,7 @@
 }
 .dropdown-wrapper:hover .nav-dropdown,
 .dropdown-wrapper.open .nav-dropdown {
-  display: block !important;
+  display: block;
 }
 .dropdown-wrapper.open:blur {
   display: none;
@@ -158,4 +158,25 @@
   white-space: nowrap;
   margin: 0;
 }
+
+@media screen and (max-width: 719px) {
+  .dropdown-wrapper {
+    height: auto;
+    margin-left: 1.25rem;
+  }
+
+  .dropdown-wrapper .nav-dropdown {
+    position: relative;
+    top: none;
+    right: none;
+    border: none;
+    background-color: transparent;
+  }
+  .dropdown-wrapper:hover .nav-dropdown {
+    display: none;
+  }
+  .dropdown-wrapper.open .nav-dropdown {
+    display: block;
+  }
+}
 </style>

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;