client/css: improve mobile styling

client/js/controllers/top_navigation_controller.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api.js');
+const config = require('../config.js');
 const topNavigation = require('../models/top_navigation.js');
 const TopNavigationView = require('../views/top_navigation_view.js');
 
@@ -64,6 +65,7 @@ class TopNavigationController {
         this._updateNavigationFromPrivileges();
         this._topNavigationView.render({
             items: topNavigation.getAll(),
+            name: config.name
         });
         this._topNavigationView.activate(
             topNavigation.activeItem ? topNavigation.activeItem.key : '');

client/js/views/top_navigation_view.js

@@ -9,8 +9,22 @@ class TopNavigationView {
         this._hostNode = document.getElementById('top-navigation-holder');
     }
 
+    get _mobileNavigationToggleNode() {
+        return this._hostNode.querySelector('#mobile-navigation-toggle');
+    }
+
+    get _navigationListNode() {
+        return this._hostNode.querySelector('nav > ul');
+    }
+
+    get _navigationLinkNodes() {
+        return this._navigationListNode.querySelectorAll('li > a');
+    }
+
     render(ctx) {
         views.replaceContent(this._hostNode, template(ctx));
+
+        this._bindMobileNavigationEvents();
     }
 
     activate(key) {
@@ -19,6 +33,24 @@ class TopNavigationView {
                 'active', itemNode.getAttribute('data-name') === key);
         }
     }
+
+    _bindMobileNavigationEvents() {
+        this._mobileNavigationToggleNode.addEventListener(
+            'click', e => this._mobileNavigationToggleClick(e));
+
+        for (let navigationLinkNode of this._navigationLinkNodes) {
+            navigationLinkNode.addEventListener(
+                'click', e => this._navigationLinkClick(e));
+        }
+    }
+
+    _mobileNavigationToggleClick(e) {
+        this._navigationListNode.classList.toggle('opened');
+    }
+
+    _navigationLinkClick(e) {
+        this._navigationListNode.classList.remove('opened');
+    }
 }
 
 module.exports = TopNavigationView;