diff --git a/assets/js/app.js b/assets/js/app.js
index 2c4466c..10fa287 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -2,6 +2,7 @@ import './external_links';
import './message_icons';
import './forms';
import './copyable_text';
+import './main_menu';
import '../sass/app.scss';
diff --git a/assets/js/main_menu.js b/assets/js/main_menu.js
new file mode 100644
index 0000000..f2a89da
--- /dev/null
+++ b/assets/js/main_menu.js
@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const menuButton = document.getElementById('menu-button');
+ const mainMenu = document.getElementById('main-menu');
+
+ menuButton.addEventListener('click', (e) => {
+ e.stopPropagation();
+ mainMenu.classList.toggle('open');
+ });
+
+ mainMenu.addEventListener('click', (e) => {
+ e.stopPropagation();
+ });
+
+ document.addEventListener('click', () => {
+ mainMenu.classList.remove('open');
+ });
+});
\ No newline at end of file
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 3537169..2185a98 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -76,13 +76,13 @@ header {
}
}
- a:hover {
+ a:hover, a:active {
background-color: rgba(255, 255, 255, 0.07);
}
}
}
- .hamburger {
+ #menu-button {
display: none;
}
}
@@ -90,17 +90,29 @@ header {
@media (max-width: $menuLayoutSwitchTreshold) {
flex-direction: row-reverse;
+ .logo {
+ padding: 0 16px 0 8px;
+ font-size: 24px;
+
+ img {
+ margin-right: 8px;
+ }
+ }
+
nav {
- flex: 1;
- .hamburger {
+ #menu-button {
display: block;
+ margin: 0;
padding: 0 16px;
+ line-height: $headerHeight;
+
cursor: pointer;
+ background: transparent;
+ border-radius: 0;
- width: max-content;
-
- &:hover {
- width: auto;
+ .feather {
+ --icon-size: 28px;
+ margin: 0 8px;
}
}
@@ -112,10 +124,10 @@ header {
transition: transform ease-out 150ms;
background-color: $headerBackground;
- }
- .hamburger:hover + ul, ul:hover {
- transform: translateX(0%);
+ &.open {
+ transform: translateX(0%);
+ }
}
}
}
diff --git a/views/layouts/base.njk b/views/layouts/base.njk
index 7aafc89..f87c6aa 100644
--- a/views/layouts/base.njk
+++ b/views/layouts/base.njk
@@ -14,8 +14,8 @@
{% block header %}
{{ app.name }}