From c25bc723154dcbd4b8500c7334c189e7a22cf940 Mon Sep 17 00:00:00 2001
From: luukas <lukasdoesdev@gmail.com>
Date: Thu, 10 Feb 2022 00:26:16 +0200
Subject: [PATCH] Added better navigation.

* Double chevrons on the top right to expand/collapse the sidebar
* Save sidebar preference on extra large (>= 1200px) viewports
* Auto collapse sidebar on large (>= 992px) viewports
* (Old behavior) Medium (>= 768px) and smaller viewports are mobile
Check app/frontend/templates/main_menu.html line 45 onwards for more
---
 app/frontend/static/assets/js/shared/misc.js |  6 +-
 app/frontend/templates/base.html             | 13 +++-
 app/frontend/templates/main_menu.html        | 64 +++++++++++++++++++-
 3 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/app/frontend/static/assets/js/shared/misc.js b/app/frontend/static/assets/js/shared/misc.js
index 5d05697f..f39bf482 100755
--- a/app/frontend/static/assets/js/shared/misc.js
+++ b/app/frontend/static/assets/js/shared/misc.js
@@ -207,6 +207,10 @@ if ($('canvas').length) {
         body.toggleClass('sidebar-hidden');
       } else {
         body.toggleClass('sidebar-icon-only');
+        const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+        if (vw >= 1200) {
+            localStorage.setItem('crafty-sidebar-expanded', !body.hasClass('sidebar-icon-only'));
+        }
       }
     });
 
@@ -231,4 +235,4 @@ if ($('canvas').length) {
       $(this).not(".brand-logo").attr('toggle-status', 'closed');
     }
   });
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/app/frontend/templates/base.html b/app/frontend/templates/base.html
index b70091b4..05c8e457 100644
--- a/app/frontend/templates/base.html
+++ b/app/frontend/templates/base.html
@@ -47,8 +47,17 @@
           <img src="/static/assets/images/logo_small.svg" alt="logo" /> </a>
       </div>
       <div class="navbar-menu-wrapper d-flex align-items-center">
+        <style>
+        body:not(.sidebar-icon-only) .navbar-toggler .mdi-chevron-double-right {
+            display: none;
+        }
+        body.sidebar-icon-only .navbar-toggler .mdi-chevron-double-left {
+            display: none;
+        }
+        </style>
         <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
-          <span class="mdi mdi-menu"></span>
+          <span class="mdi mdi-chevron-double-left"></span>
+          <span class="mdi mdi-chevron-double-right"></span>
         </button>
 
         {% include notify.html %}
@@ -423,4 +432,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/app/frontend/templates/main_menu.html b/app/frontend/templates/main_menu.html
index dc27b9ec..20c9e10a 100644
--- a/app/frontend/templates/main_menu.html
+++ b/app/frontend/templates/main_menu.html
@@ -1,6 +1,68 @@
 <!-- partial -->
       <div class="container-fluid page-body-wrapper">
         <!-- partial:partials/_sidebar.html -->
+        <style>
+        @media screen and (max-width: 991px) {
+            .sidebar-offcanvas {
+                -webkit-transition: all 0.25s cubic-bezier(.22,.61,.36,1);
+                transition: all 0.25s cubic-bezier(.22,.61,.36,1);
+                box-shadow: 0px 8px 17px 2px rgba(0,0,0,0.14) , 0px 3px 14px 2px rgba(0,0,0,0.12) , 0px 5px 5px -3px rgba(0,0,0,0.2);
+            }
+        }
+        </style>
+        <script>
+            function debounce(func, wait, immediate) {
+            	var timeout;
+            	return function() {
+		            var context = this, args = arguments;
+        		    var later = function() {
+		        	    timeout = null;
+            			if (!immediate) func.apply(context, args);
+	    	        };
+            		var callNow = immediate && !timeout;
+		            clearTimeout(timeout);
+        		    timeout = setTimeout(later, wait);
+		            if (callNow) func.apply(context, args);
+            	};
+            };
+            function isExtraLargeBreakpoint() {
+                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+                return vw >= 1200;
+            }
+            function isLargeBreakpoint() {
+                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+                return vw >= 992;
+            }
+            $(document).ready(function() {
+                sidebarResizeHandler(null);
+                $(window).on(
+                    'resize',
+                    debounce(sidebarResizeHandler, 25, true)
+                );
+            });
+            function sidebarResizeHandler(e) {
+                /*
+                    Viewport sizes: Extra large (vw >= 1200px), large (vw >= 992px), medium (vw >= 768px)
+                  - A localstorage item is set to remember a user's preference between collapsed or expanded.
+                  - For extra large viewports, the sidebar is the user's preference (by default expanded). When
+                    expanded or collapsed manually, it doesn't overlap the page content and the preference
+                    gets saved to a localstorage item.
+                  - For large viewports, the sidebar is collapsed. When expanded manually, it doesn't overlap
+                    the page content. The user's localstorage preference is not overridden during this state.
+                  - For medium and below viewports, the sidebar is hidden behing a hamburger icon. When expanded, the sidebar
+                    overlaps the page content. The user's localstorage preference is not overridden during this state.
+
+                  More code in `app/frontend/static/assets/js/shared/misc.js` and `app/frontend/templates/base.html`
+                */
+                if (isExtraLargeBreakpoint()) {
+                    let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false';
+                    $('body').toggleClass('sidebar-icon-only', !value);
+                    localStorage.setItem('crafty-sidebar-expanded', value);
+                } else if (isLargeBreakpoint()) {
+                    $('body').toggleClass('sidebar-icon-only', true);
+                }
+            }
+        </script>
         <nav class="sidebar sidebar-offcanvas" id="sidebar">
           <ul class="nav">
 
@@ -68,4 +130,4 @@
 
           </ul>
         </nav>
-        <!-- partial -->
\ No newline at end of file
+        <!-- partial -->