diff --git a/pass/public/images/hamburger-menu.svg b/pass/public/images/hamburger-menu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f1ffc2aa4148837ef59d3c04d86b27d895ca5b49
--- /dev/null
+++ b/pass/public/images/hamburger-menu.svg
@@ -0,0 +1,8 @@
+<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+ fill="currentColor"
+ />
+</svg>
diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index 1270bebbea67955e75f6e8a3a3e9f404d0be2440..9f900c9aa5f4ca0d047f594d95daf24568c5e800 100644
--- a/pass/public/styles/base.less
+++ b/pass/public/styles/base.less
@@ -38,6 +38,7 @@ html {
body {
margin: 0;
padding: 0;
+ min-width: @body-scroll-break-point;
}
}
@@ -50,12 +51,16 @@ button {
}
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;
+ position: relative;
align-items: center;
- gap: 2rem;
- padding: 0 1rem;
+ gap: 0 2rem;
#page-logo a {
display: flex;
@@ -63,13 +68,21 @@ nav {
gap: 0.5rem;
text-decoration: none;
color: inherit;
+ padding-left: 1rem;
> img {
- width: 2.5rem;
+ width: 1.7rem;
filter: brightness(0) invert(1);
}
}
+ > input#nav-opener {
+ display: none;
+ }
+ > label[for="nav-opener"] {
+ display: none;
+ }
+
ul {
list-style-type: none;
margin: 0;
@@ -93,4 +106,54 @@ nav {
}
}
}
+
+ @media (max-width: @logo-break-point) {
+ > ul {
+ max-height: 0;
+ visibility: hidden;
+ transition: max-height 0.5s, padding 0.5s;
+ }
+
+ > input#nav-opener {
+ display: block;
+ visibility: hidden;
+ flex-grow: 1;
+ &:checked {
+ + label {
+ transform: rotate(90deg);
+ }
+ ~ ul {
+ max-height: 500px;
+ padding: 1rem 0;
+ visibility: visible;
+ }
+ }
+ }
+ //display: none;
+ > label[for="nav-opener"] {
+ display: flex;
+ margin: 1rem;
+ align-items: center;
+ transition: transform 1s;
+ cursor: pointer;
+
+ > img {
+ width: 1.5em;
+ }
+ }
+ }
+
+ @media (max-width: @nav-items-break-point) {
+ > ul {
+ flex-direction: column;
+ width: 100%;
+ gap: 1rem;
+ > li {
+ text-align: center;
+ &.whitespace {
+ display: none;
+ }
+ }
+ }
+ }
}
diff --git a/pass/public/styles/misc/vars.less b/pass/public/styles/misc/vars.less
index 06b5e9c47947f77a56871a557033c15829ddb16a..825c2290aee22e59581d2f847b89d4001eaec7fe 100644
--- a/pass/public/styles/misc/vars.less
+++ b/pass/public/styles/misc/vars.less
@@ -1,3 +1,7 @@
@color-main: rgb(255, 127, 0);
@color-main-hover: lighten(@color-main, 5%);
@color-main-font-color: white;
+
+@body-scroll-break-point: 320px;
+@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
diff --git a/pass/views/templates/page_header.ejs b/pass/views/templates/page_header.ejs
index cdefd1ce1806ae600a683f19700f9f645cdce8b8..f620a862d9d75d3af50f3b1cda644754cc66a40d 100644
--- a/pass/views/templates/page_header.ejs
+++ b/pass/views/templates/page_header.ejs
@@ -2,6 +2,7 @@
<html>
<head>
<title>MetaGer - Pass</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel='stylesheet' href='/styles/base.css' />
<%_ if (typeof css !== 'undefined') { -%>
<%_ css.forEach(css_file => { -%>
@@ -22,6 +23,8 @@
<h1>Pass</h1>
</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>
<ul>
<li><a href="#">Informationen</a></li>
<li><a href="#">Preise</a></li>