Add navbar menu button on small and medium devices.

Author: proofit404

templates/components/navbar.html

@@ -1,11 +1,21 @@
+{% from 'components/menu_icon.html' import menu_icon %}
+
 {% macro navbar() %}
-  <nav class="container navbar">
+  <nav class="container navbar"
+       data-controller="navbar">
     <div class="navbar-left-group">
       <a href="/" class="navbar-item">
         dry-python
       </a>
     </div>
-    <div class="navbar-right-group">
+    <div class="block lg:hidden">
+      <button class="navbar-button"
+              data-action="navbar#toggle">
+        {{ menu_icon('Menu') }}
+      </button>
+    </div>
+    <div class="navbar-right-group"
+         data-target="navbar.menuItems">
       {% for path, label in bag('navbar').items() %}
         <a href="{{ path|url }}" class="navbar-item">
           {{ label }}

webpack/app/controllers/navbar_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['menuItems']
+
+  toggle() {
+    this.menuItemsTarget.classList.toggle('hidden')
+  }
+}

webpack/app/styles/navbar.css

@@ -17,3 +17,11 @@
 .navbar-item:hover {
   @apply .text-black .border-black;
 }
+
+.navbar-button {
+  @apply flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light;
+}
+
+.navbar-button:hover {
+  @apply text-white border-white;
+}