Merge pull request #45 from phits-tech/bug/burger-and-top-menu

Hamburger shows/hides menu on mobile

Author: antonyharfield

hosting/package.json

@@ -22,16 +22,16 @@
     "vue": "^3.0.0",
     "vue-class-component": "8.0.0-rc.1",
     "vue-meta": "^3.0.0-alpha.4",
-    "vue-property-decorator": "^9.1.2",
+    "vue-property-decorator": "^10.0.0-rc.3",
     "vue-router": "^4.0.0-0",
     "vue-router-multiguard": "^1.0.3",
     "vuex": "^4.0.0-0",
     "vuexfire": "^3.2.5"
   },
   "devDependencies": {
-    "@tailwindcss/postcss7-compat": "^2.0.3",
     "@tailwindcss/aspect-ratio": "^0.2.0",
     "@tailwindcss/line-clamp": "^0.2.0",
+    "@tailwindcss/postcss7-compat": "^2.0.3",
     "@types/jest": "^26.0.22",
     "@types/node": "14.14.37",
     "@typescript-eslint/eslint-plugin": "^4.22.0",

hosting/src/global/App/NavBar/NavBar.html

@@ -5,19 +5,18 @@
         <!-- Mobile menu button-->
         <button
           type="button"
-          class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-brand-black-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+          class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-brand-black-400 focus:outline-none"
           aria-controls="mobile-menu"
           aria-expanded="false"
+          @click="toggleCollapse"
         >
           <span class="sr-only">Open main menu</span>
           <!--
             Icon when menu is closed.
-
             Heroicon name: outline/menu
-
-            Menu open: "hidden", Menu closed: "block"
           -->
           <svg
+            ref="menuClosedIcon"
             class="block h-6 w-6"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -34,12 +33,10 @@
           </svg>
           <!--
             Icon when menu is open.
-
             Heroicon name: outline/x
-
-            Menu open: "block", Menu closed: "hidden"
           -->
           <svg
+            ref="menuOpenIcon"
             class="hidden h-6 w-6"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -113,11 +110,11 @@
         </div>
       </div>
       <div
-        class="absolute inset-y-0 right-0 flex items-center sm:static sm:inset-auto pr-2 sm:pr-0"
+        class="absolute inset-y-0 right-0 flex items-center sm:static sm:inset-auto"
       >
         <router-link
           :to="{ name: 'EventsCreate' }"
-          class="flex items-center px-3 py-2 rounded-md ring-2 ring-brand-blue bg-brand-black-900 hover:bg-brand-black text-gray-300 hover:text-white"
+          class="flex items-center px-2 sm:px-3 py-2 rounded-md sm:ring-2 sm:ring-brand-blue bg-brand-black sm:hover:bg-brand-blue text-gray-300 hover:text-white"
         >
           <svg
             class="h-6 w-6 mr-1"
@@ -134,7 +131,9 @@
               d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
             />
           </svg>
-          <span class="pl-1 pr-0.5 text-sm md:text-base">Add an event</span>
+          <span class="pl-1 pr-0.5 hidden sm:block text-sm md:text-base"
+            >Add an event</span
+          >
         </router-link>
 
         <!-- Profile dropdown -->
@@ -197,24 +196,23 @@
   </div>
 
   <!-- Mobile menu, show/hide based on menu state. -->
-  <div class="sm:hidden" id="mobile-menu">
+  <div ref="mobileMenu" class="hidden sm:hidden">
     <div class="px-2 pt-2 pb-3 space-y-1">
-      <!-- 
-        Current: "bg-gray-800 text-white"
-        Default: "text-gray-300 hover:bg-brand-black-400 hover:text-white"
-      -->
       <router-link
         :to="{ name: 'Events' }"
+        @click="$router.push({ name: 'Events' }); toggleCollapse()"
         class="text-gray-300 hover:bg-brand-black-400 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
         >Events</router-link
       >
       <router-link
         :to="{ name: 'Spaces' }"
+        @click="$router.push({ name: 'Spaces' }); toggleCollapse()"
         class="text-gray-300 hover:bg-brand-black-400 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
         >Spaces</router-link
       >
       <router-link
         :to="{ name: 'Heroes' }"
+        @click="$router.push({ name: 'Heroes' }); toggleCollapse()"
         class="text-gray-300 hover:bg-brand-black-400 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
         >Heroes</router-link
       >

hosting/src/global/App/NavBar/NavBar.ts

@@ -1,3 +1,20 @@
 import { Vue } from 'vue-class-component'
+import { Ref } from 'vue-property-decorator'
 
-export default class NavBar extends Vue {}
+export default class NavBar extends Vue {
+  @Ref('mobileMenu') readonly mobileMenu!: HTMLElement
+  @Ref('menuOpenIcon') readonly menuOpenIcon!: HTMLElement
+  @Ref('menuClosedIcon') readonly menuClosedIcon!: HTMLElement
+
+  toggleCollapse(): void {
+    if (this.mobileMenu.classList.contains('hidden')) {
+      this.mobileMenu.classList.replace('hidden', 'block')
+      this.menuOpenIcon.classList.replace('hidden', 'block')
+      this.menuClosedIcon.classList.replace('block', 'hidden')
+    } else {
+      this.mobileMenu.classList.replace('block', 'hidden')
+      this.menuOpenIcon.classList.replace('block', 'hidden')
+      this.menuClosedIcon.classList.replace('hidden', 'block')
+    }
+  }
+}