From 15275d24b4734e5113f5e517f9d98bf3b5ba1a86 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Tue, 23 Feb 2021 18:01:42 +1100
Subject: [PATCH] Better CSS for side nav bars

---
 InvenTree/InvenTree/static/css/inventree.css  | 27 ++++++++++----
 .../static/script/inventree/sidenav.js        | 35 ++++++++++++++-----
 InvenTree/templates/base.html                 | 26 +++++++++-----
 3 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 34c101e86d..bfac59e182 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -589,15 +589,15 @@
 }
 
 .inventree-pre-content {
-    width: 100%;
-    clear: both;
+    width: auto;
 }
 
 .inventree-content {
-    padding-left: 5px;
-    padding-right: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
     padding-top: 5px;
-    width: auto;
+    width: 100%;
+    display: inline-block;
     transition: 0.1s;
 }
 
@@ -674,14 +674,27 @@ input[type="submit"] {
     background-color: #5e7d87;
 }
 
+.inventree-navs {
+    display: flex;
+}
+
 /* The side navigation menu */
-.sidenav {
+.menubar-left {
     height: 100%; /* 100% Full-height */
     width: 0px; /* 0 width - change this with JavaScript */
-    position: fixed; /* Stay in place */
+    position: relative; /* Stay in place */
     background-color: #fff; /* Black*/
     overflow-x: hidden; /* Disable horizontal scroll */
+    overflow: hidden;
     transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */
+    left: 0px;
+    top: 0px;
+    z-index: 100;
+    display: inline-block;
+}
+
+.menubar-right {
+    display: none;
 }
 
 .wrapper {
diff --git a/InvenTree/InvenTree/static/script/inventree/sidenav.js b/InvenTree/InvenTree/static/script/inventree/sidenav.js
index b2b4a84953..b5fcc70f47 100644
--- a/InvenTree/InvenTree/static/script/inventree/sidenav.js
+++ b/InvenTree/InvenTree/static/script/inventree/sidenav.js
@@ -67,20 +67,37 @@ function loadTree(url, tree, options={}) {
     });
 }
 
-function openSideNav() {
-    document.getElementById("sidenav").style.display = "block";
-    document.getElementById("sidenav").style.width = "250px";
-    document.getElementById("inventree-content").style.marginLeft = "270px";
+function openSideNav(navId) {
+//    document.getElementById("sidenav").style.display = "block";
+//    document.getElementById("sidenav").style.width = "250px";
+
+    if (!navId) {
+        navId = '#sidenav';
+    }
+
+    $(navId).animate({
+        width: '250px',
+        display: 'block'
+    }, 50);
 
     sessionStorage.setItem('inventree-sidenav-state', 'open');
 
-
 }
 
-function closeSideNav() {
-    document.getElementById("sidenav").style.display = "none";
-    document.getElementById("sidenav").style.width = "0";
-    document.getElementById("inventree-content").style.marginLeft = "0px";
+function closeSideNav(navId) {
+
+    if (!navId) {
+        navId = '#sidenav';
+    }
+
+    $(navId).animate({
+        width: 0,
+        display: 'none',
+    }, 50);
+
+    //document.getElementById("sidenav").style.display = "none";
+    //document.getElementById("sidenav").style.width = "0";
+    //document.getElementById("inventree-content").style.marginLeft = "0px";
 
     sessionStorage.setItem('inventree-sidenav-state', 'closed');
 }
diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html
index bb78e4a45d..fd0ad840f4 100644
--- a/InvenTree/templates/base.html
+++ b/InvenTree/templates/base.html
@@ -72,15 +72,25 @@ InvenTree
     {% endblock %}
 </div>
 
-<div class='sidenav' id='sidenav'>
-{% block sidenav %}
-{% endblock %}
-</div>
+<div class='inventree-navs'>
     
-<div class="container container-fluid inventree-content" id='inventree-content'>
-{% block content %}
-<!-- Each view fills in here.. -->
-{% endblock %}
+    <div class='menubar-left' id='sidenav'>
+        {% block sidenav %}
+        <!-- Sidenav code here -->
+        {% endblock %}
+    </div>
+    
+    <div class="container container-fluid inventree-content" id='inventree-content'>
+        {% block content %}
+        <!-- Each view fills in here.. -->
+        {% endblock %}
+        
+        <div class='menubar-right' id='sidenav-right'>
+            {% block menubar %}
+            <!-- Menubar code here -->
+            {% endblock %}
+        </div>
+    </div>
 
 {% block post_content %}
 {% endblock %}