From d108da9063736871c4273e7396bcfc290b06dc8b Mon Sep 17 00:00:00 2001
From: Clemens Wolff <clewolff@microsoft.com>
Date: Wed, 29 May 2019 14:01:27 -0400
Subject: [PATCH] Make menu responsive

---
 app/server/static/assets/css/forum.css | 21 +++++++++++++++++++++
 app/server/static/pages/index.js       | 16 ++++++++++++++++
 app/server/templates/base.html         |  5 +++++
 3 files changed, 42 insertions(+)

diff --git a/app/server/static/assets/css/forum.css b/app/server/static/assets/css/forum.css
index 88fd1129..f372e1d6 100644
--- a/app/server/static/assets/css/forum.css
+++ b/app/server/static/assets/css/forum.css
@@ -31,10 +31,31 @@ strong {
   box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
 }
 
+.navbar-burger,
 .navbar-item {
   color: white;
 }
 
+a.navbar-burger:hover {
+  background-color: #fafafa;
+  color: #3273dc;
+}
+
+.navbar-menu.is-active .navbar-item,
+.navbar-menu.is-active .navbar-link {
+  color: #4a4a4a;
+}
+
+.navbar-menu.is-active .navbar-dropdown .navbar-item {
+  color: #fafafa;
+}
+
+.navbar-menu.is-active .navbar-dropdown .navbar-item:hover,
+.navbar-menu.is-active .navbar-item:hover,
+.navbar-menu.is-active .navbar-link:hover {
+  color: #3273dc;
+}
+
 .topNav {
   border-top: 5px solid #3498DB;
 }
diff --git a/app/server/static/pages/index.js b/app/server/static/pages/index.js
index d4d7ca11..60135caa 100644
--- a/app/server/static/pages/index.js
+++ b/app/server/static/pages/index.js
@@ -12,3 +12,19 @@ new Swiper('.swiper-container', {
     prevEl: '.swiper-button-prev',
   },
 });
+
+document.addEventListener('DOMContentLoaded', () => {
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  if ($navbarBurgers.length > 0) {
+    $navbarBurgers.forEach((el) => {
+      el.addEventListener('click', () => {
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+      });
+    });
+  }
+});
diff --git a/app/server/templates/base.html b/app/server/templates/base.html
index 757019fe..cae51b39 100644
--- a/app/server/templates/base.html
+++ b/app/server/templates/base.html
@@ -46,6 +46,11 @@
           <img src="{% static 'assets/images/logo.png' %}" width="32" height="32">
           <b>doccano</b>
         </a>
+        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="topNav">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
         {% block navigation %}{% endblock %}
       </div>
       <div id="topNav" class="navbar-menu">