Header look and feel updates

frontend/src/assets/css/global.css

@@ -149,6 +149,10 @@ th {
 .v-table > .v-table__wrapper > table > tbody > tr > td, .v-table > .v-table__wrapper > table > thead > tr > th {
   padding: var(--v-table-padding);
 }
+.router-link-active{
+  font-weight: bold;
+  color: rgb(var(--v-theme-bcGovBlue));
+}
 /* .v-label{
   padding-top: 8px;
 } */

frontend/src/components/Header/BCHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-app-bar app color="bcGovBlue" dark>
+    <v-app-bar color="bcGovBlue" dark class="bc-header">
       <a class="navbar-brand ml-6" href="/">
         <img
           class="img-fluid d-md-block"
@@ -18,13 +18,9 @@
         <slot></slot>
       </div>
 
-      <v-menu v-model="menu" offset-y>
+      <v-menu v-if="smallScreen" v-model="menu" offset-y>
         <template #activator="{ props }">
-          <v-btn
-            icon
-            v-bind="props"
-            class="d-md-none d-lg-none d-xl-none d-xxl-none"
-          >
+          <v-btn icon v-bind="props">
             <v-icon>mdi-menu</v-icon>
           </v-btn>
         </template>
@@ -68,25 +64,28 @@
       </v-menu>
     </v-app-bar>
 
-    <v-app-bar v-if="!smallScreen" density="compact">
-      <v-toolbar>
-        <v-btn text v-for="link in menuLinks" :key="link.id" class="text-none">
-          <router-link
-            :to="link.route"
-            style="text-decoration: none; color: inherit"
-          >
+    <v-app-bar v-if="!smallScreen" density="compact" class="header-nav">
+      <v-toolbar class="pl-4 pr-6">
+        <v-btn
+          text
+          v-for="link in menuLinks"
+          :key="link.id"
+          class="text-none"
+          size="small"
+        >
+          <router-link :to="link.route">
             {{ link.title }}
           </router-link>
         </v-btn>
-        <v-btn v-if="!profile.pen" class="text-none">
+        <v-btn v-if="!profile.pen" size="small" class="text-none">
           <a
             id="profile-route"
             class="text-decoration-none text-disabled"
             :disabled="true"
             >Profile (Student Not Loaded)</a
           >
         </v-btn>
-        <v-btn v-else>
+        <v-btn size="small" v-else>
           <router-link
             :to="`/student-profile/${profile.studentID}`"
             id="profile-route"
@@ -98,9 +97,10 @@
         <div class="form-group top-search mb-0">
           <v-form @submit.prevent class="d-flex mb-0">
             <v-text-field
+              id="header-pen-search"
               density="compact"
               variant="outlined"
-              size="40"
+              size="9"
               type="search"
               v-model="penInput"
               maxlength="9"
@@ -109,18 +109,11 @@
               ref="penSearch"
               hide-details
               v-on:keyup="keyHandler"
-            ></v-text-field>
-            <v-btn
-              @click="findStudentByPen"
-              icon="mdi-magnify"
-              density="comfortable"
+              append-inner-icon="mdi-magnify"
+              @click:appendInner="findStudentByPen"
               :loading="searchLoading"
-              rounded="sm"
-              variant="text"
               color="primary"
-              class="px-2 mx-2 header-search-btn text-none"
-            >
-            </v-btn>
+            ></v-text-field>
           </v-form>
         </div>
       </v-toolbar>
@@ -185,7 +178,7 @@ export default {
       return window.innerWidth;
     },
     isDesktop() {
-      return window.innerWidth >= 600; // Adjust this breakpoint as needed
+      return window.innerWidth >= 760; // Adjust this breakpoint as needed
     },
   },
   async created() {
@@ -204,8 +197,6 @@ export default {
     const versionResponse = await CommonService.getVersion();
     this.version = versionResponse.data;
   },
-  mounted() {},
-  beforeDestroy() {},
   methods: {
     updateDimensions() {
       //console.log(window.innerWidth); // Log the current window width for debugging
@@ -268,9 +259,41 @@ export default {
 </script>
 
 <style scoped>
-@media (max-width: 760px) {
-  .hide-on-small {
-    display: none;
-  }
+:deep(header.bc-header) {
+  border-bottom: 2px solid rgb(var(--v-theme-bcGovGold));
+}
+:deep(.header-nav .v-btn) {
+  font-size: 0.825em;
+  border-right: 1px solid
+    rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
+  border-radius: 0;
+}
+:deep(.header-nav .v-btn):hover {
+  background-color: transparent;
+  text-decoration: underline;
+  border-radius: 2px;
+}
+:deep(.v-btn:has(.text-disabled)):hover {
+  text-decoration: none;
+}
+:deep(.v-btn:hover > .v-btn__overlay) {
+  opacity: 0;
+}
+:deep(.header-nav .v-btn):last-of-type {
+  border-right: none;
+}
+:deep(.header-nav .v-btn a) {
+  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
+  text-decoration: none !important;
+}
+:deep(#header-pen-search) {
+  padding: 4px 16px;
+  min-height: 0;
+}
+:deep(.v-field__append-inner i.v-icon):hover {
+  color: rgb(var(--v-theme-bcGovBlue));
+  background-color: rgba(var(--v-theme-bcGovBlue), var(--v-hover-opacity));
+  border-radius: 4px;
+  padding: 12px;
 }
 </style>

frontend/src/main.js

@@ -37,7 +37,7 @@ const bcGovTheme = {
   //override vue variables below; each variable appears in the DOM and can be accessed via CSS with '--v-' prepended,
   // so btn-size will become --v-btn-size in the DOM and CSS
   variables: {
-    "btn-size": "1rem",
+    // "btn-size": "1rem",
     "table-padding": "0 4px",
   },
 };