Hide relevant nav bar options based on authType

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index ddc91d8654ee54ac311ab751d5bfd877f0b323be..1769651628db84e7d264339984887be8fc7fe2bb 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -5,7 +5,7 @@
     </RouterLink>\r
     <div class="flex grow items-start justify-end">\r
       <!-- New Note -->\r
-      <RouterLink :to="{ name: 'new' }">\r
+      <RouterLink v-if="showNewButton" :to="{ name: 'new' }">\r
         <CustomButton :iconPath="mdilPlusCircle" label="New Note" />\r
       </RouterLink>\r
       <!-- Menu -->\r
@@ -24,15 +24,18 @@ import {
   mdilNoteMultiple,\r
   mdilPlusCircle,\r
 } from "@mdi/light-js";\r
-import { ref } from "vue";\r
+import { computed, ref } from "vue";\r
 import { RouterLink, useRouter } from "vue-router";\r
 \r
 import CustomButton from "../components/CustomButton.vue";\r
 import Logo from "../components/Logo.vue";\r
 import PrimeMenu from "../components/PrimeMenu.vue";\r
+import { authTypes } from "../constants.js";\r
+import { useGlobalStore } from "../globalStore.js";\r
 import { toggleTheme } from "../helpers.js";\r
 import { clearStoredToken } from "../tokenStorage.js";\r
 \r
+const globalStore = useGlobalStore();\r
 const menu = ref();\r
 const router = useRouter();\r
 \r
@@ -60,14 +63,20 @@ const menuItems = [
   },\r
   {\r
     separator: true,\r
+    visible: showLogOutButton,\r
   },\r
   {\r
     label: "Log Out",\r
     icon: mdilLogout,\r
     command: logOut,\r
+    visible: showLogOutButton,\r
   },\r
 ];\r
 \r
+const showNewButton = computed(() => {\r
+  return globalStore.authType !== authTypes.readOnly;\r
+});\r
+\r
 function logOut() {\r
   clearStoredToken();\r
   router.push({ name: "login" });\r
@@ -76,4 +85,8 @@ function logOut() {
 function toggleMenu(event) {\r
   menu.value.toggle(event);\r
 }\r
+\r
+function showLogOutButton() {\r
+  return ![authTypes.none, authTypes.readOnly].includes(globalStore.authType);\r
+}\r
 </script>\r