Merge pull request #176 from LCOGT/fix/mobile-header

Mobile menu

Author: LTDakin

src/components/Global/NavBar.vue

@@ -2,6 +2,21 @@
 import { RouterLink } from 'vue-router'
 import UserMenu from './UserMenu.vue'
 import ptrlogo from '../../assets/ptr_logo.png'
+import { ref } from 'vue'
+
+const isMobileMenuOpen = ref(false)
+const isActive = ref('')
+const navBurger = ref('navbar-burger')
+const navMenu = ref('navbar-menu')
+
+function toggleMobileMenu () {
+  isMobileMenuOpen.value = !isMobileMenuOpen.value
+  if (isActive.value === 'is-active') {
+    isActive.value = ''
+  } else {
+    isActive.value = 'is-active'
+  }
+}
 
 </script>
 
@@ -11,61 +26,37 @@ import ptrlogo from '../../assets/ptr_logo.png'
     role="navigation"
     aria-label="main navigation"
   >
-    <div class="navbar-brand">
-      <router-link
-        class="navbar-item"
-        to="/"
-      >
-        <img
-          :src="ptrlogo"
-          alt="Photon Ranch logo"
-        >
+  <div class="navbar-brand">
+      <router-link class="navbar-item" to="/">
+        <img :src="ptrlogo" alt="Photon Ranch logo"/>
       </router-link>
-      <a
-        role="button"
-        class="navbar-burger"
-        aria-label="menu"
-        aria-expanded="false"
-      >
-        <span aria-hidden="true" />
-        <span aria-hidden="true" />
-        <span aria-hidden="true" />
-        <span aria-hidden="true" />
+      <a role="button" aria-label="menu" aria-expanded="false" :class="[isActive, navBurger]" @click="toggleMobileMenu">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
       </a>
     </div>
-    <div class="navbar-menu">
+    <div :class="[isActive, navMenu]">
       <div class="navbar-start">
-        <div class="dropdown is-hoverable">
-          <div class="dropdown-trigger">
-            <button
-              class="button datalab-site-menu is-normal"
-              aria-haspopup="true"
-              aria-controls="ptr-site-menu"
-            >
-              <span>DataLab</span>
+        <div class="navbar-item has-dropdown is-hoverable">
+            <a class="navbar-link datalab-site-menu">
+              DataLab
+            </a>
+            <div class="navbar-dropdown">
+              <a href="https://learn.lco.global" class="navbar-item learn-site-item" >
+              <span>Learn</span>
               <span class="icon is-small">
-                <v-icon icon="mdi-menu-down" />
-              </span>
-            </button>
-          </div>
-          <div
-            id="ptr-site-menu"
-            class="dropdown-menu"
-            role="menu"
-          >
-            <div class="dropdown-content">
-              <a
-                href="https://learn.lco.global"
-                class="dropdown-item learn-site-item"
-              >Learn</a>
-              <a
-                href="https://photonranch.lco.global"
-                class="dropdown-item observe-site-item"
-              >Observe</a>
+                <v-icon icon="mdi-chevron-right" />
+              </span></a>
+              <a href="https://photonranch.lco.global" class="navbar-item observe-site-item">
+              <span>Observe</span>
+              <span class="icon is-small">
+                <v-icon icon="mdi-chevron-right" />
+              </span></a>
             </div>
           </div>
         </div>
-      </div>
       <div class="navbar-end">
         <router-link
           to="/projects"
@@ -96,29 +87,22 @@ import ptrlogo from '../../assets/ptr_logo.png'
     .navbar{
         min-height:2.75rem;
     }
-    button.datalab-site-menu{
+    .datalab-site-menu{
       color: var(--grey-level3);
       font-size: 2em;
-      padding: 0 10px;
       background-color: var(--green);
       text-transform: uppercase;
       font-family: var(--font-headers);
-
-      span {
-        padding:0;
-      }
     }
     .learn-site-item {
-      color: var(--off-white);
+      color: var(--blue) !important;
       font-size: 1.25em;
-      background-color: var(--blue);
       text-transform: uppercase;
       font-family: var(--font-headers);
     }
     .observe-site-item {
-      color: var(--off-white);
+      color: var(--red) !important;
       font-size: 1.25em;
-      background-color: var(--red);
       text-transform: uppercase;
       font-family: var(--font-headers);
     }