Add main menu

Move some less-used menu items to a new click-to-show menu at the top right.

.editorconfig

@@ -0,0 +1,14 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.less]
+indent_style = space
+indent_size = 2
+

assets/css/app.less

@@ -4,6 +4,7 @@
 @import "security";
 @import "contact";
 @import "tags";
+@import "site-header";
 
 @font-color: #283434;
 @font-color-light: #768282;
@@ -114,35 +115,6 @@ a {
   text-decoration: none;
 }
 
-body > header {
-  flex: 2;
-  text-align: center;
-  border-bottom: @border-primary;
-  padding: 0.5rem;
-  background-color: #f1f8f2;
-  a { color: @font-color; }
-
-  h1 {
-    color: @font-color;
-    margin: 0;
-    font-variant: small-caps;
-    letter-spacing: 0.1em;
-  }
-
-  nav ul {
-    display: flex;
-    flex-wrap: wrap;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  nav ul li {
-    flex: 1;
-    padding: 0 0.2em;
-  }
-}
-
 a:hover {
   text-decoration: underline;
   color: #2c2cff;

assets/css/site-header.less

@@ -0,0 +1,105 @@
+body > header {
+  flex: 2;
+  text-align: center;
+  border-bottom: @border-primary;
+  padding: 0.5rem;
+  background-color: #f1f8f2;
+
+  a {
+    color: @font-color;
+  }
+
+  h1 {
+    color: @font-color;
+    margin: 0;
+    font-variant: small-caps;
+    letter-spacing: 0.1em;
+  }
+}
+
+nav.main-nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    flex: 1;
+    padding: 0 0.2em;
+  }
+}
+
+.opaque-underlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(326deg, #fdfbf9 0%, #f3f2f1 98%);
+  opacity: 0.5;
+  content: '';
+  z-index: 10;
+  display: none;
+}
+
+nav.main-menu {
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-align: right;
+  opacity: 0.6;
+  z-index: 20;
+
+  &.menu-open {
+    background-color: white;
+    box-shadow: -3px 3px 6px 0 rgba(212, 212, 212, 1);
+    border: 1px solid #bbb;
+    border-width: 0 0 1px 1px;
+    opacity: 1;
+
+    ul {
+      display: block;
+    }
+  }
+
+  &.menu-closed ul {
+    display: none;
+  }
+
+  div {
+    padding-right: 5px;
+    text-align: right;
+  }
+
+  img {
+    cursor: pointer;
+  }
+
+  ul {
+    text-align: left;
+    margin: 0;
+    padding: 0;
+    display: block;
+    list-style-type: none;
+  }
+
+  li > * {
+    display: block;
+    padding: 5px 15px;
+    border-bottom: 1px solid #bbb;
+  }
+
+  li:first-of-type > * {
+    border-top: 1px solid #bbb;
+  }
+
+  li:last-of-type > * {
+    border-bottom: 0;
+  }
+
+  li > *:hover {
+    text-decoration: none;
+    background-color: lightcyan;
+  }
+}

assets/js/app.js

@@ -1,3 +1,4 @@
 import '../css/app.less';
 import './timezone-converter';
 import './tags';
+import './site-header';

assets/js/site-header.js

@@ -0,0 +1,15 @@
+(function () {
+    const mainMenu = document.querySelector('.main-menu');
+    const underlay = document.querySelector('.opaque-underlay');
+    document.querySelector('.main-menu img').onclick = () => {
+        if (mainMenu.classList.contains('menu-closed')) {
+            mainMenu.classList.add('menu-open');
+            mainMenu.classList.remove('menu-closed');
+            underlay.style.display = 'block';
+        } else {
+            mainMenu.classList.remove('menu-open');
+            mainMenu.classList.add('menu-closed');
+            underlay.style.display = 'none';
+        }
+    };
+})();

public/build/entrypoints.json

@@ -4,10 +4,10 @@
       "js": [
         "/build/runtime.188fa053.js",
         "/build/98.7dea510e.js",
-        "/build/app.6dc3586a.js"
+        "/build/app.89a670f8.js"
       ],
       "css": [
-        "/build/app.5e9a0e52.css"
+        "/build/app.72b68240.css"
       ]
     },
     "map": {

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
-  "build/app.css": "/build/app.5e9a0e52.css",
-  "build/app.js": "/build/app.6dc3586a.js",
+  "build/app.css": "/build/app.72b68240.css",
+  "build/app.js": "/build/app.89a670f8.js",
   "build/map.css": "/build/map.fa728e1a.css",
   "build/map.js": "/build/map.3c3bd4fc.js",
   "build/frontend.css": "/build/frontend.709f92e8.css",
@@ -17,6 +17,7 @@
   "build/images/layers.png": "/build/images/layers.416d9136.png",
   "build/images/map-pin.png": "/build/images/map-pin.png",
   "build/images/send.png": "/build/images/send.png",
+  "build/images/menu.svg": "/build/images/menu.svg",
   "build/images/map-pin.svg": "/build/images/map-pin.svg",
   "build/images/send.svg": "/build/images/send.svg",
   "build/images/wikidata-logo.png": "/build/images/wikidata-logo.png"

templates/base.html.twig

@@ -15,25 +15,35 @@
     </head>
     <body>
         <header>
-            <h1><a href="{{ path('home') }}">{{ settings.siteName }}</a></h1>
-            <nav>
+            <div class="opaque-underlay"></div>
+            <nav class="main-menu menu-closed">
+                <div>
+                    <img src="{{ asset('build/images/menu.svg') }}" alt="Main menu icon." />
+                </div>
                 <ul>
-                    <li><a href="{{ path('home') }}">Home</a></li>
-                    <li><a href="{{ path('tags') }}">Tags</a></li>
-                    <li><a href="{{ path('dates') }}">Dates</a></li>
-                    <li><a href="{{ path('map') }}">Map</a></li>
                     {% if is_granted('ROLE_ADMIN') %}
-                        <li><a href="{{ path('post_create') }}">New post</a></li>
-                        <li><a href="{{ path('post_upload') }}">Upload</a></li>
                         <li><a href="{{ path('contacts') }}">Contacts</a></li>
                         <li><a href="{{ path('settings') }}">Settings</a></li>
                     {% endif %}
                     {% if app.user %}
-                        <li>Logged in as {{ app.user.username }}</li>
+                        <li><span>Logged in as {{ app.user.username }}</span></li>
                         <li><a href="{{ path('logout') }}">Log out</a></li>
                     {% else %}
                         <li><a href="{{ path('login') }}">{{'security.log_in'|trans}}</a></li>
                     {% endif %}
+                <ul>
+            </nav>
+            <h1><a href="{{ path('home') }}">{{ settings.siteName }}</a></h1>
+            <nav class="main-nav">
+                <ul>
+                    <li><a href="{{ path('home') }}">Home</a></li>
+                    <li><a href="{{ path('tags') }}">Tags</a></li>
+                    <li><a href="{{ path('dates') }}">Dates</a></li>
+                    <li><a href="{{ path('map') }}">Map</a></li>
+                    {% if is_granted('ROLE_ADMIN') %}
+                        <li><a href="{{ path('post_create') }}">New post</a></li>
+                        <li><a href="{{ path('post_upload') }}">Upload</a></li>
+                    {% endif %}
                 </ul>
             </nav>
         </header>