Fix navbar menu on mobile devices (#15)

donkey-engine · May 19, 2021 · 6f35dee · 6f35dee
1 parent 4e4f02a
commit 6f35dee
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
-  <body>
+  <body class="has-navbar-fixed-top">
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

diff --git a/src/blocks/Footer.vue b/src/blocks/Footer.vue
diff --git a/src/blocks/Navbar.vue b/src/blocks/Navbar.vue
@@ -1,18 +1,25 @@
 <template>
-  <nav class="navbar" role="navigation" aria-label="main navigation">
+  <nav class="navbar is-transparent is-fixed-top" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         <img src="/logo.jpeg" width="28" height="28">
       </a>
 
-      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+      <a
+        role="button"
+        class="navbar-burger"
+        aria-label="menu"
+        aria-expanded="false"
+        data-target="navbarBasicExample"
+        @click="isMenuActive = !isMenuActive"
+      >
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
       </a>
     </div>
 
-    <div id="navbarBasicExample" class="navbar-menu">
+    <div id="navbarBasicExample" :class="['navbar-menu', {'is-active': isMenuActive}]">
       <div class="navbar-start">
         <a href="/dashboard" class="navbar-item">
           Dashboard
@@ -23,7 +30,7 @@
             {{ username }}
           </a>
 
-          <div class="navbar-dropdown">
+          <div class="navbar-dropdown is-boxed">
             <a class="navbar-item" @click="push('/profile')">
               Profile
             </a>
@@ -39,7 +46,7 @@
             More
           </a>
 
-          <div class="navbar-dropdown">
+          <div class="navbar-dropdown is-boxed">
             <a class="navbar-item">
               About
             </a>
@@ -87,6 +94,7 @@ export default defineComponent({
   data() {
     return {
       showModal: false,
+      isMenuActive: false,
     }
   },
   computed: {

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
@@ -11,19 +11,16 @@
         />
       </div>
   </section>
-  <Footer />
 </template>
 
 <script lang='ts'>
 import { defineComponent } from 'vue'
 
-import Footer from '../blocks/Footer.vue'
 import Navbar from '../blocks/Navbar.vue'
 import ServerItem from './ServerItem.vue'
 
 export default defineComponent({
   components: {
-    Footer,
     Navbar,
     ServerItem,
   },

diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,3 @@
+.is-primary {
+    background-color: #714dd2 !important;
+}
diff --git a/src/main.ts b/src/main.ts
@@ -11,6 +11,7 @@ import store from './store'
 import { getCookie } from './utils'
 
 import 'bulma/css/bulma.css'
+import './main.css'
 
 interface Routes {
   [key: string]: Component,