diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index b383d5bb58..f5df86118c 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -719,8 +719,6 @@ input[type="submit"] { } .sidenav-right { - min-width: 45px; - width: 0px; left: 0px; top: 70px; position: sticky; diff --git a/InvenTree/InvenTree/static/script/inventree/sidenav.js b/InvenTree/InvenTree/static/script/inventree/sidenav.js index 4be2ddef2f..376380e09a 100644 --- a/InvenTree/InvenTree/static/script/inventree/sidenav.js +++ b/InvenTree/InvenTree/static/script/inventree/sidenav.js @@ -140,7 +140,9 @@ function initSideNav(navId) { } } - +/** + * Handle left-hand icon menubar display + */ function enableNavbar(options) { var resize = true; @@ -149,75 +151,86 @@ function enableNavbar(options) { resize = options.resize; } - console.log('enable navbar: ' + options.navId); + var label = options.label || 'nav'; - // 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); + 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); + + sessionStorage.setItem(stateLabel, 'closed'); + } else { + sessionStorage.setItem(widthLabel, `${width}px`); + sessionStorage.setItem(stateLabel, 'open'); + } + } + }); + } + + var state = sessionStorage.getItem(stateLabel); + var width = sessionStorage.getItem(widthLabel) || '250px'; + + if (state && state == 'open') { + + $(navId).animate({ + width: width + }, 100); + } + + }); + + // Register callback for 'toggle' button + if (toggleId) { + + $(toggleId).click(function() { + + var state = sessionStorage.getItem(stateLabel) || 'closed'; + var width = sessionStorage.getItem(widthLabel) || '250px'; + + if (state == 'open') { + $(navId).animate({ + width: '45px', + minWidth: '45px', + }, 50); + + sessionStorage.setItem(stateLabel, 'closed'); + + } else { + + $(navId).animate({ + 'width': width + }, 50); + + sessionStorage.setItem(stateLabel, 'open'); } }); } - - // 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'); - } } \ No newline at end of file diff --git a/InvenTree/build/templates/build/build_base.html b/InvenTree/build/templates/build/build_base.html index af11bbba97..83cef5bd44 100644 --- a/InvenTree/build/templates/build/build_base.html +++ b/InvenTree/build/templates/build/build_base.html @@ -148,9 +148,10 @@ src="{% static 'img/blank_image.png' %}" {% block js_ready %} -enableRightNavbar({ - minWidth: '50px' -}); + enableNavbar({ + label: 'build', + toggleId: '#build-menu-toggle' + }); $("#build-edit").click(function () { launchModalForm("{% url 'build-edit' build.id %}", diff --git a/InvenTree/company/templates/company/company_base.html b/InvenTree/company/templates/company/company_base.html index b1936a7d0d..3035eeaa15 100644 --- a/InvenTree/company/templates/company/company_base.html +++ b/InvenTree/company/templates/company/company_base.html @@ -92,8 +92,9 @@ InvenTree | {% trans "Company" %} - {{ company.name }} {% block js_ready %} {{ block.super }} - enableRightNavbar({ - minWidth: '50px' + enableNavbar({ + label: 'company', + toggleId: '#company-menu-toggle' }); $('#company-edit').click(function() { diff --git a/InvenTree/company/templates/company/part_navbar.html b/InvenTree/company/templates/company/part_navbar.html index f1a3eb7bdf..4236e7b734 100644 --- a/InvenTree/company/templates/company/part_navbar.html +++ b/InvenTree/company/templates/company/part_navbar.html @@ -3,7 +3,7 @@