Resolve "Use a zotero generated json instead of crossref api"

Closes #129 (closed)

components/Nav/Navbar.vue

 <template>
-  <v-app-bar>
-    <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
-    <v-toolbar-title>DefenseFinder Wiki</v-toolbar-title>
-    <v-btn icon="mdi-theme-light-dark" @click="toggle()">
-    </v-btn>
+  <v-app-bar :elevation="0" border>
+    <template #prepend>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+    </template>
+    <v-app-bar-title>
+      <Logo height="45px" />
+    </v-app-bar-title>
+    <template #append v-if="!mobile">
+      <v-btn v-for="section in sections" :key="section.id" color="primary" :href="section.href">
+        {{ section.label }}
+      </v-btn>
+    </template>
   </v-app-bar>
   <v-navigation-drawer v-model="drawer" :border="0">
     <v-card flat>
@@ -16,10 +23,13 @@
 <script setup lang="ts">
 import { useCustomTheme } from '~/composables/useCustomTheme'
 
+const runtimeConfig = useRuntimeConfig()
 const { toggle } = useCustomTheme()
+const { navigation } = useContent();
+const { mobile } = useDisplay();
 
-const { navigation, page, surround, globals } = useContent();
-
-
+const sections = ref([
+  { id: "webservice", label: "webservice", href: runtimeConfig.public.defenseFinderWebservice }
+])
 const drawer = ref(true);
 </script>