Update application header

frontend/src/assets/main.scss

@@ -215,6 +215,10 @@ label {
   }
 }
 
+.p-menu .p-menuitem-link {
+  text-decoration: none !important;
+}
+
 .header-right .p-column-header-content {
   justify-content: right;
 }

frontend/src/components/common/HeaderMenu.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { Button, Menu } from '@/lib/primevue';
+import { storeToRefs } from 'pinia';
+import { useAuthNStore } from '@/store';
+
+import { type Ref } from 'vue';
+import { RouteName } from '@/utils/enums/application';
+
+// Store
+const { getIsAuthenticated, getProfile } = storeToRefs(useAuthNStore());
+
+// State
+const { t } = useI18n();
+const items = ref([
+  {
+    label: t('headerMenu.logout'),
+    icon: 'pi pi-sign-out',
+    command: () => {
+      router.push({ name: RouteName.OIDC_LOGOUT });
+    }
+  }
+]);
+const menu: Ref<Menu | undefined> = ref(undefined);
+
+// Actions
+const router = useRouter();
+
+const toggle = (event: any) => {
+  menu.value?.toggle(event);
+};
+</script>
+
+<template>
+  <div
+    v-if="getIsAuthenticated"
+    class="card flex justify-content-center"
+  >
+    <Button
+      id="menu-toggle"
+      type="button"
+      text
+      class="font-bold text-lg"
+      aria-haspopup="true"
+      aria-controls="overlay-menu"
+      @click="toggle"
+    >
+      {{ getProfile?.name }}
+      <font-awesome-icon
+        icon="fa-solid fa-bars"
+        class="ml-2 app-primary-color no-click"
+      />
+    </Button>
+    <Menu
+      id="overlay-menu"
+      ref="menu"
+      :model="items"
+      :popup="true"
+    />
+  </div>
+</template>
+
+<style lang="css" scoped>
+.no-click {
+  pointer-events: none;
+}
+</style>

frontend/src/components/housing/submission/SubmissionIntakeForm.vue

@@ -564,7 +564,7 @@ onBeforeMount(async () => {
     />
 
     <div class="flex justify-content-center app-primary-color mt-3">
-      <h3>Project Investigation Form</h3>
+      <h3>Housing Project Form</h3>
     </div>
 
     <Form

frontend/src/components/layout/Header.vue

@@ -1,40 +1,41 @@
 <script setup lang="ts">
-import { LoginButton } from '@/components/layout';
+import { useI18n } from 'vue-i18n';
+
+import HeaderMenu from '../common/HeaderMenu.vue';
+
+// Actions
+const { t } = useI18n();
 </script>
 
 <template>
   <header>
     <nav id="header-branding">
-      <div class="flex flex-row flex-wrap align-items-center p-2 lg:pl-6">
+      <div class="flex flex-row flex-wrap align-items-center lg:pl-6">
         <div class="flex flex-none">
           <a href="https://www2.gov.bc.ca">
             <img
-              src="@/assets/images/bc_logo.svg"
-              width="181"
-              height="44"
+              src="@/assets/images/BCID_H_rgb_pos.png"
+              class="bc-logo"
               alt="B.C. Government Logo"
             />
           </a>
         </div>
+        <div class="mx-2 bcds-header-line" />
         <div class="flex flex-grow-1 ml-2">
-          <h2 class="m-0">Permit Connect Services</h2>
+          <h2 class="m-0 app-primary-color">{{ t('header.name') }}</h2>
         </div>
-        <div class="flex flex-none lg:mr-6 ml-2">
-          <LoginButton />
+        <div class="flex justify-content-end lg:mr-6">
+          <HeaderMenu />
         </div>
       </div>
     </nav>
   </header>
 </template>
 
 <style lang="scss" scoped>
-h2 {
-  color: rgba(255, 255, 255, 0.9) !important;
-}
-
 #header-branding {
-  background-color: #003366;
-  color: white;
+  background-color: white;
+  color: $app-primary;
   white-space: nowrap;
   box-shadow: 0 6px 8px -4px #b3b1b3;
   -webkit-box-shadow: 0 6px 8px -4px #b3b1b3;
@@ -44,4 +45,15 @@ h2 {
     border-bottom: 2px solid #fcba19;
   }
 }
+
+.bc-logo {
+  max-height: 60px;
+  height: 60px;
+}
+
+.bcds-header-line {
+  background-color: #d8d8d8;
+  width: 1px;
+  height: 32px;
+}
 </style>

frontend/src/components/layout/LoginButton.vue

@@ -53,8 +53,8 @@ function logout() {
   </Button>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 button {
-  color: white !important;
+  color: $app-primary !important;
 }
 </style>

frontend/src/lib/primevue/index.ts

@@ -23,6 +23,7 @@ export { default as InputMask } from 'primevue/inputmask';
 export { default as InputNumber } from 'primevue/inputnumber';
 export { default as InputSwitch } from 'primevue/inputswitch';
 export { default as InputText } from 'primevue/inputtext';
+export { default as Menu } from 'primevue/menu';
 export { default as Menubar } from 'primevue/menubar';
 export { default as Message } from 'primevue/message';
 export { default as Panel } from 'primevue/panel';

frontend/src/locales/en-CA.json

@@ -10,6 +10,12 @@
     "supervisor": "SUPERVISOR",
     "admin": "ADMIN"
   },
+  "header": {
+    "name": "Permit Connect Services"
+  },
+  "headerMenu": {
+    "logout": "Log out"
+  },
   "loginButton": {
     "login": "Log in",
     "logout": "Log out"

frontend/tests/unit/components/layout/Header.spec.ts

@@ -5,7 +5,13 @@ import { shallowMount } from '@vue/test-utils';
 import Header from '@/components/layout/Header.vue';
 import { StorageKey } from '@/utils/enums/application';
 
-// Mock router calls
+// Mock dependencies
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn()
+  })
+}));
+
 vi.mock('vue-router', () => ({
   useRouter: () => ({
     push: vi.fn()