Merge branch 'boilerplate' into develop

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';
 

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');
+    });
+});

assets/sass/_vars.scss

@@ -25,3 +25,6 @@ $warningColor: desaturate($warningText, 50%);
 $error: #ff0000;
 $errorText: darken($error, 30%);
 $errorColor: desaturate($errorText, 50%);
+
+// Responsivity
+$menuLayoutSwitchTreshold: 700px;

assets/sass/layout.scss

@@ -51,32 +51,83 @@ header {
 		}
 	}
 
-	nav ul {
+	nav {
-		display: flex;
+		ul {
-		flex-direction: row;
+			display: flex;
-		margin: 0;
+			flex-direction: row;
-		padding: 0;
+			margin: 0;
+			padding: 0;
 
-		font-size: 20px;
+			font-size: 20px;
 
-		li {
+			li {
-			list-style: none;
+				list-style: none;
 
-			a, span {
+				a, span {
-				display: flex;
+					display: flex;
-				flex-direction: row;
+					flex-direction: row;
-				align-items: center;
+					align-items: center;
-				height: 64px;
+					height: 64px;
-				padding: 0 24px;
+					padding: 0 24px;
+
+					.feather {
+						--icon-size: 24px;
+						margin-right: 10px;
+					}
+				}
+
+				a:hover, a:active {
+					background-color: rgba(255, 255, 255, 0.07);
+				}
+			}
+		}
+
+		#menu-button {
+			display: none;
+		}
+	}
+
+	@media (max-width: $menuLayoutSwitchTreshold) {
+		flex-direction: row-reverse;
+
+		.logo {
+			padding: 0 16px 0 8px;
+			font-size: 24px;
+
+			img {
+				margin-right: 8px;
+			}
+		}
+
+		nav {
+			#menu-button {
+				display: block;
+				margin: 0;
+				padding: 0 16px;
+				line-height: $headerHeight;
+
+				cursor: pointer;
+				background: transparent;
+				border-radius: 0;
 
 				.feather {
-					--icon-size: 24px;
+					--icon-size: 28px;
-					margin-right: 10px;
+					margin: 0 8px;
 				}
 			}
 
-			a:hover {
+			ul {
-				background-color: rgba(255, 255, 255, 0.07);
+				flex-direction: column;
+				position: absolute;
+				left: 0;
+				transform: translateX(-100%);
+				transition: transform ease-out 150ms;
+
+				background-color: $headerBackground;
+
+				&.open {
+					transform: translateX(0%);
+				}
 			}
 		}
 	}

views/layouts/barebone.njk

@@ -8,6 +8,8 @@
     <link rel="shortcut icon" type="image/png" href="/img/logox128.png">
     <link rel="shortcut icon" type="image/svg" href="/img/logo.svg">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     {% if description %}
         <meta name="description" content="{{ description }}">
     {% endif %}

views/layouts/base.njk

@@ -14,7 +14,8 @@
 {% block header %}
     <a href="/" class="logo"><img src="/img/logo.svg" alt="Logo"> {{ app.name }}</a>
     <nav>
-        <ul>
+        <button id="menu-button"><i data-feather="menu"></i></button>
+        <ul id="main-menu">
             {% if user %}
                 <li><a href="{{ route('file-upload') }}"><i data-feather="upload"></i> File uploader</a></li>
                 <li><a href="{{ route('file-manager') }}"><i data-feather="folder"></i> File manager</a></li>