Enhance UI with dynamic headers and user dropdown menu

Added support for dynamic titles and subtitles in department dashboards. Reworked the user navigation to include a dropdown menu with permission-based options and logout functionality. Improved overall layout and user interaction across components.

src/components/displays/user/UserNavigationTop.vue

@@ -1,11 +1,55 @@
 <script setup>
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-console.log(SessionUser);
-console.log(SessionUser.user);
+import { ref } from 'vue';
+import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";
+
+const isDisplayingDropdown = ref(false);
+
+const redirect = (path) => {
+  window.location.href = path;
+};
 </script>
 
 <template>
-  <p>{{SessionUser.user.display_name}}</p>
+  <div class="dropdown is-right" :class="{ 'is-active': isDisplayingDropdown }">
+    <div class="dropdown-trigger">
+      <button class="button" @click="isDisplayingDropdown = !isDisplayingDropdown">
+        <span>{{SessionUser.user.display_name}}</span>
+        <span class="icon is-small">
+          <i class="fas fa-angle-down" aria-hidden="true"></i>
+        </span>
+      </button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+      <div class="dropdown-content">
+        <!-- Dropdown items -->
+        <a href="#" class="dropdown-item">
+          <p class="is-size-7">Profil</p>
+        </a>
+        <a href="#" class="dropdown-item">
+          <p class="is-size-7">Indstillinger</p>
+        </a>
+        <RequiresPermission permission="user">
+          <a href="#" class="dropdown-item" @click="redirect('/user')"> <!-- Redirect to the user page -->
+            <p class="is-size-7">Kundeside</p>
+          </a>
+        </RequiresPermission>
+        <RequiresPermission permission="admin">
+          <a href="#" class="dropdown-item" @click="redirect('/admin')"> <!-- Redirect to the admin page -->
+            <p class="is-size-7">Afdelingsadministration</p>
+          </a>
+        </RequiresPermission>
+        <RequiresPermission permission="superuser">
+          <a href="#" class="dropdown-item" @click="redirect('/superuser')"> <!-- Redirect to the superuser page -->
+            <p class="is-size-7">System administration</p>
+          </a>
+        </RequiresPermission>
+        <a href="#" class="dropdown-item" @click="SessionUser.auth.logout()">
+          <p class="is-size-7 has-text-danger">Log ud</p>
+        </a>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>

src/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue

@@ -23,9 +23,36 @@ const slots = defineSlots()
         :style="{ 'background-color': Colors.headers.backgroundColor, 'color': Colors.headers.textColor }"
         style="margin-bottom: 0; padding-bottom: 0;"
     >
-      <slot name="header"></slot>
-      <!-- If the header slot is empty, show the default header -->
-      <UserNavigationTop class="my-4 is-float-right" style="margin-right: 5rem;" :style="{ 'color': Colors.headers.textColor }" />
+      <div class="columns is-vcentered is-mobile">
+        <!-- Spacer -->
+        <div class="column is-2"></div>
+        <!-- Page title -> Subtitle -->
+        <div class="column pl-6">
+          <!-- Page title (If any) -->
+          <span
+              class="is-size-4"
+              v-if="title"
+          >
+            {{ title }}
+          </span>
+          <!-- Page subtitle (If any) -->
+          <span
+              class="is-size-6"
+              v-if="subtitle"
+              :class="{ 'is-size-5': !title, 'pl-2': title }"
+          >
+            {{ subtitle }}
+          </span>
+        </div>
+        <!-- Header slot -->
+        <div class="column">
+          <slot name="header"></slot>
+        </div>
+        <!-- User navigation -->
+        <div class="column">
+          <UserNavigationTop class="my-4 is-float-right" style="margin-right: 5rem;" :style="{ 'color': Colors.headers.textColor }" />
+        </div>
+      </div>
     </div>
     <!-- Left menu -->
     <div class="column is-2"
@@ -37,15 +64,6 @@ const slots = defineSlots()
         class="column is-10"
         :style="{ 'background-color': Colors.global.backgroundColor, 'color': Colors.global.textColor }"
     >
-      <div class="pl-6 pt-6 mb-0" v-if="title || subtitle">
-        <div class="columns is-vcentered is-mobile">
-          <div class="column is-12">
-            <PageTitle :title="title" :subtitle="subtitle">
-              <slot name="buttons"></slot>
-            </PageTitle>
-          </div>
-        </div>
-      </div>
       <div class="pl-6 pr-6 pb-6">
         <slot></slot>
       </div>

src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPos.vue

@@ -12,6 +12,8 @@ import PageTitle from "@/components/global/PageTitle.vue";
 
 <template>
   <DepartmentDashboardPageWrapper
+      title="Kassesystem"
+      subtitle="Her kan du håndtere salg og ordrer"
   >
     <template #default>
       <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">