Browse Source

Add hamburguer menu

drymer 5 months ago
parent
commit
c256255b6e
Signed by: drymer <drymer@autistici.org> GPG Key ID: A307D64D5DDFDAAD
2 changed files with 41 additions and 14 deletions
  1. 25
    0
      static/js/bulma.js
  2. 16
    14
      templates/layout.html

+ 25
- 0
static/js/bulma.js View File

@@ -0,0 +1,25 @@
1
+document.addEventListener('DOMContentLoaded', () => {
2
+
3
+  // Get all "navbar-burger" elements
4
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
5
+
6
+  // Check if there are any navbar burgers
7
+  if ($navbarBurgers.length > 0) {
8
+
9
+    // Add a click event on each of them
10
+    $navbarBurgers.forEach( el => {
11
+      el.addEventListener('click', () => {
12
+
13
+        // Get the target from the "data-target" attribute
14
+        const target = el.dataset.target;
15
+        const $target = document.getElementById(target);
16
+
17
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
18
+        el.classList.toggle('is-active');
19
+        $target.classList.toggle('is-active');
20
+
21
+      });
22
+    });
23
+  }
24
+
25
+});

+ 16
- 14
templates/layout.html View File

@@ -6,6 +6,7 @@
6 6
   <link rel="stylesheet" type="text/css" media="screen" href="/static/css/bulma.min.css">
7 7
   <link rel="stylesheet" type="text/css" media="screen" href="/static/css/main.css">
8 8
   <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css">
9
+  <script async type="text/javascript" src="/static/js/bulma.js"></script>
9 10
   <script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
10 11
   <script type="text/javascript" src="/static/js/jquery-migrate-1.2.1.min.js"></script>
11 12
   <script type="text/javascript" src="/static/js/jquery.fancybox-1.3.4.pack.min.js"></script>
@@ -32,25 +33,26 @@
32 33
     </script>
33 34
 </head>
34 35
 <body>
35
-<nav class="navbar" role="navigation" aria-label="main navigation">
36
-  <div class="navbar-brand">
37
-    <a class="navbar-item" href="/"/>
36
+  <nav class="navbar" role="navigation" aria-label="main navigation">
37
+    <div class="navbar-brand">
38
+      <a class="navbar-item" href="/"/>
38 39
       <h1>{{template "title"}}</h1>
39
-      <div class="navbar-menu">
40
-        <div class="navbar-start">
41
-          <a href="/" class="navbar-item">Random</a>
42
-          {{range .origins }}
43
-          <a href="/{{. | ToLower}}/" class="navbar-item">{{.}}</a>
44
-          {{end}}
45
-        </div>
46
-      </div>
47
-      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
40
+      <a role="button" class="navbar-burger" id="burger" aria-label="menu" aria-expanded="false" onclick="toggleBurger()" data-target="navMenu">
48 41
         <span aria-hidden="true"></span>
49 42
         <span aria-hidden="true"></span>
50 43
         <span aria-hidden="true"></span>
51 44
       </a>
52
-</nav>
53
-{{template "body" .}}
45
+    </div>
46
+    <div class="navbar-menu" id="navMenu">
47
+      <div class="navbar-start">
48
+        <a href="/" class="navbar-item">Random</a>
49
+        {{range .origins }}
50
+        <a href="/{{. | ToLower}}/" class="navbar-item">{{.}}</a>
51
+        {{end}}
52
+      </div>
53
+    </div>
54
+  </nav>
55
+  {{template "body" .}}
54 56
 </body>
55 57
 </html>
56 58
 {{end}}

Loading…
Cancel
Save