Refactor side navigation tree

InvenTree/InvenTree/static/css/inventree.css

@@ -725,6 +725,7 @@ input[type="submit"] {
     top: 70px;
     position: sticky;
     font-size: 115%;
+    margin-left: 5px;
 }
 
 .sidenav-right svg {

InvenTree/InvenTree/static/script/inventree/sidenav.js

@@ -67,79 +67,91 @@ function loadTree(url, tree, options={}) {
     });
 }
 
-function openSideNav(navId) {
-//    document.getElementById("sidenav").style.display = "block";
-//    document.getElementById("sidenav").style.width = "250px";
 
-    if (!navId) {
-        navId = '#sidenav-left';
-    }
-    
-    sessionStorage.setItem('inventree-sidenav-state', 'open');
+/**
+ * Initialize navigation tree display
+ */
+function initNavTree(options) {
 
-    $(navId).animate({
-        width: '250px',
-        'min-width': '200px',
-        display: 'block'
-    }, 50);
+    var resize = true;
 
-
-}
-
-function closeSideNav(navId) {
-
-    if (!navId) {
-        navId = '#sidenav-left';
+    if ('resize' in options) {
+        resize = options.resize;
     }
 
-    sessionStorage.setItem('inventree-sidenav-state', 'closed');
-    
-    $(navId).animate({
+    var label = options.label || 'nav';
+
+    var stateLabel = `${label}-tree-state`;
+    var widthLabel = `${label}-tree-width`;
+
+    var treeId = options.treeId || '#sidenav-left';
+    var toggleId = options.toggleId;
+
+    // Initially hide the tree
+    $(treeId).animate({
         width: '0px',
-        'min-width': '0px',
-        display: 'none',
-    }, 50);
+    }, 0, function() {
 
-    //document.getElementById("sidenav").style.display = "none";
-    //document.getElementById("sidenav").style.width = "0";
-    //document.getElementById("inventree-content").style.marginLeft = "0px";
+        if (resize) {
+            $(treeId).resizable({
+                minWidth: '0px',
+                maxWidth: '500px',
+                handles: 'e, se',
+                grid: [5, 5],
+                stop: function(event, ui) {
+                    var width = Math.round(ui.element.width());
 
-}
+                    if (width < 75) {
+                        $(treeId).animate({
+                            width: '0px'
+                        }, 50);
 
-function toggleSideNav(nav) {
-    if ($(nav).width() <= 0) {
-        openSideNav(nav);
-    }
-    else {
-        closeSideNav(nav);
-    }
-}
+                        sessionStorage.setItem(stateLabel, 'closed');
+                    } else {
+                        sessionStorage.setItem(stateLabel, 'open');
+                        sessionStorage.setItem(widthLabel, `${width}px`);
+                    }
+                }
+            });
+        }
 
-function initSideNav(navId) {
+        var state = sessionStorage.getItem(stateLabel);
+        var width = sessionStorage.getItem(widthLabel) || '300px';
 
-    // Make it resizable
+        if (state && state == 'open') {
 
-    if (!navId) {
-        navId = '#sidenav-left';
-    }
-
-    $(navId).resizable({
-        minWidth: '100px',
-        maxWidth: '500px',
-        stop: function(event, ui) {
-            console.log(ui.element.width());
-            //console.log(ui.size.width);
+            $(treeId).animate({
+                width: width,
+            }, 50);
         }
     });
 
-    if (sessionStorage.getItem("inventree-sidenav-state") && sessionStorage.getItem('inventree-sidenav-state') == 'open') {
-        openSideNav(navId);
-    }
-    else {
-        closeSideNav(navId);
+    // Register callback for 'toggle' button
+    if (toggleId) {
+        
+        $(toggleId).click(function() {
+
+            var state = sessionStorage.getItem(stateLabel) || 'closed';
+            var width = sessionStorage.getItem(widthLabel) || '300px';
+
+            if (state == 'open') {
+                $(treeId).animate({
+                    width: '0px'
+                }, 50);
+
+                sessionStorage.setItem(stateLabel, 'closed');
+            } else {
+                $(treeId).animate({
+                    width: width,
+                }, 50);
+
+                sessionStorage.setItem(stateLabel, 'open');
+            }
+        });
     }
 }
 
+
 /**
  * Handle left-hand icon menubar display
  */

InvenTree/part/templates/part/part_app_base.html

@@ -29,8 +29,6 @@ InvenTree | {% trans "Part List" %}
 {% block js_ready %}
 {{ block.super }}
 
-    closeSideNav();
-
     loadTree("{% url 'api-part-tree' %}",
         "#part-tree",
         {
@@ -38,11 +36,9 @@ InvenTree | {% trans "Part List" %}
         }
     );
 
-    $("#toggle-part-tree").click(function() {
-        toggleSideNav("#sidenav-left");
-        return false;
+    initNavTree({
+        label: 'part',
+        treeId: '#sidenav-left',
+        toggleId: '#toggle-part-tree',
     });
-
-    initSideNav();
-
 {% endblock %}

InvenTree/stock/templates/stock/stock_app_base.html

@@ -11,7 +11,9 @@ InvenTree | Stock
 {% endblock %}
 
 {% block sidenav %}
-<div id='stock-tree'></div>
+<div id='stock-tree'>
+    {% trans "Loading..." %}
+</div>
 {% endblock %}
 
 {% block pre_content %}
@@ -24,6 +26,7 @@ InvenTree | Stock
 
 {% block js_ready %}
 {{ block.super }}
+
     loadTree("{% url 'api-stock-tree' %}",
         "#stock-tree",
         {
@@ -31,10 +34,10 @@ InvenTree | Stock
         }
     );
 
-    $("#toggle-stock-tree").click(function() {
-        toggleSideNav("#sidenav-left");
-        return false;
-    })
+    initNavTree({
+        label: 'stock',
+        treeId: '#sidenav-left',
+        toggleId: '#toggle-stock-tree',
+    });
 
-    initSideNav();
 {% endblock %}