Improve presentation of navigation at mobile

- Add button to show/hide menu items - Ensure navigation fills the width of the viewport by moving it out of the main container element
Thor77 · Feb 27, 2017 · ce6529b · ce6529b
1 parent 541df38
commit ce6529b
Showing 1 changed file with 44 additions and 16 deletions.
diff --git a/tsstats/templates/index.jinja2 b/tsstats/templates/index.jinja2
@@ -14,6 +14,9 @@
     a:hover {
       text-decoration: none;
     }
+    .navbar-toggler {
+      cursor: pointer;
+    }
     @media screen and (max-width: 767px) {
       .hint--medium--xs:after {
         white-space: normal;
@@ -24,23 +27,30 @@
   </style>
 </head>
 <body>
-<div class="container-fluid">
-  <nav class="navbar navbar-toggleable-md navbar-light bg-faded sticky-top">
-    <a class="navbar-brand" href="#">{{ title }}</a>
+<nav class="navbar navbar-toggleable-md navbar-light bg-faded sticky-top">
+  <div class="d-flex justify-content-between hidden-lg-up">
+    <a href="" class="navbar-brand">{{ title }}</a>
+    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  </div>
 
-    <div class="collapse navbar-collapse">
-      <ul class="navbar-nav mr-auto">
-        {% for sid, _ in servers %}
-          <li class="nav-item">
-            <a class="nav-link" href="#sid{{ sid }}">Server {{ sid }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-      {% if debug %}
-      <span class="navbar-text" style="color: red">debug mode</span>
-      {% endif %}
-    </div>
-  </nav>
+  <div id="main-nav" class="collapse navbar-collapse">
+    <ul class="navbar-nav mr-auto">
+      <li class="hidden-md-down"><a href="" class="navbar-brand">{{ title }}</a></li>
+      {% for sid, _ in servers %}
+        <li class="nav-item">
+          <a class="nav-link" href="#sid{{ sid }}">Server {{ sid }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+    {% if debug %}
+    <span class="navbar-text" style="color: red">debug mode</span>
+    {% endif %}
+  </div>
+</nav>
+
+<div class="container-fluid">
   {% for server in servers %}
     <h1 class="display-4" id="sid{{ server.sid }}">
       <a href="#sid{{ server.sid }}">Server {{ server.sid }}</a>
@@ -49,5 +59,23 @@
   {% endfor %}
   <small>Generated by <a href="https://github.com/Thor77/TeamspeakStats" rel="noopener">TeamspeakStats</a> at {{ creation_time|frmttime }}</small>
 </div>
+
+<script type="text/javascript">
+  document.addEventListener('click', function(event) {
+    var toggler = event.target;
+    if (toggler.dataset.toggle !== 'collapse') {
+      return;
+    }
+    var toggleTarget = document.getElementById(toggler.dataset.target);
+
+    if (toggleTarget.classList.contains('collapse')) {
+      toggleTarget.classList.remove('collapse');
+      toggler.setAttribute('aria-expanded', false);
+    } else {
+      toggleTarget.classList.add('collapse');
+      toggler.setAttribute('aria-expanded', true);
+    }
+  });
+</script>
 </body>
 </html>