Refactor sidebar for "location" display

InvenTree/stock/templates/stock/location.html

@@ -3,8 +3,8 @@
 {% load inventree_extras %}
 {% load i18n %}
 
-{% block menubar %}
+{% block sidebar %}
-{% include "stock/location_navbar.html" %}
+{% include "stock/location_sidebar.html" %}
 {% endblock %}
 
 {% block details_left %}
@@ -173,11 +173,6 @@
 {% block js_ready %}
 {{ block.super }}
 
-    enableNavbar({
-        label: 'location',
-        toggleId: '#location-menu-toggle'
-    });
-
     loadStockLocationTable($('#sublocation-table'), {
         params: {
             {% if location %}
@@ -337,9 +332,6 @@
         url: "{% url 'api-stock-list' %}",
     });
 
-    attachNavCallbacks({
+    enableSidebar('stocklocation');
-        name: 'stocklocation',
-        default: 'stock'
-    });
 
 {% endblock %}

InvenTree/stock/templates/stock/location_navbar.html

@@ -1,25 +0,0 @@
-{% load i18n %}
-
-<ul class='list-group'>
-
-    <li class='list-group-item'>
-        <a href='#' id='location-menu-toggle'>
-            <span class='menu-tab-icon fas fa-expand-arrows-alt'></span>
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Sublocations" %}'>
-        <a href='#' id='select-sublocations' class='nav-toggle'>
-            <span class='fas fa-sitemap sidebar-icon'></span>
-            {% trans "Sublocations" %}
-        </a>
-    </li>
-
-    <li class='list-group-item {% if tab == "stock" %}active{% endif %}' title='{% trans "Stock Items" %}'>
-        <a href='#' id='select-stock' class='nav-toggle'>
-            <span class='fas fa-boxes sidebar-icon'></span>
-            {% trans "Stock Items" %}
-        </a>
-    </li>
-
-</ul>

InvenTree/stock/templates/stock/location_sidebar.html

@@ -0,0 +1,6 @@
+{% load i18n %}
+{% load static %}
+{% load inventree_extras %}
+
+{% include "sidebar_item.html" with label='sublocations' text="Sublocations" icon="fa-sitemap" %}
+{% include "sidebar_item.html" with label='stock' text="Stock Items" icon="fa-boxes" %}

InvenTree/templates/js/dynamic/nav.js

@@ -315,100 +315,3 @@ function setSidebarState(label, state) {
     // Save the state of this sidebar
     localStorage.setItem(`inventree-menu-state-${label}`, state);
 }
-
-
-/**
- * Handle left-hand icon menubar display
- */
-function enableNavbarX(options) {
-
-    var resize = true;
-
-    if ('resize' in options) {
-        resize = options.resize;
-    }
-
-    var label = options.label || 'nav';
-
-    label = `navbar-${label}`;
-
-    var stateLabel = `${label}-state`;
-    var widthLabel = `${label}-width`;
-
-    var navId = options.navId || '#sidenav-right';
-
-    var toggleId = options.toggleId;
-
-    // Extract the saved width for this element
-    $(navId).animate({
-        'width': '45px',
-        'min-width': '45px',
-        'display': 'block',
-    }, 50, function() {
-
-        // Make the navbar resizable
-        if (resize) {
-            $(navId).resizable({
-                minWidth: options.minWidth || '100px',
-                maxWidth: options.maxWidth || '500px',
-                handles: 'e, se',
-                grid: [5, 5],
-                stop: function(event, ui) {
-                    // Record the new width
-                    var width = Math.round(ui.element.width());
-
-                    // Reasonably narrow? Just close it!
-                    if (width <= 75) {
-                        $(navId).animate({
-                            width: '45px'
-                        }, 50);
-
-                        localStorage.setItem(stateLabel, 'closed');
-                    } else {
-                        localStorage.setItem(widthLabel, `${width}px`);
-                        localStorage.setItem(stateLabel, 'open');
-                    }
-                }
-            });
-        }
-
-        var state = localStorage.getItem(stateLabel);
-
-        var width = localStorage.getItem(widthLabel) || '250px';
-        
-        if (state && state == 'open') {
-
-            $(navId).animate({
-                width: width
-            }, 100);
-        }
-
-    });
-
-    // Register callback for 'toggle' button
-    if (toggleId) {
-
-        $(toggleId).click(function() {
-
-            var state = localStorage.getItem(stateLabel) || 'closed';
-            var width = localStorage.getItem(widthLabel) || '250px';
-
-            if (state == 'open') {
-                $(navId).animate({
-                    width: '45px',
-                    minWidth: '45px',
-                }, 50);
-
-                localStorage.setItem(stateLabel, 'closed');
-
-            } else {
-
-                $(navId).animate({
-                    'width': width
-                }, 50);
-
-                localStorage.setItem(stateLabel, 'open');
-            }
-        });
-    }
-}

InvenTree/templates/sidebar_item.html

@@ -1,4 +1,4 @@
 {% load i18n %}
-<a href="#" id='select-{{ label }}' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-selector" data-bs-parent="#sidebar">
+<a href="#" id='select-{{ label }}' title='{% trans text %}' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-selector" data-bs-parent="#sidebar">
     <i class="bi bi-bootstrap"></i><span class='sidebar-item-icon fas {{ icon }}'></span><span class='sidebar-item-text' style='display: none;'>{% trans text %}</span>
 </a>