#3900 - Small screen responsiveness: Top Menu Nav Hamburger (#4272)

### As a part of this PR, the following have been completed:

1) Added a hamburger menu to allow for the top bar navigation when the
screen size is reduced.
2) The modal dialogs throughout the application have been updated to use
the `useDisplay` composable.

**Video representing the demo for the navigation drawer and the menu:**


https://github.com/user-attachments/assets/1c6d4f86-e4f3-402a-bcb6-067e275300e3

**Video representing the demo for the modal dialogs:**


https://github.com/user-attachments/assets/aa777d6c-6756-497f-a7cb-d55eef380838

sources/packages/web/src/components/generic/ModalDialogBase.vue

@@ -34,6 +34,7 @@
 
 <script lang="ts">
 import { ref, watch, defineComponent, computed } from "vue";
+import { useDisplay } from "vuetify";
 const dialogClosedEvent = "dialogClosed";
 
 export default defineComponent({
@@ -60,15 +61,7 @@ export default defineComponent({
 
   setup(props, context) {
     const showHideDialog = ref(false);
-    const showFullScreen = ref(true);
-    const mediaQuery = window.matchMedia(
-      "(max-width: 768px), (max-height: 576px)",
-    );
-    function handleScreenChange(e: MediaQueryList) {
-      showFullScreen.value = e.matches;
-    }
-    mediaQuery.addEventListener("change", () => handleScreenChange(mediaQuery));
-    handleScreenChange(mediaQuery);
+    const { smAndDown: showFullScreen } = useDisplay();
     const width = computed(() => (showFullScreen.value ? undefined : "auto"));
     watch(
       () => props.showDialog,

sources/packages/web/src/views/student/AppStudent.vue

@@ -6,6 +6,7 @@
       <v-btn-toggle
         selected-class="active-btn label-bold"
         v-model="toggleNav"
+        v-if="!smallScreen"
         class="navigation-btn float-left"
       >
         <v-btn
@@ -49,7 +50,6 @@
           prepend-icon="fa:far fa-hand-paper"
           >Request a Change</v-btn
         >
-
         <v-menu v-if="isAuthenticated">
           <template v-slot:activator="{ props }">
             <v-btn
@@ -64,6 +64,7 @@
             ></v-btn>
           </template>
           <v-list
+            v-show="isAuthenticated"
             active-class="active-list-item"
             density="compact"
             bg-color="default"
@@ -88,7 +89,37 @@
           </v-list>
         </v-menu>
       </v-btn-toggle>
+      <v-app-bar-nav-icon
+        variant="text"
+        @click.stop="drawer = !drawer"
+        v-if="showNavigationDrawer"
+      ></v-app-bar-nav-icon>
     </v-app-bar>
+    <v-navigation-drawer
+      v-if="showNavigationDrawer"
+      v-model="drawer"
+      location="right"
+      temporary
+    >
+      <v-list active-class="active-list-item" density="compact" color="primary">
+        <template v-for="(item, index) in menuItems" :key="index">
+          <v-list-item
+            :value="index"
+            @click="item.command"
+            :to="item.props?.to"
+            tabindex="0"
+          >
+            <v-list-item-title>
+              <span class="label-bold">{{ item.title }}</span>
+            </v-list-item-title>
+          </v-list-item>
+          <v-divider-inset-opaque
+            v-if="index < menuItems.length - 1"
+            :key="index"
+          ></v-divider-inset-opaque>
+        </template>
+      </v-list>
+    </v-navigation-drawer>
     <router-view name="sidebar"></router-view>
     <v-main class="body-background">
       <v-container fluid>
@@ -100,13 +131,14 @@
 
 <script lang="ts">
 import { useRouter } from "vue-router";
-import { computed, ref, defineComponent, onMounted } from "vue";
+import { computed, ref, defineComponent, onMounted, watchEffect } from "vue";
 import { StudentRoutesConst } from "@/constants/routes/RouteConstants";
 import { ClientIdType, MenuItemModel } from "@/types";
 import { useAuth, useStudentStore } from "@/composables";
 import BCLogo from "@/components/generic/BCLogo.vue";
 import IdleTimeChecker from "@/components/common/IdleTimeChecker.vue";
 import { AppConfigService } from "@/services/AppConfigService";
+import { useDisplay } from "vuetify";
 
 export default defineComponent({
   components: { BCLogo, IdleTimeChecker },
@@ -116,6 +148,9 @@ export default defineComponent({
     const router = useRouter();
     const { isAuthenticated } = useAuth();
     const { hasStudentAccount } = useStudentStore();
+    const drawer = ref(false);
+    const allowFulltime = ref(false);
+    const { smAndDown: smallScreen } = useDisplay();
 
     const logoClick = () => {
       if (hasStudentAccount.value) {
@@ -132,9 +167,56 @@ export default defineComponent({
       () => isAuthenticated.value && hasStudentAccount.value,
     );
 
+    const showNavigationDrawer = computed(() => {
+      return isAuthenticated.value && smallScreen.value;
+    });
+
+    // Close the navigation drawer when the screen is large.
+    watchEffect(() => {
+      if (!smallScreen.value) {
+        drawer.value = false;
+      }
+    });
+
     const menuItems = computed(() => {
       const items: MenuItemModel[] = [];
       if (hasStudentAccount.value) {
+        if (smallScreen.value) {
+          items.push(
+            {
+              title: "Home",
+              props: {
+                to: {
+                  name: StudentRoutesConst.STUDENT_DASHBOARD,
+                },
+              },
+            },
+            {
+              title: "Applications",
+              props: {
+                to: {
+                  name: StudentRoutesConst.STUDENT_APPLICATION_SUMMARY,
+                },
+              },
+            },
+            {
+              title: "File Uploader",
+              props: {
+                to: {
+                  name: StudentRoutesConst.STUDENT_FILE_UPLOADER,
+                },
+              },
+            },
+            {
+              title: "Request a Change",
+              props: {
+                to: {
+                  name: StudentRoutesConst.STUDENT_REQUEST_CHANGE,
+                },
+              },
+            },
+          );
+        }
         items.push(
           {
             title: "Profile",
@@ -152,17 +234,18 @@ export default defineComponent({
               },
             },
           },
-          {
+        );
+        if (allowFulltime.value) {
+          items.push({
             title: "Overawards Balance",
             props: {
               to: {
                 name: StudentRoutesConst.STUDENT_OVERAWARDS,
               },
             },
-          },
-        );
+          });
+        }
       }
-
       items.push({
         title: "Log Out",
         command: async () => {
@@ -174,13 +257,7 @@ export default defineComponent({
 
     onMounted(async () => {
       const { isFulltimeAllowed } = await AppConfigService.shared.config();
-      if (!isFulltimeAllowed) {
-        menuItems.value.forEach((item, index) => {
-          if (item.title === "Overawards Balance") {
-            menuItems.value.splice(index, 1);
-          }
-        });
-      }
+      allowFulltime.value = isFulltimeAllowed;
     });
     return {
       logoClick,
@@ -190,6 +267,9 @@ export default defineComponent({
       ClientIdType,
       hasAuthenticatedStudentAccount,
       toggleNav,
+      smallScreen,
+      drawer,
+      showNavigationDrawer,
     };
   },
 });