Handle mobile case for section navigation

components/Nav/Navbar.vue

@@ -11,7 +11,7 @@ const { navigation } = useContent();
 const { mobile } = useDisplay();
 const theme = useTheme();
 
-
+const switchTheme = ref(false)
 const props = withDefaults(defineProps<Props>(), {
   density: "prominent"
 });
@@ -20,6 +20,14 @@ function toggleTheme() {
   theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
 }
 
+watchEffect(() => {
+  theme.global.name.value = switchTheme.value ? "dark" : "light";
+})
+
+// function toggleSwitchTheme() {
+
+//   theme.global.name.value = switchTheme.value ? "light" : "dark";
+// }
 const sections = ref([
   {
     id: "webservice",
@@ -46,7 +54,7 @@ const computedNavigation = computed(() => {
 });
 </script>
 <template>
-  <v-app-bar :elevation="0" border :density="density">
+  <v-app-bar :elevation="0" border :density="density" color="background">
     <template #prepend>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
       <!-- <Logo height="45px" /> -->
@@ -56,16 +64,46 @@ const computedNavigation = computed(() => {
         Knowledge database of all known anti-phage systems
       </span>
     </v-app-bar-title>
-    <template #append v-if="!mobile">
-      <v-btn v-for="section in sections" :key="section.id" color="primary" :to="section?.to ?? null"
-        :href="section?.href ?? null" exact>
-        {{ 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 #append>
+      <template v-if="!mobile">
+        <v-btn v-for="section in sections" :key="section.id" color="primary" :to="section?.to ?? undefined"
+          :href="section?.href ?? undefined" exact>
+          {{ 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>
+      <template v-else>
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-btn icon="mdi-dots-vertical" v-bind="props"></v-btn>
+          </template>
+          <v-list>
+            <v-list-item v-for="section in sections" :key="section.id" :to="section?.to ?? undefined"
+              :href="section?.href ?? undefined" exact>
+              <v-list-item-title>{{ section.label }}</v-list-item-title>
+            </v-list-item>
+            <v-divider></v-divider>
+            <v-list-item>
+
+              <template #default>
+                <v-radio-group v-model=switchTheme>
+                  <v-radio :value="false"><template #label><v-chip variant="text"
+                        prepend-icon="md:light_mode">Light</v-chip></template></v-radio>
+                  <v-radio label="Dark" :value="true">
+                    <template #label><v-chip variant="text" prepend-icon="md:dark_mode">Dark</v-chip></template>
+                  </v-radio>
+                </v-radio-group>
+
+              </template>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </template>
     </template>
+
   </v-app-bar>
-  <v-navigation-drawer v-model="drawer" :border="1">
+  <v-navigation-drawer v-model="drawer" :border="1" color="background">
     <v-list nav density="compact" :lines="false">
       <NavNavigation :navigation="computedNavigation" />
     </v-list>