Refactor sidebar for "settings" window

InvenTree/templates/InvenTree/settings/navbar.html

@@ -1,139 +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'>
-        <span class='fas fa-user'></span> <strong>{% trans "User Settings" %}</strong>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Account" %}'>
-        <a href='#' class='nav-toggle' id='select-account'>
-            <span class='fas fa-user-cog'></span> {% trans "Account" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Home Page" %}'>
-        <a href='#' class='nav-toggle' id='select-user-home'>
-            <span class='fas fa-home'></span> {% trans "Home Page" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Search" %}'>
-        <a href='#' class='nav-toggle' id='select-user-search'>
-            <span class='fas fa-search'></span> {% trans "Search" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Labels" %}'>
-        <a href='#' class='nav-toggle' id='select-user-labels'>
-            <span class='fas fa-tag'></span> {% trans "Labels" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Reports" %}'>
-        <a href='#' class='nav-toggle' id='select-user-reports'>
-            <span class='fas fa-file-pdf'></span> {% trans "Reports" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Display" %}'>
-        <a href='#' class='nav-toggle' id='select-user-display'>
-            <span class='fas fa-desktop'></span> {% trans "Display" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Forms" %}'>
-        <a href='#' class='nav-toggle' id='select-user-forms'>
-            <span class='fas fa-table'></span>{% trans "Forms" %}
-        </a>
-    </li>
-
-    <!--
-        <li class='list-group-item' title='{% trans "Settings" %}'>
-            <a href='#' class='nav-toggle' id='select-user-settings'>
-                <span class='fas fa-cog'></span> {% trans "Settings" %}
-            </a>
-        </li>
-    -->
-
-    {% if user.is_staff %}
-
-    <li class='list-group-item'>
-        <span class='fas fa-cogs'></span> <strong>{% trans "Global Settings" %}</strong>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Server" %}'>
-        <a href='#' class='nav-toggle' id='select-server'>
-            <span class='fas fa-server'></span> {% trans "Server" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Login" %}'>
-        <a href='#' class='nav-toggle' id='select-login'>
-            <span class='fas fa-fingerprint'></span> {% trans "Login" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Barcodes" %}'>
-        <a href='#' class='nav-toggle' id='select-barcodes'>
-            <span class='fas fa-qrcode'></span> {% trans "Barcodes" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Currencies" %}'>
-        <a href='#' class='nav-toggle' id='select-currencies'>
-            <span class='fas fa-dollar-sign'></span> {% trans "Currencies" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Reporting" %}'>
-        <a href='#' class='nav-toggle' id='select-reporting'>
-            <span class='fas fa-file-pdf'></span> {% trans "Reporting" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Parts" %}'>
-        <a href='#' class='nav-toggle' id='select-parts'>
-            <span class='fas fa-shapes'></span> {% trans "Parts" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Categories" %}'>
-        <a href='#' class='nav-toggle' id='select-category'>
-            <span class='fas fa-shapes'></span> {% trans "Categories" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Stock" %}'>
-        <a href='#' class='nav-toggle' id='select-stock'>
-            <span class='fas fa-boxes'></span> {% trans "Stock" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Build Orders" %}'>
-        <a href='#' class='nav-toggle' id='select-build-order'>
-            <span class='fas fa-tools'></span> {% trans "Build Orders" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Purchase Orders" %}'>
-        <a href='#' class='nav-toggle' id='select-purchase-order'>
-            <span class='fas fa-shopping-cart'></span> {% trans "Purchase Orders" %}
-        </a>
-    </li>
-
-    <li class='list-group-item' title='{% trans "Sales Orders" %}'>
-        <a href='#' class='nav-toggle' id='select-sales-order'>
-            <span class='fas fa-truck'></span> {% trans "Sales Orders" %}
-        </a>
-    </li>
-
-    {% endif %}
-
-</ul>

InvenTree/templates/InvenTree/settings/settings.html

@@ -8,8 +8,8 @@
 {% inventree_title %} | {% trans "Settings" %}
 {% endblock %}
 
-{% block menubar %}
+{% block sidebar %}
-{% include "InvenTree/settings/navbar.html" %}
+{% include "InvenTree/settings/sidebar.html" %}
 {% endblock %}
 
 {% block content %}
@@ -21,7 +21,6 @@
 {% include "InvenTree/settings/user_labels.html" %}
 {% include "InvenTree/settings/user_reports.html" %}
 {% include "InvenTree/settings/user_display.html" %}
-{% include "InvenTree/settings/user_forms.html" %}
 
 {% if user.is_staff %}
 
@@ -320,15 +319,6 @@ $("#import-part").click(function() {
     launchModalForm("{% url 'api-part-import' %}?reset", {});
 });
 
-
+enableSidebar('settings');
-enableNavbar({
-    label: 'settings',
-    toggleId: '#item-menu-toggle',
-});
-
-attachNavCallbacks({
-    name: 'settings',
-    default: 'account'
-});
 
 {% endblock %}

InvenTree/templates/InvenTree/settings/sidebar.html

@@ -0,0 +1,30 @@
+{% load i18n %}
+{% load static %}
+{% load inventree_extras %}
+
+{% include "sidebar_header.html" with text="User Settings" icon='fa-user' %}
+
+{% include "sidebar_item.html" with label='account' text="Account Settings" icon="fa-cog" %}
+{% include "sidebar_item.html" with label='user-display' text="Display Settings" icon="fa-desktop" %}
+{% include "sidebar_item.html" with label='user-home' text="Home Page" icon="fa-home" %}
+{% include "sidebar_item.html" with label='user-search' text="Search Settings" icon="fa-search" %}
+{% include "sidebar_item.html" with label='user-labels' text="Label Printing" icon="fa-tag" %}
+{% include "sidebar_item.html" with label='user-reports' text="Reporting" icon="fa-file-pdf" %}
+
+{% if user.is_staff %}
+
+{% include "sidebar_header.html" with text="Global Settings" icon='fa-cogs' %}
+
+{% include "sidebar_item.html" with label='server' text="Server Configuration" icon="fa-server" %}
+{% include "sidebar_item.html" with label='login' text="Login Settings" icon="fa-fingerprint" %}
+{% include "sidebar_item.html" with label='barcodes' text="Barcode Support" icon="fa-qrcode" %}
+{% include "sidebar_item.html" with label='currencies' text="Currencies" icon="fa-dollar-sign" %}
+{% include "sidebar_item.html" with label='reporting' text="Reporting" icon="fa-file-pdf" %}
+{% include "sidebar_item.html" with label='parts' text="Parts" icon="fa-shapes" %}
+{% include "sidebar_item.html" with label='category' text="Categories" icon="fa-sitemap" %}
+{% include "sidebar_item.html" with label='stock' text="Stock" icon="fa-boxes" %}
+{% include "sidebar_item.html" with label='build-order' text="Build Orders" icon="fa-tools" %}
+{% include "sidebar_item.html" with label='purchase-order' text="Purchase Orders" icon="fa-shopping-cart" %}
+{% include "sidebar_item.html" with label='sales-order' text="Sales Orders" icon="fa-truck" %}
+
+{% endif %}

InvenTree/templates/InvenTree/settings/user_display.html

@@ -15,6 +15,8 @@
     <table class='table table-striped table-condensed'>
         <tbody>
             {% include "InvenTree/settings/setting.html" with key="STICKY_HEADER" icon="fa-bars" user_setting=True %}
+            {% include "InvenTree/settings/setting.html" with key="FORMS_CLOSE_USING_ESCAPE" icon="fa-window-close" user_setting=True %}
+            {% include "InvenTree/settings/setting.html" with key="PART_SHOW_QUANTITY_IN_FORMS" icon="fa-hashtag" user_setting=True %}
         </tbody>
     </table>
 </div>

InvenTree/templates/InvenTree/settings/user_forms.html

@@ -1,23 +0,0 @@
-{% extends "panel.html" %}
-
-{% load i18n %}
-{% load inventree_extras %}
-
-{% block label %}user-forms{% endblock %}
-
-{% block heading %}
-{% trans "Form Settings" %}
-{% endblock %}
-
-{% block content %}
-
-<div class='row'>
-    <table class='table table-striped table-condensed'>
-        <tbody>
-            {% include "InvenTree/settings/setting.html" with key="FORMS_CLOSE_USING_ESCAPE" icon="fa-window-close" user_setting=True %}
-            {% include "InvenTree/settings/setting.html" with key="PART_SHOW_QUANTITY_IN_FORMS" icon="fa-hashtag" user_setting=True %}
-        </tbody>
-    </table>
-</div>
-
-{% endblock %}

InvenTree/templates/sidebar_header.html

@@ -0,0 +1,6 @@
+{% load i18n %}
+<span title='{% trans text %}' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar">
+    <h5>
+        <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>
+    </h5>
+</span>