diff --git a/sass/menu.scss b/sass/menu.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4ba4c68e39f4649e29d51b5e772f124dfd080a00
--- /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 a054507650890cee37dfcf381572698d14b52577..fff727109c284bf6c1df01ccf09035797490326b 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 187865e377e0901de055dce8cecbd09946496c66..e1383f8f7b240acf99a7f920f2d822cef178fbd4 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 0000000000000000000000000000000000000000..01b36d9b46e4bb8c0e923fe98f3ffa37701af8f6
--- /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