Minor changes to responsive layout

Author: danieleperilli

assets/_sass/_header.scss

@@ -14,7 +14,7 @@ header.main {
         img {
             height: 32px;
             width: auto;
-            margin-right: 20px;
+            margin-right: 10px;
         }
 
     }
@@ -94,7 +94,7 @@ header.main {
 
         .logo img {
             height: 28px;
-            margin-right: 12px;
+            margin-right: 0;
         }
 
         .title {
@@ -117,12 +117,9 @@ header.main {
     }
 
     @include screen(520px) {
-        .title {
-            display: none;
-        }
 
         .controls .ctrl.gotoapp {
-            margin-left: 4px;
+            display: none;
         }
     }
 }

assets/_sass/_nav.scss

@@ -158,9 +158,13 @@ nav {
             max-width: calc(100vw - 48px);
             height: auto;
             transform: translateX(calc(-100% - 12px));
-            transition: transform 180ms ease;
+            transition: none;
             box-shadow: 2px 0 12px rgba(0, 0, 0, 0.16);
 
+            html.nav-animating & {
+                transition: transform 180ms ease;
+            }
+
             html.nav-open & {
                 transform: translateX(0);
             }

assets/scripts/main.js

@@ -206,6 +206,7 @@ if (navElement) {
     rememberExpandedSizes(sizes);
 
     const menuElement = document.querySelector(".burger");
+    const mobileNavQuery = window.matchMedia ? window.matchMedia("(max-width: 760px)") : { matches: false };
     if (isCollapsedSizes(sizes)) menuElement.classList.add("collapsed");
 
     try {
@@ -223,7 +224,25 @@ if (navElement) {
             }
         });
 
+        /**
+         * Restores the desktop burger icon after leaving the mobile breakpoint.
+         * @param {MediaQueryList|MediaQueryListEvent} query
+         */
+        const syncDesktopNav = query => {
+            if (query.matches) return;
+
+            document.documentElement.classList.remove("nav-open", "nav-animating");
+            menuElement.classList.toggle("collapsed", isCollapsedSizes(panes.getSizes()));
+        };
+
+        if (mobileNavQuery.addEventListener)
+            mobileNavQuery.addEventListener("change", syncDesktopNav);
+        else if (mobileNavQuery.addListener)
+            mobileNavQuery.addListener(syncDesktopNav);
+
         menuElement.addEventListener("click", e => {
+            if (mobileNavQuery.matches) return;
+
             e.preventDefault();
 
             if (panes) {

assets/scripts/main.min.js

@@ -1,8 +1,33 @@
 // Fix initial width panels
 try {
-    const storedSizes = JSON.parse(localStorage.getItem("panels-sizes"));
-    const sizes = Array.isArray(storedSizes) && storedSizes.length > 1 && storedSizes.every(size => Number.isFinite(size)) ? storedSizes : null;
     const mobileNavQuery = window.matchMedia ? window.matchMedia("(max-width: 760px)") : { matches: false };
+    const navTransitionDuration = 220;
+
+    /**
+     * Checks whether persisted panel sizes can be reused.
+     * @param {unknown} sizes
+     */
+    const isValidSizes = sizes => Array.isArray(sizes) && sizes.length > 1 && sizes.every(size => Number.isFinite(size));
+
+    /**
+     * Reads the current persisted split panel sizes.
+     */
+    const readStoredSizes = () => {
+        try {
+            const sizes = JSON.parse(localStorage.getItem("panels-sizes"));
+            return isValidSizes(sizes) ? sizes : null;
+        } catch (_) {
+            return null;
+        }
+    };
+
+    /**
+     * Checks whether the persisted navigation panel is collapsed.
+     * @param {unknown} sizes
+     */
+    const isCollapsedSizes = sizes => isValidSizes(sizes) && sizes[0] < 10;
+
+    const sizes = readStoredSizes();
     const rules = `
         ${sizes && !mobileNavQuery.matches ? `.main-nav { width:calc(${sizes[0] ?? 0}% - 3px); }` : ""}
         .page.loading { visibility: visible; }
@@ -13,17 +38,38 @@ try {
         const burger = document.querySelector(".burger");
         if (!burger) return;
 
+        const root = document.documentElement;
+        let navTransitionTimer = 0;
+
+        /**
+         * Stops mobile navigation transition overrides.
+         */
+        const stopMobileNavTransition = () => {
+            window.clearTimeout(navTransitionTimer);
+            root.classList.remove("nav-animating");
+        };
+
+        /**
+         * Enables the mobile navigation transition only for user-triggered toggles.
+         */
+        const startMobileNavTransition = () => {
+            window.clearTimeout(navTransitionTimer);
+            root.classList.add("nav-animating");
+            navTransitionTimer = window.setTimeout(stopMobileNavTransition, navTransitionDuration);
+        };
+
         /**
          * Closes the off-canvas navigation when entering the mobile layout.
          * @param {MediaQueryList|MediaQueryListEvent} query
          */
         const syncMobileNav = query => {
+            stopMobileNavTransition();
+            root.classList.remove("nav-open");
+
             if (query.matches) {
-                document.documentElement.classList.remove("nav-open");
                 burger.classList.add("collapsed");
             } else {
-                document.documentElement.classList.remove("nav-open");
-                burger.classList.toggle("collapsed", Array.isArray(sizes) && sizes[0] < 10);
+                burger.classList.toggle("collapsed", isCollapsedSizes(readStoredSizes()));
             }
         };
 
@@ -33,7 +79,8 @@ try {
             e.preventDefault();
             e.stopImmediatePropagation();
 
-            const isOpen = document.documentElement.classList.toggle("nav-open");
+            startMobileNavTransition();
+            const isOpen = root.classList.toggle("nav-open");
             burger.classList.toggle("collapsed", !isOpen);
         }, true);