refactor: refactor nav bar component

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

@@ -1,12 +0,0 @@
-import { withBase } from '../utils'
-import NavBarLinks from './NavBarLinks.vue'
-
-export default {
-  components: {
-    NavBarLinks
-  },
-
-  setup() {
-    return { withBase }
-  }
-}

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

@@ -1,48 +1,40 @@
 <template>
-  <a
+  <NavBarTitle />
-    class="title"
+
-    :aria-label="$site.title + ', back to home'"
+  <div class="flex-grow" />
-    :href="$site.base"
+
-  >
+  <div class="nav">
-    <img
+    <NavBarLinks />
-      class="logo"
+  </div>
-      v-if="$theme.logo"
+
-      :src="withBase($theme.logo)"
-      alt="logo"
-    />
-    <span>{{ $site.title }}</span>
-  </a>
-  <div class="flex-grow"></div>
-  <NavBarLinks class="hide-mobile" />
   <slot name="search" />
 </template>
 
-<script src="./NavBar"></script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import NavBarTitle from './NavBarTitle.vue'
+import NavBarLinks from './NavBarLinks.vue'
 
-<style>
+export default defineComponent({
-.title {
+  components: {
-  font-size: 1.3rem;
+    NavBarTitle,
-  font-weight: 600;
+    NavBarLinks
-  color: var(--c-text);
+  }
-}
+})
-
+</script>
-.title:hover {
-  text-decoration: none;
-}
 
+<style scoped>
 .flex-grow {
   flex-grow: 1;
 }
 
-.logo {
+.nav {
-  margin-right: 0.75rem;
+  display: none;
-  height: 1.3rem;
-  vertical-align: bottom;
 }
 
-@media screen and (max-width: 719px) {
+@media (min-width: 720px) {
-  .hide-mobile {
+  .nav {
-    display: none !important;
+    display: block;
   }
 }
 </style>

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

@@ -0,0 +1,44 @@
+<template>
+  <a
+    class="nav-bar-title"
+    :href="$site.base"
+    :aria-label="`${$site.title}, back to home`"
+  >
+    <img
+      v-if="$theme.logo"
+      class="logo"
+      :src="withBase($theme.logo)"
+      alt="Logo"
+    />
+    {{ $site.title }}
+  </a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { withBase } from '../utils'
+
+export default defineComponent({
+  setup() {
+    return { withBase }
+  }
+})
+</script>
+
+<style scoped>
+.nav-bar-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: var(--c-text);
+}
+
+.nav-bar-title:hover {
+  text-decoration: none;
+}
+
+.logo {
+  margin-right: .75rem;
+  height: 1.3rem;
+  vertical-align: bottom;
+}
+</style>