Responsive menu for mobile

src/App.vue

@@ -27,7 +27,11 @@ import { RouterView } from 'vue-router'
 import NavBar from './components/NavBar.vue'
 import { CURRENT_SEASON } from '@/services/utilities'
 export default {
-  name: "App",
+  name: 'App',
+  components: {
+    RouterView,
+    NavBar
+  },
   data() {
     return {
       seasonNumber: CURRENT_SEASON as number

src/components/NavBar.vue

@@ -1,11 +1,14 @@
 <template>
-  <nav class="navbar navbar-expand-sm" style="margin-bottom: 1rem" id="navbar">
+  <nav class="navbar navbar-expand-sm" style="margin-bottom: 1rem">
     <RouterLink class="navbar-brand nav-link" to="/">SBa Season {{ seasonNumber() }}</RouterLink>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-collapse"
-      aria-controls="top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
+      aria-controls="top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation"
+      @click="setMobileNavBarState(!isMobileNavBarExpanded)">
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
     </button>
-    <div class="collapse navbar-collapse" id="top-navbar-collapse">
+    <div :class="[isMobileNavBarExpanded ? 'open-menu' : 'closed-menu collapse navbar-collapse']">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item">
           <RouterLink class="nav-link" to="/schedule">Schedule</RouterLink>
@@ -33,12 +36,13 @@
         </li>
         <li v-if="isAuthenticated && userTeam" class="nav-item">
           <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber(), teamAbbreviation: userTeam.abbrev } }">
-            <img id="thumbnail" style="max-height: 35px; float:right; vertical-align:middle" :src=userTeam?.thumbnail>
+            <img id="thumbnail" style="max-height: 35px; vertical-align: middle;" :src=userTeam?.thumbnail>
           </RouterLink>
         </li>
       </ul>
 
-      <form class="form-inline" @submit.stop.prevent="searchPlayers">
+      <form class="form-inline" :style="isMobileNavBarExpanded ? 'padding-top: 5px' : ''"
+        @submit.stop.prevent="searchPlayers">
         <input type="text" name="name" placeholder="Player Search" list="player-names" v-model="searchPlayerName">
         <datalist id="player-names">
           <option v-for="name in sortedPlayerNames" :key="name" :value="name">{{ name }}</option>
@@ -89,13 +93,20 @@ export default {
       isAuthenticated: false as boolean,
       userTeam: undefined as Team | undefined,
       players: [] as Player[],
-      searchPlayerName: undefined
+      searchPlayerName: undefined,
+      isMobileNavBarExpanded: false
     }
   },
   created() {
     this.populatePlayerNames()
     this.completeAuthentication()
     this.fetchUserTeam()
+    this.setInitialMobileNavBarState()
+  },
+  mounted() {
+    window.addEventListener('navbar-storage-changed', (event) => {
+      this.isMobileNavBarExpanded = (<CustomEvent>event).detail.storage
+    })
   },
   computed: {
     menuOptions(): MenuOption[] {
@@ -301,6 +312,14 @@ export default {
     searchPlayers(): void {
       this.$router.push({ path: `/players/${this.seasonNumber()}/${this.searchPlayerName}` })
     },
+    setMobileNavBarState(isExpanded: boolean): void {
+      this.isMobileNavBarExpanded = isExpanded
+      isExpanded ? sessionStorage.setItem('navbar', JSON.stringify(isExpanded)) : sessionStorage.clear()
+    },
+    setInitialMobileNavBarState(): void {
+      const isExpanded = sessionStorage.getItem('navbar')
+      this.isMobileNavBarExpanded = isExpanded !== null && JSON.stringify(isExpanded) == 'true'
+    },
     authenticate(): void {
       authenticate()
     },
@@ -327,6 +346,15 @@ export default {
 </script>
 
 <style>
+/* Nav bar hamburger icon */
+.bar {
+  width: 30px;
+  height: 3px;
+  background-color: #333;
+  margin: 5px 0;
+  transform: 0.25s;
+}
+
 .nav {
   margin: 0%;
   display: flex;
@@ -347,4 +375,23 @@ export default {
   line-height: inherit;
   white-space: nowrap;
 }
+
+@media screen and (max-width: 768px) {
+  .nav {
+    padding-top: 10px;
+    position: absolute;
+    width: 100%;
+  }
+
+  .open-menu {
+    opacity: 1;
+    height: 100%;
+  }
+
+  .closed-menu {
+    opacity: 0;
+    height: 0;
+    padding: 0;
+  }
+}
 </style>

src/router/index.ts

@@ -65,11 +65,21 @@ function castScheduleRouteParams(route: { params: { seasonNumber: string, weekNu
   }
 }
 
-export const router = createRouter({
+const router = createRouter({
   history: createWebHistory(), //import.meta.env.BASE_URL),
   routes,
 })
 
+// making middleware ensure the responsive navbar is closed whenever a link is clicked
+router.beforeEach(() => {
+  sessionStorage.clear()
+  window.dispatchEvent(new CustomEvent('navbar-storage-changed', {
+    detail: {
+      storage: false
+    }
+  }))
+})
+
 // export function routerPush (name: AppRouteNames, params?: RouteParams): ReturnType<typeof router.push> {
 //   return params !== undefined
 //     ? router.push({