Refactor responsive menu

Author: SamuelTallet

static/css/mpg.css

@@ -5,6 +5,19 @@
 
 }
 
+@media screen and (min-width: 768px) {
+
+    .navbar {
+
+        flex-flow: row nowrap;
+        -ms-flex-pack: start;
+        justify-content: flex-start;
+    
+    
+    }
+
+}
+
 .bg-mongodb {
 
     background-color: #13aa52;
@@ -15,9 +28,78 @@
 
     position: relative;
     left: 0;
-    top: 15px;
+    top: 4px;
+
+    padding: 5px;
+
+}
+
+.navbar.menu-expanded .navbar-brand {
+
+    display: none;
+
+}
+
+.navbar-nav {
+
+    display: none;
+
+}
+
+.navbar.menu-expanded .navbar-nav {
+
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+
+    width: 100%;
+    margin-top: 35px;
+
+}
 
-    padding-bottom: 15px;
+@media screen and (min-width: 768px) {
+
+    .navbar-brand, .navbar-nav .nav-link {
+
+        top: 15px;
+        padding-top: 10px;
+        padding-bottom: 15px;
+    
+    }
+
+    .navbar-nav {
+
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-direction: row;
+        flex-direction: row;
+    
+    }
+    
+}
+
+#menu-toggle-button {
+
+    border: none;
+    background: none;
+
+    display: block;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+
+    color: white;
+
+}
+
+@media screen and (min-width: 768px) {
+
+    #menu-toggle-button {
+
+        display: none;
+    
+    }
 
 }
 

static/js/mpg.collection.indexes.js

@@ -41,17 +41,6 @@ MPG.collectionIndexes = [];
  */
 MPG.helpers = {};
 
-/**
- * Indicates if device is extra small.
- * 
- * @returns {boolean}
- */
-MPG.helpers.isXsDevice = function() {
-
-    return window.matchMedia('(max-width: 576px)').matches;
-
-};
-
 /**
  * Does an ajax request.
  * 
@@ -83,21 +72,6 @@ MPG.helpers.doAjaxRequest = function(method, url, successCallback, body) {
 
 };
 
-/**
- * Fixes responsive design.
- * 
- * @returns {void}
- */
-MPG.fixResponsiveDesign = function() {
-
-    if ( MPG.helpers.isXsDevice() ) {
-
-        document.querySelector('#mpg-app-name').innerHTML = 'M';
-
-    }
-
-};
-
 /**
  * Reloads collections of a specific database.
  * 
@@ -256,6 +230,19 @@ MPG.reloadCollectionIndexes = function() {
  */
 MPG.eventListeners = {};
 
+/**
+ * Adds an event listener on "Menu toggle" button.
+ * 
+ * @returns {void}
+ */
+MPG.eventListeners.addMenuToggle = function() {
+
+    document.querySelector('#menu-toggle-button').addEventListener('click', function() {
+        document.querySelector('.navbar').classList.toggle('menu-expanded');
+    });
+
+};
+
 /**
  * Adds an event listener on each database.
  * 
@@ -411,8 +398,7 @@ MPG.eventListeners.addDropIndex = function() {
 // When document is ready:
 window.addEventListener('DOMContentLoaded', function(_event) {
 
-    MPG.fixResponsiveDesign();
-
+    MPG.eventListeners.addMenuToggle();
     MPG.eventListeners.addDatabases();
     MPG.eventListeners.addCreateIndex();
 

static/js/mpg.database.query.js

@@ -295,7 +295,6 @@ MPG.fixResponsiveDesign = function() {
 
     if ( MPG.helpers.isXsDevice() ) {
 
-        document.querySelector('#mpg-app-name').innerHTML = 'M';
         document.querySelector('#mpg-insert-one-button').innerHTML = 'Insert';
         document.querySelector('#mpg-delete-one-button').innerHTML = 'Delete';
 
@@ -351,6 +350,19 @@ MPG.reloadCollections = function(databaseName) {
  */
 MPG.eventListeners = {};
 
+/**
+ * Adds an event listener on "Menu toggle" button.
+ * 
+ * @returns {void}
+ */
+MPG.eventListeners.addMenuToggle = function() {
+
+    document.querySelector('#menu-toggle-button').addEventListener('click', function() {
+        document.querySelector('.navbar').classList.toggle('menu-expanded');
+    });
+
+};
+
 /**
  * Adds an event listener on each database.
  * 
@@ -827,6 +839,7 @@ window.addEventListener('DOMContentLoaded', function(_event) {
     MPG.initializeCodeMirror();
     MPG.fixResponsiveDesign();
 
+    MPG.eventListeners.addMenuToggle();
     MPG.eventListeners.addDatabases();
     MPG.eventListeners.addInsertOne();
     MPG.eventListeners.addCount();

views/collection.indexes.tpl.php

@@ -21,9 +21,9 @@
 
 <body>
 
-    <nav class="navbar navbar-expand sticky-top navbar-dark bg-mongodb">
+    <nav class="navbar sticky-top navbar-dark bg-mongodb">
 
-        <a id="mpg-app-name" class="navbar-brand" href="<?php echo MPG_BASE_URL; ?>/index"><?php echo MPG_APP_NAME; ?></a>
+        <a class="navbar-brand" href="<?php echo MPG_BASE_URL; ?>/index"><?php echo MPG_APP_NAME; ?></a>
 
         <div class="navbar-nav">
             <a class="nav-item nav-link" href="<?php echo MPG_BASE_URL; ?>/createDatabase">Create database</a>
@@ -32,6 +32,8 @@
             <a class="nav-item nav-link" href="<?php echo MPG_BASE_URL; ?>/logout">Logout</a>
         </div>
 
+        <button id="menu-toggle-button"><i class="fa fa-bars" aria-hidden="true"></i></button>
+
     </nav>
 
     <div class="container-fluid">

views/database.query.tpl.php

@@ -31,9 +31,9 @@
 
 <body>
 
-    <nav class="navbar navbar-expand sticky-top navbar-dark bg-mongodb">
+    <nav class="navbar sticky-top navbar-dark bg-mongodb">
 
-        <a id="mpg-app-name" class="navbar-brand" href="<?php echo MPG_BASE_URL; ?>/index"><?php echo MPG_APP_NAME; ?></a>
+        <a class="navbar-brand" href="<?php echo MPG_BASE_URL; ?>/index"><?php echo MPG_APP_NAME; ?></a>
 
         <div class="navbar-nav">
             <a class="nav-item nav-link" href="<?php echo MPG_BASE_URL; ?>/createDatabase">Create database</a>
@@ -42,6 +42,8 @@
             <a class="nav-item nav-link" href="<?php echo MPG_BASE_URL; ?>/logout">Logout</a>
         </div>
 
+        <button id="menu-toggle-button"><i class="fa fa-bars" aria-hidden="true"></i></button>
+
     </nav>
 
     <div class="container-fluid">