Refactor sidebar for "stock item" page

InvenTree/part/templates/part/detail.html

@@ -1114,4 +1114,6 @@
             var SalePriceChart = loadSellPricingChart($('#SalePriceChart'), salepricedata)
     {% endif %}
 
+    enableSidebar('part');
+
 {% endblock %}

InvenTree/part/templates/part/part_base.html

@@ -216,13 +216,6 @@
 {% block js_ready %}
 {{ block.super }}
 
-    enableSidebar(
-        'part',
-        {
-            default: 'part-details',
-        }
-    );
-
     {% if part.image %}
     $('#part-thumb').click(function() {
         showModalImage('{{ part.image.url }}');

InvenTree/stock/templates/stock/item.html

@@ -6,8 +6,8 @@
 {% load l10n %}
 {% load markdownify %}
 
-{% block menubar %}
+{% block sidebar %}
-{% include "stock/navbar.html" %}
+{% include "stock/stock_sidebar.html" %}
 {% endblock %}
 
 {% block page_content %}
@@ -397,4 +397,6 @@
         url: "{% url 'api-stock-tracking-list' %}", 
     });
 
+    enableSidebar('stockitem');
+
 {% endblock %}

InvenTree/stock/templates/stock/item_base.html

@@ -8,10 +8,6 @@
 {% inventree_title %} | {% trans "Stock Item" %} - {{ item }}
 {% endblock %}
 
-{% block sidenav %}
-<div id='stock-tree'></div>
-{% endblock %}
-
 {% block breadcrumbs %}
 {% include 'stock/loc_link.html' with location=item.location %}
 {% endblock %}
@@ -430,11 +426,6 @@
 {% block js_ready %}
 {{ block.super }}
 
-enableNavbar({
-    label: 'item',
-    toggleId: '#item-menu-toggle',
-});
-
 loadTree("{% url 'api-stock-tree' %}",
     "#stock-tree",
     {
@@ -621,9 +612,4 @@ $("#stock-return-from-customer").click(function() {
 
 {% endif %}
 
-attachNavCallbacks({
-    name: 'stockitem',
-    default: 'history'
-});
-
 {% endblock %}

InvenTree/stock/templates/stock/navbar.html

@@ -1,61 +0,0 @@
-{% load i18n %}
-
-<ul class='list-group'>
-
-    <li class='list-group-item'>
-        <a href='#' id='item-menu-toggle'>
-            <span class='menu-tab-icon fas fa-expand-arrows-alt'></span>
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Stock Item Tracking" %}'>
-        <a href='#' id='select-history' class='nav-toggle'>
-            <span class='fas fa-history sidebar-icon'></span>
-            {% trans "History" %}
-        </a>
-    </li>
-
-    {% if item.part.trackable %}
-    <li class='list-group-item' title='{% trans "Test Data" %}'>
-        <a href='#' id='select-test-data' class='nav-toggle'>
-            <span class='fas fa-vial sidebar-icon'></span>
-            {% trans "Test Data" %}
-        </a>
-    </li>
-
-    {% if item.part.assembly %}
-    <li class='list-group-item' title='{% trans "Installed Stock Items" %}'>
-        <a href='#' id='select-installed-items' class='nav-toggle'>
-            <span class='fas fa-sign-in-alt sidebar-icon'></span>
-            {% trans "Installed Items" %}
-        </a>
-    </li>
-    {% endif %}
-
-    {% endif %}
-
-    {% if item.child_count > 0 %}
-    <li class='list-group-item' title='{% trans "Child Items" %}'>
-        <a href='#' id='select-children' class='nav-toggle'>
-            <span class='fas fa-sitemap sidebar-icon'></span>
-            {% trans "Children" %}
-        </a>
-    </li>
-    {% endif %}
-
-
-    <li class='list-group-item' title='{% trans "Attachments" %}'>
-        <a href='#' id='select-attachments' class='nav-toggle'>
-            <span class='fas fa-paperclip sidebar-icon'></span>
-            {% trans "Attachments" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Stock Item Notes" %}'>
-        <a href='#' id='select-notes' class='nav-toggle'>
-            <span class='fas fa-clipboard sidebar-icon'></span>
-            {% trans "Notes" %}
-        </a>
-    </li>
-
-</ul>

InvenTree/stock/templates/stock/stock_sidebar.html

@@ -0,0 +1,16 @@
+{% load i18n %}
+{% load static %}
+{% load inventree_extras %}
+
+{% include "sidebar_item.html" with label='history' text="Stock Tracking" icon="fa-history" %}
+{% if item.part.trackable %}
+{% include "sidebar_item.html" with label='test-data' text="Test Data" icon="fa-vial" %}
+{% endif %}
+{% if item.part.assembly %}
+{% include "sidebar_item.html" with label='installed-items' text="Installed Items" icon="fa-sign-in-alt" %}
+{% endif %}
+{% if item.child_count > 0 %}
+{% include "sidebar_item.html" with label='children' text="Child Items" icon="fa-sitemap" %}
+{% endif %}
+{% include "sidebar_item.html" with label='attachments' text="Attachments" icon="fa-paperclip" %}
+{% include "sidebar_item.html" with label='notes' text="Notes" icon="fa-clipboard" %}

InvenTree/templates/js/dynamic/nav.js

@@ -8,41 +8,6 @@
     onPanelLoad,
 */
 
-/*
-* Attach callbacks to navigation bar elements.
-*
-* Searches for elements with the class 'nav-toggle'.
-* A callback is added to each element,
-* to display the matching panel.
-*
-* The 'id' of the .nav-toggle element should be of the form "select-<x>",
-* and point to a matching "panel-<x>"
-*/
-function attachNavCallbacksX(options={}) {
-
-    $('.nav-toggle').click(function() {
-        var el = $(this);
-
-        // Find the matching "panel" element
-        var panelName = el.attr('id').replace('select-', '');
-
-        activatePanel(panelName, options);
-    });
-
-    var panelClass = options.name || 'unknown';
-
-    /* Look for a default panel to initialize
-     * First preference = URL parameter e.g. ?display=part-stock
-     * Second preference = localStorage
-     * Third preference = default
-     */
-    var defaultPanel = $.urlParam('display') || localStorage.getItem(`inventree-selected-panel-${panelClass}`) || options.default;
-
-    if (defaultPanel) {
-        activatePanel(defaultPanel);
-    }
-}
-
 /*
  * Activate (display) the selected panel
  */
@@ -52,6 +17,8 @@ function activatePanel(label, panel_name, options={}) {
     $('.panel-visible').hide();
     $('.panel-visible').removeClass('panel-visible');
 
+    console.log('active panel:', label, panel_name);
+
     // Find the target panel
     var panel = `#panel-${panel_name}`;
     var select = `#select-${panel_name}`;