Fixed the join button not showing while logged out

ui/src/components/Navigation/Navbar.vue

@@ -101,7 +101,7 @@ const navConfig: NavItem[] = [
     {
         title: 'Join',
         to: '/join',
-        status: 'guest'
+        status: 'guest',
     },
 ];
 
@@ -109,8 +109,27 @@ const filteredNav = computed(() => {
     return navConfig.flatMap(item => {
         const filtered: NavItem[] = [];
 
-        const shouldShow = (!item.status || item.status === auth.accountStatus.value) &&
+        // 1. Check Login Requirements
-            (!item.roles || auth.hasAnyRole(item.roles));
+        const isLoggedIn = userStore.isLoggedIn;
+
+        // 2. Determine visibility based on status
+        let shouldShow = false;
+
+        if (!item.status) {
+            // Public items - always show
+            shouldShow = true;
+        } else if (item.status === 'guest') {
+            // Show if NOT logged in OR logged in as guest (but NOT a member)
+            shouldShow = !isLoggedIn || auth.accountStatus.value === 'guest';
+        } else if (item.status === 'member') {
+            // Show ONLY if logged in as member
+            shouldShow = isLoggedIn && auth.accountStatus.value === 'member';
+        }
+
+        // 3. Check Role Requirements (if status check passed)
+        if (shouldShow && item.roles) {
+            shouldShow = auth.hasAnyRole(item.roles);
+        }
 
         if (shouldShow) {
             if (item.items) {
@@ -391,7 +410,8 @@ function mobileNavigateTo(to: string) {
                             <!-- <Button variant="outline" size="xs" class="flex-1 h-8 text-xs"
                                 @click="mobileNavigateTo('/profile')">Profile</Button> -->
                             <Button variant="secondary" size="xs" class="flex-1 h-8 text-xs"
-                                @click="mobileNavigateTo('/join')">My Application</Button>
+                                @click="mobileNavigateTo('/join')">My
+                                Application</Button>
                             <Button variant="secondary" size="xs" class="flex-1 h-8 text-xs"
                                 @click="mobileNavigateTo('/applications')">Application History</Button>
                         </div>