From 5c51fb2ff34f8a23692a3ba7b48f01d4e48e0b4a Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Fri, 25 Nov 2022 12:54:11 +0100
Subject: [PATCH] better hamburger menu
---
pass/public/styles/base.less | 41 ++++++++++++++++++++++++----
pass/views/templates/page_header.ejs | 8 +++++-
2 files changed, 42 insertions(+), 7 deletions(-)
diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index 05d635c..cd631a9 100644
--- a/pass/public/styles/base.less
+++ b/pass/public/styles/base.less
@@ -123,7 +123,28 @@ nav {
flex-grow: 1;
&:checked {
+ label {
- transform: rotate(90deg);
+ border-width: 0;
+ transition: border-width 0ms 0ms;
+ > svg {
+ fill: red;
+ > .line {
+ transition: y 300ms ease-in 0ms, rotate 300ms ease-in 300ms,
+ opacity 0ms 300ms, fill 300ms ease-in 300ms;
+ //y 300ms ease-in, rotate 300ms ease-in 300ms,
+ // opacity 0ms 300ms, fill 300ms ease-in 300ms;
+ &.top {
+ y: 45px;
+ rotate: 45deg;
+ }
+ &.middle {
+ opacity: 0;
+ }
+ &.bottom {
+ y: 45px;
+ rotate: -45deg;
+ }
+ }
+ }
}
~ ul {
max-height: 500px;
@@ -132,16 +153,24 @@ nav {
}
}
}
- //display: none;
> label[for="nav-opener"] {
+ --navbar-opener-color: white;
display: flex;
margin: 1rem;
align-items: center;
- transition: transform 1s;
+ border: 1px solid var(--navbar-opener-color);
+ border-radius: 0.4rem;
cursor: pointer;
-
- > img {
- width: 1.5em;
+ transition: border-width 0ms 600ms;
+ > svg {
+ fill: var(--navbar-opener-color);
+
+ > .line {
+ transition: rotate 300ms ease-in 0ms, opacity 0ms 300ms,
+ y 300ms ease-in 300ms, fill 300ms ease-in 300ms;
+ rotate: 0deg;
+ transform-origin: center;
+ }
}
}
}
diff --git a/pass/views/templates/page_header.ejs b/pass/views/templates/page_header.ejs
index fb787aa..a9b4bc8 100644
--- a/pass/views/templates/page_header.ejs
+++ b/pass/views/templates/page_header.ejs
@@ -24,7 +24,13 @@
</a>
</div>
<input type="checkbox" name="nav-opener" id="nav-opener" aria-hidden="true">
- <label for="nav-opener"><img src="/images/hamburger-menu.svg" alt="Open Menu"></label>
+ <label for="nav-opener">
+ <svg class="hamburger" viewBox="0 0 100 100" width="2rem" height="2rem">
+ <rect class="line top" x="10" y="25" width="80" height="10" rx="5"></rect>
+ <rect class="line middle" x="10" y="45" width="80" height="10" rx="5"></rect>
+ <rect class="line bottom" x="10" y="65" width="80" height="10" rx="5"></rect>
+ </svg>
+ </label>
<ul>
<li><a href="#">Informationen</a></li>
<li><a href="#">Preise</a></li>
--
GitLab