Resolve "Add Js plugin to render 3D protein structure"

Closes #127 (closed)

components/Nav/Navbar.vue

@@ -2,34 +2,60 @@
   <v-app-bar :elevation="0" border>
     <template #prepend>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      <!-- <Logo height="45px" /> -->
     </template>
     <v-app-bar-title>
-      <Logo height="45px" />
+      <span class="d-flex align-center">
+        <span class="text-medium-emphasis">Knowledge database of all known anti-phage systems by
+        </span><span></span>
+      </span>
     </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>
+      <v-btn @click="toggleTheme" color="primary"
+        :icon="theme.global.current.value.dark ? 'md:light_mode' : 'md:dark_mode'"></v-btn>
     </template>
   </v-app-bar>
-  <v-navigation-drawer v-model="drawer" :border="0">
-    <v-card flat>
-      <v-list nav density="compact" :lines="false">
-        <NavNavigation :navigation="navigation" />
-      </v-list>
-    </v-card>
+  <v-navigation-drawer v-model="drawer" :border="1">
+
+    <v-list nav density="compact" :lines="false">
+      <NavNavigation :navigation="computedNavigation" />
+    </v-list>
   </v-navigation-drawer>
 </template>
 <script setup lang="ts">
-import { useCustomTheme } from '~/composables/useCustomTheme'
+// import { useCustomTheme } from '~/composables/useCustomTheme'
+import { useDisplay, useTheme } from 'vuetify'
 
 const runtimeConfig = useRuntimeConfig()
-const { toggle } = useCustomTheme()
 const { navigation } = useContent();
 const { mobile } = useDisplay();
+const theme = useTheme()
 
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+}
 const sections = ref([
   { id: "webservice", label: "webservice", href: runtimeConfig.public.defenseFinderWebservice }
 ])
 const drawer = ref(true);
+
+
+const computedNavigation = computed(() => {
+  return navigation.value.map(navItem => {
+    if (navItem._path === '/') {
+      return { ...navItem, icon: "md:home" }
+    }
+    if (navItem._path === '/defense-systems') {
+      return { ...navItem, icon: "md:list" }
+    }
+    if (navItem._path === '/general-concepts') {
+      return { ...navItem, icon: "md:history_edu" }
+    }
+    return navItem
+  })
+})
+
 </script>