updated navbar (#15)

Author: Nono10jf

src/frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fontsource/roboto": "^5.2.8",
+    "@fortawesome/fontawesome-free": "^7.1.0",
     "bootstrap": "4",
     "bootstrap-vue": "^2.23.1",
     "vue": "^3.5.22",

src/frontend/src/assets/logo_situation_room.png

@@ -1,26 +1,70 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import logoUrl from '../assets/logo_situation_room.png'
 import { RouterLink } from 'vue-router'
 
+const pageTitle = ref('Dashboard')
+
 onMounted(() => {
-    const existing = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
-    const link = existing ?? document.createElement('link')
-    link.rel = 'icon'
-    link.type = 'image/png'
-    link.href = logoUrl
-    if (!existing) document.head.appendChild(link)
+  const existing = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+  const link = existing ?? document.createElement('link')
+  link.rel = 'icon'
+  link.type = 'image/png'
+  link.href = logoUrl
+  if (!existing) document.head.appendChild(link)
 })
+
+function scaleUp(e: MouseEvent) {
+  (e.currentTarget as HTMLElement).style.transform = 'scale(1.15)'
+}
+
+function scaleDown(e: MouseEvent) {
+  (e.currentTarget as HTMLElement).style.transform = 'scale(1)'
+}
 </script>
 
 <template>
-    <nav class="navbar bg-light py-3">
-        <div class="container-fluid">
-            <RouterLink to="/" class="navbar-brand d-flex align-items-center fs-2">
-                <img :src="logoUrl" alt="Situation Room logo" height="56" class="me-2" />
-                <span>Situation Room</span>
-            </RouterLink>
-        </div>
-    </nav>
-    <hr class="m-0" />
-</template>
+  <nav class="navbar py-2 px-3" style="background-color: #F5F5F5;">
+    <div class="container-fluid d-flex justify-content-between align-items-center flex-nowrap">
+      <RouterLink to="/" class="navbar-brand d-flex align-items-center">
+        <img
+          :src="logoUrl"
+          alt="Situation Room logo"
+          class="logo"
+          style="height: clamp(1.8rem, 4vw, 3rem); width: auto; transition: transform 0.2s ease;"
+        />
+      </RouterLink>
+
+      <div
+        class="flex-grow-1 text-center"
+        style="font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+      >
+        {{ pageTitle }}
+      </div>
+
+      <div class="d-flex align-items-center">
+        <v-icon
+          class="icon"
+          style="font-size: clamp(1.25rem, 3vw, 2rem); cursor: pointer; transition: transform 0.2s ease;"
+          @mouseover="scaleUp"
+          @mouseout="scaleDown"
+        >mdi-account-search</v-icon>
+
+        <v-icon
+          class="icon"
+          style="font-size: clamp(1.25rem, 3vw, 2rem); cursor: pointer; transition: transform 0.2s ease; margin-left: clamp(0.5rem, 2vw, 2rem);"
+          @mouseover="scaleUp"
+          @mouseout="scaleDown"
+        >mdi-message-processing-outline</v-icon>
+
+        <v-icon
+          class="icon"
+          style="font-size: clamp(1.25rem, 3vw, 2rem); cursor: pointer; transition: transform 0.2s ease; margin-left: clamp(0.5rem, 2vw, 2rem);"
+          @mouseover="scaleUp"
+          @mouseout="scaleDown"
+        >mdi-account-circle</v-icon>
+      </div>
+    </div>
+  </nav>
+  <hr style="border: none; height: 1px; background-color: #000; margin: 0;" />
+</template>

src/frontend/src/components/hermes-navbar-component.vue

@@ -162,6 +162,11 @@
   resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-5.2.8.tgz#73411c434b9162019b8ca18abd8245489809cca9"
   integrity sha512-oh9g4Cg3loVMz9MWeKWfDI+ooxxG1aRVetkiKIb2ESS2rrryGecQ/y4pAj4z5A5ebyw450dYRi/c4k/I3UBhHA==
 
+"@fortawesome/fontawesome-free@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz#8eb76278515341720aa74485266f8be121089529"
+  integrity sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==
+
 "@jridgewell/sourcemap-codec@^1.5.5":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"