add mobile menu

noi-techpark · Jul 10, 2023 · b5a7805 · b5a7805
1 parent 045cbc0
commit b5a7805
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 222 deletions.
diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
@@ -6,18 +6,20 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <template>
   <div>
-    <loading
-      :active.sync="isLoading"
-      :z-index="999999"
-      color="#61853b"
-      background-color="#020202"
-      :opacity="0.7"
-    ></loading>
-    <Nav />
-    <main>
-      <nuxt />
-    </main>
-    <Footer />
+    <b-overlay spinner-type="none" :show="showOverlay" variant="dark">
+      <loading
+        :active.sync="isLoading"
+        :z-index="999999"
+        color="#61853b"
+        background-color="#020202"
+        :opacity="0.7"
+      ></loading>
+      <Nav v-on:toggle-overlay="showOverlay = !showOverlay" v-on:hide-overlay="showOverlay = false"/>
+      <main>
+        <nuxt />
+      </main>
+      <Footer />
+    </b-overlay>
   </div>
 </template>
 
@@ -40,6 +42,11 @@ export default Vue.extend({
   computed: {
     ...mapGetters('loader', ['isLoading']),
   },
+  data: () => {
+    return {
+      showOverlay: false
+    }
+  },
   mounted() {
     this.$store.dispatch('searchtags/loadSearchtags');
   },

diff --git a/frontend/src/layouts/partials/header.vue b/frontend/src/layouts/partials/header.vue
diff --git a/frontend/src/layouts/partials/nav-menu.vue b/frontend/src/layouts/partials/nav-menu.vue
diff --git a/frontend/src/layouts/partials/nav.vue b/frontend/src/layouts/partials/nav.vue
@@ -5,15 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div class="sticky-top">
+  <div class="sticky-top nav-wrapper">
     <div v-if="showBadge" class="bg">
-      <div class="container py-2">
-        <div class="d-inline rounded custom-badge text-small"><span>TESTING</span></div>
+      <div class="container py-2 d-flex align-items-center justify-content-between">
+        <div class="d-inline rounded custom-badge text-small">TESTING</div>
+
+        <a class="ml-auto no-external-icon text-small d-lg-none" href="https://opendatahub.com" target="_blank">
+          presented by <img class="pl-2" src="/open-data-hub-sm.svg" alt="Open Data Hub">
+        </a>
       </div>
     </div>
     <nav class="border-bottom bg-white">
       <div class="container">
         <b-navbar class="px-0" toggleable="lg">
+
           <b-navbar-brand :to="localePath('index')">
             <div class="h-100 d-flex flex-row align-items-center">
               <div class="flex-shrink-1">
@@ -23,23 +28,33 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               <ToolBadge class="mr-2" />
             </div>
           </b-navbar-brand>
-          <b-navbar-nav class="flex-grow-1 align-items-center">
-            <b-nav-item :to="localePath('index')">
-              Web Components
-            </b-nav-item>
-            <b-nav-item :to="localePath('how-to')">
-              How to
-            </b-nav-item>
-            <b-nav-item :to="localePath('validator')">
-              Validator
-            </b-nav-item>
-            <b-nav-item href="https://opendatahub.com/contact" target="_blank">
-              Contact
-            </b-nav-item>
-            <b-nav-item class="ml-auto no-external-icon text-small" href="https://opendatahub.com" target="_blank">
-              presented by <img class="pl-2" src="/open-data-hub-sm.svg" alt="Open Data Hub">
-            </b-nav-item>
-          </b-navbar-nav>
+
+          <b-navbar-toggle class="border-0" @click="$emit('toggle-overlay')" target="navbar-collapse">
+            <template>
+              <img src="/icons/hamburger.svg" alt="Menu" />
+            </template>
+          </b-navbar-toggle>
+
+          <b-collapse is-nav id="navbar-collapse" class="py-2 p-lg-0">
+            <b-navbar-nav class="flex-grow-1 align-items-center">
+              <b-nav-item :to="localePath('index')" @click="$emit('hide-overlay')">
+                Web Components
+              </b-nav-item>
+              <b-nav-item :to="localePath('how-to')" @click="$emit('hide-overlay')">
+                How to
+              </b-nav-item>
+              <b-nav-item :to="localePath('validator')" @click="$emit('hide-overlay')">
+                Validator
+              </b-nav-item>
+              <b-nav-item href="https://opendatahub.com/contact" target="_blank">
+                Contact
+              </b-nav-item>
+              <a class="ml-auto no-external-icon text-small d-none d-lg-inline" href="https://opendatahub.com" target="_blank">
+                presented by <img class="pl-2" src="/open-data-hub-sm.svg" alt="Open Data Hub">
+              </a>
+            </b-navbar-nav>
+          </b-collapse>
+
         </b-navbar>
       </div>
     </nav>
@@ -54,8 +69,7 @@ export default {
   name: "Nav",
   data: () => {
     return {
-      buildEnv: process.env.BUILD_ENVIRONMENT,
-      showBadge: process.env.BUILD_ENVIRONMENT === "testing"
+      showBadge: process.env.BUILD_ENVIRONMENT === "testing",
     }
   }
 }
@@ -83,7 +97,8 @@ export default {
 
   .custom-badge {
     background-color: #FA00FF;
-    padding: 6px 12px
+    line-height: 20px;
+    padding: 6px 12px;
   }
 
   .border-black {

diff --git a/frontend/src/static/icons/hamburger.svg b/frontend/src/static/icons/hamburger.svg