"Improve navigation menu styles, add dynamic visibility for logout link, and enhance mobile menu layout and usability."

src/components/models/navigation/items/NavigationMenuItemsGlobal.vue

@@ -84,6 +84,7 @@ const items = computed<NavigationItemProps[]>(() => [
     to: `/logout`,
     type: 'link',
     permissions: ['user'],
+    hidden: !SessionUser.authenticated.value
   }
 ]);
 

src/components/viewport/page/headers/MobileNavigation.vue

@@ -58,13 +58,18 @@ const VITE_IS_DEV = import.meta.env.DEV || false;
         </div>
       </nav>
       <!-- Menu content -->
-      <NavigationMenuItems />
-      <!-- Bottom version info -->
-      <div class="has-text-centered" style="padding: 16px; font-size: 12px; color: gray;">
-        <div>Version: {{ VITE_APP_VERSION }}</div>
-        <div>Commit: {{ VITE_COMMIT_HASH }}</div>
-        <div>Build Date: {{ SessionUser.functions.date.toLocal(VITE_BUILD_DATE) }}</div>
-        <div v-if="VITE_IS_DEV" style="color: red;">Development Mode</div>
+      <div style="margin-top: 24px; max-height: calc(100vh - 160px); overflow-y: auto;">
+        <div class="last-child-without-bottom-border">
+          <NavigationMenuItems />
+        </div>
+        <!-- Bottom version info -->
+        <div class="has-text-centered" style="padding: 16px; font-size: 12px; color: gray;">
+          <hr/>
+          <div>Version: {{ VITE_APP_VERSION }}</div>
+          <div>Commit: {{ VITE_COMMIT_HASH }}</div>
+          <div>Build Date: {{ SessionUser.functions.date.toLocal(VITE_BUILD_DATE) }}</div>
+          <div v-if="VITE_IS_DEV" style="color: red;">Development Mode</div>
+        </div>
       </div>
     </div>
 
@@ -72,11 +77,14 @@ const VITE_IS_DEV = import.meta.env.DEV || false;
 </template>
 
 <style scoped>
+.last-child-without-bottom-border:last-child {
+  border-bottom-color: transparent;
+}
 .mobile-menu-open {
   position: fixed;
   top: 0;
   right: 0;
-  height: 100%;
+  height: 100vh;
   background-color: white;
   display: flex;
   z-index: 1000;

src/components/viewport/page/headers/menu/NavigationMenuDepartment.vue

@@ -78,6 +78,7 @@ const getDepartmentLabel = (departmentId: number): string => {
         <b-tooltip position="is-bottom" multilined type="is-info">
           <b-button icon-left="building"
                     icon-pack="fas"
+                    size="is-small"
                     :label="getDepartmentLabel(SessionUser.functions.getDepartmentIdFromUrl()) || selectADepartmentString"
                     class="is-fullwidth is-rounded"/>
           <template v-slot:content>

src/components/viewport/page/headers/menu/NavigationMenuItem.vue

@@ -251,5 +251,9 @@ updateDefaultDepartmentId();
   flex-grow: 0;
   margin-bottom: 12px;
 }
+.custom-container:last-child {
+  margin-bottom: 0px;
+  border-bottom: none;
+}
 
 </style>