Show navbar per page to fix persistent popover bug

EphyraSoftware · Feb 25, 2024 · d97e566 · d97e566
1 parent 9a5882c
commit d97e566
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 33 deletions.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -53,39 +53,6 @@ onMounted(async () => {
       <span class="loading loading-infinity loading-lg"></span>
     </div>
     <div v-else>
-      <div class="navbar bg-base-100">
-        <div class="navbar-start">
-          <div class="dropdown">
-            <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
-              </svg>
-            </div>
-            <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-              <li><router-link to="/">Home</router-link></li>
-              <li>
-                <router-link to="/settings">Settings</router-link>
-              </li>
-              <li><router-link to="/about">About</router-link></li>
-            </ul>
-          </div>
-        </div>
-        <div class="navbar-center">
-          <button class="btn btn-ghost text-xl" @click="router.push('/')">
-            Web of Trust
-          </button>
-        </div>
-        <div class="navbar-end">
-          <router-link to="/search" class="px-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-          </router-link>
-        </div>
-      </div>
-
       <router-view></router-view>
 
       <NotifyContainer></NotifyContainer>

diff --git a/ui/src/component/NavBar.vue b/ui/src/component/NavBar.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+</script>
+
+<template>
+    <div class="navbar bg-base-100">
+        <div class="navbar-start">
+            <div class="dropdown">
+                <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
+                    </svg>
+                </div>
+                <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+                    <li><router-link to="/">Home</router-link></li>
+                    <li>
+                        <router-link to="/settings">Settings</router-link>
+                    </li>
+                    <li><router-link to="/about">About</router-link></li>
+                </ul>
+            </div>
+        </div>
+        <div class="navbar-center">
+            <button class="btn btn-ghost text-xl" @click="router.push('/')">
+                Web of Trust
+            </button>
+        </div>
+        <div class="navbar-end">
+            <router-link to="/search" class="px-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+            </router-link>
+        </div>
+    </div>
+</template>
diff --git a/ui/src/pages/AboutPage.vue b/ui/src/pages/AboutPage.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import NavBar from '../component/NavBar.vue';
 
 </script>
 
 <template>
+    <NavBar></NavBar>
     <div class="container mx-auto mt-5">
         <p>
             You can learn more about protecting your E-mails with GPG from the

diff --git a/ui/src/pages/HomePage.vue b/ui/src/pages/HomePage.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import MyKeys from "../trusted/trusted/MyKeys.vue";
 import KeyCollections from "../trusted/trusted/KeyCollections.vue";
+import NavBar from '../component/NavBar.vue';
 
 </script>
 
 <template>
+    <NavBar></NavBar>
     <div class="container mx-auto mt-5">
         <MyKeys></MyKeys>
         <div class="mt-5">

diff --git a/ui/src/pages/SearchPage.vue b/ui/src/pages/SearchPage.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import SearchKeys from "../trusted/trusted/SearchKeys.vue";
+import NavBar from '../component/NavBar.vue';
 
 </script>
 
 <template>
+    <NavBar></NavBar>
     <div class="container mx-auto mt-5">
         <SearchKeys></SearchKeys>
     </div>

diff --git a/ui/src/pages/SettingsPage.vue b/ui/src/pages/SettingsPage.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import SettingsEditor from "../component/SettingsEditor.vue";
+import NavBar from '../component/NavBar.vue';
+
 </script>
 
 <template>
+    <NavBar></NavBar>
     <div class="container mx-auto w-1/2 mt-5">
         <SettingsEditor></SettingsEditor>
     </div>