Move part menu to the left

InvenTree/InvenTree/static/css/inventree.css

@@ -704,6 +704,7 @@ input[type="submit"] {
     left: 0px;
     top: 0px;
     width: 0px;
+    z-index: 500;
 }
 
 .sidenav-left .badge {
@@ -713,8 +714,9 @@ input[type="submit"] {
 }
 
 .sidenav-right {
+    min-width: 45px;
     width: 0px;
-    right: 0px;
+    left: 0px;
     top: 70px;
     position: sticky;
     font-size: 115%;

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

@@ -133,9 +133,91 @@ function initSideNav(navId) {
     });
 
     if (sessionStorage.getItem("inventree-sidenav-state") && sessionStorage.getItem('inventree-sidenav-state') == 'open') {
-        openSideNav();
+        openSideNav(navId);
     }
     else {
-        closeSideNav();
+        closeSideNav(navId);
+    }
+}
+
+
+function enableNavbar(options) {
+
+    var resize = true;
+
+    if ('resize' in options) {
+        resize = options.resize;
+    }
+
+    console.log('enable navbar: ' + options.navId);
+
+    // Make the navbar resizable
+    if (resize) {
+        $(options.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());
+                console.log('Resized to: ' + width);
+            }
+        });
+    }
+
+    // Extract the saved width for this element
+    $(options.navId).animate({
+        width: '250px',
+        display: 'block',
+    }, 50);
+    
+    console.log('Done');
+}
+
+
+function enableLeftNavbar(options={}) {
+    /**
+     * Enable the left-hand nav bar for this page.
+     */
+
+    options.navId = options.navId || '#sidenav-left';
+
+    enableNavbar(options);
+}
+
+function enableRightNavbar(options={}) {
+
+    options.navId = options.navId || '#sidenav-right';
+
+    enableNavbar(options);
+}
+
+/**
+ * Function to toggle a menu
+ */
+function toggleMenuExpand(menuId) {
+
+    var stateKey = `menu-state-${menuId}`;
+    var widthKey = `menu-width-${menuId}`;
+
+    if (sessionStorage.getItem(stateKey) && sessionStorage.getItem(stateKey) == 'open') {
+        
+        // Close the menu
+        $('#sidenav-right').animate({
+            'width': '45px'
+        }, 50);
+
+        sessionStorage.setItem(stateKey, 'closed');
+    } else {
+
+        var width = sessionStorage.getItem(widthKey) || '250px';
+
+        // Open the menu
+        $('#sidenav-right').animate({
+            'width': width,
+        }, 50);
+
+        sessionStorage.setItem(stateKey, 'open');
     }
 }

InvenTree/part/templates/part/navbar.html

@@ -4,56 +4,108 @@
 
 <ul class='list-group'>
     <li class='list-group-item'>
-        <span class='fas fa-expand-arrows-alt'></span> <b>{% trans "Part" %}</b>
+        <a href='#' id='part-menu-toggle'>
+            <span class='fas fa-expand-arrows-alt'></span>
+            <b>{% trans "Part" %}</b>
+        </a>
     </li>
-    <li class='list-group-item' title='{% trans "Details" %}'>
-        <a href='#'>
+    <li class='list-group-item {% if tab == "details" %}active{% endif %}' title='{% trans "Part Details" %}'>
+        <a href='{% url "part-detail" part.id %}'>
             <span class='fas fa-info-circle'></span> {% trans "Details" %}
         </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-tasks'></span> {% trans "Parameters" %}
+        <a href='{% url "part-params" part.id %}'>    
+            <span class='fas fa-tasks'></span>
+            {% trans "Parameters" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-shapes'></span> {% trans "Variants" %}
+        <a href='{% url "part-variants" part.id %}'>
+            <span class='fas fa-shapes'></span>
+            {% trans "Variants" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-boxes'></span> {% trans "Stock" %}
+        <a href='{% url "part-stock" part.id %}'>
+            <span class='fas fa-boxes'></span>
+            {% trans "Stock" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-sign-out-alt'></span> {% trans "Allocations" %}
+        <a href='{% url "part-allocation" part.id %}'>
+            <span class='fas fa-sign-out-alt'></span>
+            {% trans "Allocations" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-list'></span> {% trans "Bill of Materials" %}
+        <a href='{% url "part-bom" part.id %}'>
+            <span class='fas fa-list'></span>
+            {% trans "Bill of Materials" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-tools'></span> {% trans "Build Orders" %}
+        <a href='{% url "part-build" part.id %}'>
+            <span class='fas fa-tools'></span>
+            {% trans "Build Orders" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-layer-group'></span> {% trans "Used In" %}
+        <a href='{% url "part-used-in" part.id %}'>
+            <span class='fas fa-layer-group'></span>
+            {% trans "Used In" %}
+        </a>
+    </li>
+    {% if roles.purchase_order.view %}
+    <li class='list-group-item'>
+        <a href='{% url "part-suppliers" part.id %}'>
+            <span class='fas fa-building'></span>
+            {% trans "Suppliers" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-building'></span> {% trans "Suppliers" %}
+        <a href='{% url "part-orders" part.id %}'>
+            <span class='fas fa-shopping-cart'></span>
+            {% trans "Purchase Orders" %}
+        </a>
+    </li>
+    {% endif %}
+    {% if roles.sales_order.view %}
+    <li class='list-group-item'>
+        <a href='{% url "part-sale-prices" part.id %}'>
+            <span class='fas fa-dollar-sign'></span>
+            {% trans "Sale Price" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-shopping-cart'></span> {% trans "Purchase Orders" %}
+        <a href='{% url "part-sales-orders" part.id %}'>
+            <span class='fas fa-truck'></span>
+            {% trans "Sales Orders" %}
+        </a>
+    </li>
+    {% endif %}
+    <li class='list-group-item' title='{% trans "Part Test Templates" %}'>
+        <a href='{% url "part-test-templates" part.id %}'>
+            <span class='fas fa-vial'></span>
+            {% trans "Tests" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-dollar-sign'></span> {% trans "Sale Price" %}
+        <a href='{% url "part-related" part.id %}'>
+            <span class='fas fa-random'></span>
+            {% trans "Related Parts" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-truck'></span> {% trans "Sales Orders" %}
+        <a href='{% url "part-attachments" part.id %}'>
+            <span class='fas fa-paperclip'></span>
+            {% trans "Attacments" %}
+        </a>
     </li>
     <li class='list-group-item'>
-        <span class='fas fa-vial'></span> {% trans "Tests" %}
-    </li>
-    <li class='list-group-item'>
-        <span class='fas fa-random'></span> {% trans "Related Parts" %}
-    </li>
-    <li class='list-group-item'>
-        <span class='fas fa-paperclip'></span> {% trans "Attacments" %}
-    </li>
-    <li class='list-group-item'>
-        <span class='fas fa-clipboard'></span> {% trans "Notes" %}
+        <a href='{% url "part-notes" part.id %}'>
+            <span class='fas fa-clipboard'></span>
+            {% trans "Notes" %}
+        </a>
     </li>
 </ul>

InvenTree/part/templates/part/part_base.html

@@ -200,7 +200,13 @@
 {% block js_ready %}
 {{ block.super }}
 
-    enableRightNavbar();
+    enableRightNavbar({
+        minWidth: '50px',
+    });
+
+    $('#part-menu-toggle').click(function() {
+        toggleMenuExpand();
+    })
 
     enableDragAndDrop(
         '#part-thumb',

InvenTree/templates/base.html

@@ -83,6 +83,12 @@ InvenTree
         {% endblock %}
     </div>
     
+    <div class='sidenav sidenav-right' id='sidenav-right'>
+        {% block menubar %}
+        <!-- Menubar code here -->
+        {% endblock %}
+    </div>
+    
     <div class="container container-fluid inventree-content" id='inventree-content'>
         {% block content %}
         <!-- Each view fills in here.. -->
@@ -90,11 +96,6 @@ InvenTree
         
     </div>
     
-    <div class='sidenav sidenav-right' id='sidenav-right'>
-        {% block menubar %}
-        <!-- Menubar code here -->
-        {% endblock %}
-    </div>
 
 {% block post_content %}
 {% endblock %}