From 3d5cbf7eaf8e7d14d8d54acbc7ffe34292aa2262 Mon Sep 17 00:00:00 2001
From: Dominik George <dominik.george@teckids.org>
Date: Sun, 11 Jun 2023 16:41:39 +0200
Subject: [PATCH] Make navbar responsive
---
sass/menu.scss | 30 +++++++++++++++++++++++++++++
sass/style.scss | 2 ++
templates/base.html | 38 +------------------------------------
templates/menu.html | 46 +++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 79 insertions(+), 37 deletions(-)
create mode 100644 sass/menu.scss
create mode 100644 templates/menu.html
diff --git a/sass/menu.scss b/sass/menu.scss
new file mode 100644
index 00000000..4ba4c68e
--- /dev/null
+++ b/sass/menu.scss
@@ -0,0 +1,30 @@
+// https://codepen.io/Nikitoss334/details/KLxaJK
+// FIXME clarify license
+
+.navbar-toggle {
+ display: none;
+}
+
+.navbar .navbar-toggle:checked {
+ &+.navbar-brand .navbar-burger {
+ & span:nth-child(1) {
+ -webkit-transform: translateY(5px) rotate(45deg);
+ transform: translateY(5px) rotate(45deg);
+ }
+
+ & span:nth-child(2) {
+ opacity: 0;
+ }
+
+ & span:nth-child(3) {
+ -webkit-transform: translateY(-5px) rotate(-45deg);
+ transform: translateY(-5px) rotate(-45deg);
+ }
+ }
+
+ &~.navbar-menu {
+ @media screen and (max-width: 1024px) {
+ display: block;
+ }
+ }
+}
\ No newline at end of file
diff --git a/sass/style.scss b/sass/style.scss
index a0545076..fff72710 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -3,3 +3,5 @@
$family-sans-serif: "Roboto", sans-serif;
@import "../node_modules/bulma/bulma.sass";
+
+@import "./menu.scss"
diff --git a/templates/base.html b/templates/base.html
index 187865e3..e1383f8f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -18,43 +18,7 @@
<body class="has-navbar-fixed-top">
<header>
- <nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
- <div class="navbar-brand">
- <a href="{{ get_url(path="@/_index.md") }}" class="navbar-item">{{ config.title }}</a>
- </div>
-
- <div class="navbar-menu">
- <div class="navbar-start">
- <div class="navbar-item has-dropdown is-hoverable">
- <a href="#" class="navbar-item">Projekte</a>
- <div class="navbar-dropdown">
- TBA
- </div>
- </div>
-
- <div class="navbar-item has-dropdown is-hoverable">
- <a href="#" class="navbar-item">Informationen für…</a>
- <div class="navbar-dropdown">
- TBA
- </div>
- </div>
-
- <div class="navbar-item has-dropdown is-hoverable">
- <a href="#" class="navbar-item">Teckids-Gemeinschaft</a>
- <div class="navbar-dropdown">
- TBA
- </div>
- </div>
-
- <div class="navbar-item has-dropdown is-hoverable">
- <a href="#" class="navbar-item">Updates</a>
- <div class="navbar-dropdown">
- TBA
- </div>
- </div>
- </div>
- </div>
- </nav>
+ {% include "menu.html" %}
</header>
<main>
diff --git a/templates/menu.html b/templates/menu.html
new file mode 100644
index 00000000..01b36d9b
--- /dev/null
+++ b/templates/menu.html
@@ -0,0 +1,46 @@
+<nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
+ <input type="checkbox" id="burger-toggle" role="button" class="navbar-toggle" aria-label="menu" aria-expanded="false" data-target="main-menu" />
+ <div class="navbar-brand">
+ <a href="{{ get_url(path="@/_index.md") }}" class="navbar-item">
+ {{ config.title }}
+ </a>
+
+ <label for="burger-toggle" class="navbar-burger">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </label>
+ </div>
+
+ <div class="navbar-menu" id="main-menu">
+ <div class="navbar-start">
+ <div class="navbar-item has-dropdown is-hoverable">
+ <a href="#" class="navbar-item">Projekte</a>
+ <div class="navbar-dropdown">
+ TBA
+ </div>
+ </div>
+
+ <div class="navbar-item has-dropdown is-hoverable">
+ <a href="#" class="navbar-item">Informationen für…</a>
+ <div class="navbar-dropdown">
+ TBA
+ </div>
+ </div>
+
+ <div class="navbar-item has-dropdown is-hoverable">
+ <a href="#" class="navbar-item">Teckids-Gemeinschaft</a>
+ <div class="navbar-dropdown">
+ TBA
+ </div>
+ </div>
+
+ <div class="navbar-item has-dropdown is-hoverable">
+ <a href="#" class="navbar-item">Updates</a>
+ <div class="navbar-dropdown">
+ TBA
+ </div>
+ </div>
+ </div>
+ </div>
+</nav>
\ No newline at end of file
--
GitLab