diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index a4e3401deba9c0abc21271b69d50223b717381dd..f2d72b9846e81298fd66c5d239609d3c3ebcb04f 100644
--- a/pass/public/styles/base.less
+++ b/pass/public/styles/base.less
@@ -158,14 +158,61 @@ button {
}
}
+@logo-break-point: 610px; // Breakpoint when nav items won't fit besides logo
+#nav-opener {
+ position: absolute;
+ left: -100%;
+ @media (max-width: @logo-break-point) {
+ + nav > label > svg > .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;
+ }
+ &:checked {
+ + nav {
+ grid-template-areas: "logo key-management nav-opener" ". general .";
+ > label {
+ 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;
+ &.top {
+ y: 45px;
+ rotate: 45deg;
+ }
+
+ &.middle {
+ opacity: 0;
+ }
+
+ &.bottom {
+ y: 45px;
+ rotate: -45deg;
+ }
+ }
+ }
+ }
+
+ > ul.general {
+ display: flex;
+ }
+ }
+ }
+ }
+}
nav#primary-nav {
- @logo-break-point: 720px; // Breakpoint when nav items won't fit besides logo
@nav-items-break-point: 560px; // Breakpoint when nav items won't fit into their own row
background-color: @color-main;
color: @color-main-font-color;
- display: flex;
- flex-wrap: wrap;
+ display: grid;
+ grid-template-areas: "logo general key-management";
+ grid-template-columns: auto 1fr 1fr;
position: sticky;
top: 0;
z-index: 99999;
@@ -173,16 +220,19 @@ nav#primary-nav {
gap: 0 2rem;
padding: 0.5rem 1rem;
- #page-logo a {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- text-decoration: none;
- color: inherit;
+ #page-logo {
+ grid-area: logo;
+ a {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ text-decoration: none;
+ color: inherit;
- > img {
- width: 1.7rem;
- filter: brightness(0) invert(1);
+ > img {
+ width: 1.7rem;
+ filter: brightness(0) invert(1);
+ }
}
}
@@ -224,61 +274,31 @@ nav#primary-nav {
}
}
}
+
+ &.general {
+ grid-area: general;
+ gap: 0.5rem;
+ }
+ &.key-management {
+ grid-area: key-management;
+ justify-content: flex-end;
+ }
+ }
+
+ label {
+ grid-area: nav-opener;
}
@media (max-width: @logo-break-point) {
+ grid-template-areas: "logo key-management nav-opener";
+ grid-template-columns: auto 1fr auto;
> ul {
- max-height: 0;
- visibility: hidden;
- transition: max-height 0.5s, padding 0.5s;
- justify-content: space-around;
-
- > li.whitespace {
+ justify-content: center;
+ gap: 0.5rem;
+ &.general {
display: none;
- }
- }
-
- > input#nav-opener {
- display: block;
- visibility: hidden;
- flex-grow: 1;
-
- &:checked {
- + label {
- 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;
- padding: 1rem 0;
- visibility: visible;
- }
+ flex-direction: column;
+ padding: 1rem;
}
}
@@ -293,29 +313,17 @@ nav#primary-nav {
> 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;
- }
}
}
}
- @media (max-width: @nav-items-break-point) {
+ @media (max-width: 380px) {
+ gap: 0.5rem;
> ul {
- flex-direction: column;
- width: 100%;
- gap: 1rem;
-
- > li {
- text-align: center;
-
- &.whitespace {
- display: none;
- }
+ justify-content: center;
+ .key-management {
+ gap: 0.5rem;
+ font-size: 0.9rem;
}
}
}
diff --git a/pass/views/templates/page_header.ejs b/pass/views/templates/page_header.ejs
index 7f7a6a90b636fb92e79872a16257327229abee1d..f94c8b161b6ce8237581b7f4740e6fb48e7436c6 100644
--- a/pass/views/templates/page_header.ejs
+++ b/pass/views/templates/page_header.ejs
@@ -64,26 +64,26 @@
</head>
<body>
+ <input type="checkbox" name="nav-opener" id="nav-opener" aria-hidden="true">
<nav id="primary-nav">
<div id="page-logo">
<a href="/">
<img src="<%= baseDir _%>/images/metager-schloss-orange.svg" alt="MetaGer Schloss">
</a>
</div>
- <input type="checkbox" name="nav-opener" id="nav-opener" aria-hidden="true">
<label for="nav-opener">
- <svg class="hamburger" viewBox="0 0 100 100" width="2rem" height="2rem">
+ <svg class="hamburger" viewBox="0 0 100 100" width="20px" height="20px">
<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>
+ <ul class="general">
<li><a href="<%= baseDir _%>/"><%= req.t("leftnav.informations", { ns: 'pageheader'}) _%></a></li>
<li><a href="<%= baseDir _%>/cost"><%= req.t("leftnav.price", { ns: 'pageheader'}) _%></a></li>
<li><a href="<%= baseDir %>/help/faq"><%= req.t("leftnav.help", { ns: 'pageheader'}) _%></a></li>
- <li class="whitespace"></li>
-
+ </ul>
+ <ul class="key-management">
<%_ if((typeof req.cookies !== "undefined" && typeof req.cookies.key !== "undefined") || typeof key !== "undefined") { _%>
<li><a href="<%= baseDir _%>/key/enter"><%= req.t("rightnav.manage", { ns: 'pageheader'}) _%></a></li>
<li>|</li>
@@ -93,5 +93,6 @@
<li><a href="<%= baseDir _%>/key/create" class="button"><%= req.t("rightnav.start", { ns: 'pageheader'}) _%></a></li>
<%_ } _%>
</ul>
+
</nav>
<main>
\ No newline at end of file