chore: update Navbar.vue for improved readability and maintainability

docs/.vuepress/theme/components/Navbar.vue

@@ -2,93 +2,88 @@
   <header class="navbar blur">
     <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
 
-    <router-link :to="$localePath" class="home-link">
+    <router-link
+      :to="$localePath"
+      class="home-link"
+    >
       <img
         class="logo"
         v-if="$site.themeConfig.logo"
         :src="$withBase($site.themeConfig.logo)"
-        :alt="$siteTitle" />
+        :alt="$siteTitle"
+      />
       <span
         ref="siteName"
         class="site-name"
         v-if="$siteTitle"
         :class="{ 'can-hide': $site.themeConfig.logo }"
-        >{{ $siteTitle }}</span
-      >
+      >{{ $siteTitle }}</span>
     </router-link>
 
     <div
       class="links"
-      :style="
-        linksWrapMaxWidth
-          ? {
-              'max-width': linksWrapMaxWidth + 'px',
-            }
-          : {}
-      ">
-      <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
+      :style="linksWrapMaxWidth ? {
+        'max-width': linksWrapMaxWidth + 'px'
+      } : {}"
+    >
+      <AlgoliaSearchBox
+        v-if="isAlgoliaSearch"
+        :options="algolia"
+      />
       <SearchBox
-        v-else-if="
-          $site.themeConfig.search !== false &&
-          $page.frontmatter.search !== false
-        " />
+        v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"
+      />
       <NavLinks class="can-hide" />
     </div>
   </header>
 </template>
 
 <script>
-import AlgoliaSearchBox from "@AlgoliaSearchBox";
-import SearchBox from "@SearchBox";
-import SidebarButton from "@theme/components/SidebarButton.vue";
-import NavLinks from "@theme/components/NavLinks.vue";
+import AlgoliaSearchBox from '@AlgoliaSearchBox'
+import SearchBox from '@SearchBox'
+import SidebarButton from '@theme/components/SidebarButton.vue'
+import NavLinks from '@theme/components/NavLinks.vue'
 
 export default {
   components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
 
-  data() {
+  data () {
     return {
-      linksWrapMaxWidth: null,
-    };
+      linksWrapMaxWidth: null
+    }
   },
 
-  mounted() {
-    const MOBILE_DESKTOP_BREAKPOINT = 719; // refer to config.styl
-    const NAVBAR_VERTICAL_PADDING =
-      parseInt(css(this.$el, "paddingLeft")) +
-      parseInt(css(this.$el, "paddingRight"));
+  mounted () {
+    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
+    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
     const handleLinksWrapWidth = () => {
       if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
-        this.linksWrapMaxWidth = null;
+        this.linksWrapMaxWidth = null
       } else {
-        this.linksWrapMaxWidth =
-          this.$el.offsetWidth -
-          NAVBAR_VERTICAL_PADDING -
-          ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0);
+        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
+          - (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
       }
-    };
-    handleLinksWrapWidth();
-    window.addEventListener("resize", handleLinksWrapWidth, false);
+    }
+    handleLinksWrapWidth()
+    window.addEventListener('resize', handleLinksWrapWidth, false)
   },
 
   computed: {
-    algolia() {
-      return (
-        this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
-      );
+    algolia () {
+      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
     },
 
-    isAlgoliaSearch() {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName;
-    },
-  },
-};
+    isAlgoliaSearch () {
+      return this.algolia && this.algolia.apiKey && this.algolia.indexName
+    }
+  }
+}
 
-function css(el, property) {
+function css (el, property) {
   // NOTE: Known bug, will return 'auto' if style value is 'auto'
-  const win = el.ownerDocument.defaultView;
+  const win = el.ownerDocument.defaultView
   // null means not to return pseudo styles
-  return win.getComputedStyle(el, null)[property];
+  return win.getComputedStyle(el, null)[property]
 }
 </script>
 

package.json

@@ -39,8 +39,6 @@
     "@vssue/api-github-v3": "^1.4.7",
     "@vssue/vuepress-plugin-vssue": "^1.4.8",
     "@vuepress/core": "^1.9.10",
-    "chalk": "^5.3.0",
-    "gray-matter": "^4.0.3",
     "vuepress-plugin-comment": "^0.7.3"
   }
 }