Change "sidetree" to "breadcrumb-tree"

InvenTree/part/templates/part/category.html

@@ -6,9 +6,9 @@
 {% include 'part/category_sidebar.html' %}
 {% endblock %}
 
-{% block sidetree %}
-<div id="tree"></div>
-{% endblock %}
+{% block breadcrumb_tree %}
+<div id="breadcrumb-tree"></div>
+{% endblock breadcrumb_tree %}
 
 {% block heading %}
 {% if category %}
@@ -243,8 +243,11 @@
 
     {% endif %}
 
+    // Enable left-hand navigation sidebar
     enableSidebar('category');
-    enableSidetree('category');
+
+    // Enable breadcrumb tree view
+    enableBreadcrumbTree('category');
 
     loadPartCategoryTable(
         $('#subcategory-table'), {

InvenTree/part/templates/part/detail.html

@@ -9,9 +9,9 @@
 {% include 'part/part_sidebar.html' %}
 {% endblock %}
 
-{% block sidetree %}
-<div id="tree"></div>
-{% endblock %}
+{% block breadcrumb_tree %}
+<div id="breadcrumb-tree"></div>
+{% endblock breadcrumb_tree %}
 
 {% block page_content %}
 
@@ -1065,6 +1065,7 @@
     {% endif %}
 
     enableSidebar('part');
-    enableSidetree('part');
+
+    enableBreadcrumbTree('part');
 
 {% endblock %}

InvenTree/part/templates/part/part_app_base.html

@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block breadcrumbs %}
-<a href='#' id='sidetree-toggle' class="breadcrumb-item"><i class="fas fa-bars"></i></a>
+<a href='#' id='breadcrumb-tree-toggle' class="breadcrumb-item"><i class="fas fa-bars"></i></a>
 {% if part %}
 {% include "part/cat_link.html" with category=part.category part=part %}
 {% else %}

InvenTree/templates/base.html

@@ -105,23 +105,22 @@
             {% endblock %}
 
             {% block breadcrumb_list %}
-            <div class='container-fluid navigation'>
+            <div class='container-fluid navigation' id='breadcrumb-div'>
                 <nav aria-label='breadcrumb'>
-                    <ol class='breadcrumb'>
+                    <ol class='breadcrumb' id='breadcrumb-list'>
                         {% block breadcrumbs %}
                         {% endblock %}
                     </ol>
                 </nav>
-            </div>
-            {% endblock %}
 
-            <div class='col-auto px-1 sidebar-wrapper'>
-                <div id='sidetree' class='collapse collapse-horizontal show border' style='display: none;'>
-                {% block sidetree %}
-                {% endblock %}
+                <div id='breadcrumb-tree-collapse' class='collapse collapse-horizontal show border' style='display: none;'>
+                    {% block breadcrumb_tree %}
+                    {% endblock %}
                 </div>
             </div>
 
+            {% endblock %}
+
             {% block content %}
                 <!-- Each view fills in here.. -->
             {% endblock %}

InvenTree/templates/js/dynamic/nav.js

@@ -6,8 +6,8 @@
     addSidebarHeader,
     addSidebarItem,
     addSidebarLink,
+    enableBreadcrumbTree,
     enableSidebar,
-    enableSidetree,
     onPanelLoad,
 */
 
@@ -147,10 +147,10 @@ function enableSidebar(label, options={}) {
 }
 
 /**
- * Enable support for a sidetree on this page
+ * Enable support for breadcrumb tree navigation on this page
  */
-function enableSidetree(label) {
-    $('#tree').jstree({
+function enableBreadcrumbTree(label) {
+    $('#breadcrumb-tree').jstree({
         'core': {
             'data': {
                 'url': '/api/part/category/tree/',
@@ -167,29 +167,29 @@ function enableSidetree(label) {
         window.location.href = data.node.a_attr.href;
     });
 
-    $('#sidetree-toggle').click(function() {
+    $('#breadcrumb-tree-toggle').click(function() {
         // Add callback to "collapse" and "expand" the sidebar
 
         // By default, the menu is "expanded"
         var state = localStorage.getItem(`inventree-tree-state-${label}`) || 'expanded';
         
         // We wish to "toggle" the state!
-        setSidetreeState(label, state == 'expanded' ? 'collapsed' : 'expanded');
+        setBreadcrumbTreeState(label, state == 'expanded' ? 'collapsed' : 'expanded');
     });
 
     // Set the initial state (default = expanded)
     var state = localStorage.getItem(`inventree-tree-state-${label}`) || 'expanded';
 
-    setSidetreeState(label, state);
+    setBreadcrumbTreeState(label, state);
+
+    function setBreadcrumbTreeState(label, state) {
 
-    function setSidetreeState(label, state) {
         if (state == 'collapsed') {
-            $('#sidetree').hide(100);
-            $(`#sidetree-toggle-icon`).removeClass('fa-chevron-left').addClass('fa-chevron-right');
+            $('#breadcrumb-tree-collapse').hide(100);
         } else {
-            $('#sidetree').show(100);
-            $(`#sidetree-toggle-icon`).removeClass('fa-chevron-right').addClass('fa-chevron-left');
+            $('#breadcrumb-tree-collapse').show(100);
         }
+
         localStorage.setItem(`inventree-tree-state-${label}`, state);
     }
 }