From 2e0943757b33ba746b82e2f5f7c2201362cffcde Mon Sep 17 00:00:00 2001
From: Sainan <sainan@calamity.gg>
Date: Fri, 31 May 2024 16:50:50 +0200
Subject: [PATCH] improve: sidebar

---
 static/webui/index.html | 32 ++++++++++++++++++++++++--------
 static/webui/script.js  |  6 ++++++
 static/webui/style.css  |  5 ++---
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/static/webui/index.html b/static/webui/index.html
index 85e10f78..72cb6ebe 100644
--- a/static/webui/index.html
+++ b/static/webui/index.html
@@ -45,14 +45,30 @@
                     ></button>
                 </div>
                 <div class="offcanvas-body">
-                    <ul>
-                        <li>
-                            <a href="/webui/inventory" data-bs-dismiss="offcanvas" data-bs-target="#sidebar"
-                                >Inventory</a
-                            >
-                        </li>
-                        <li><a href="/webui/mods" data-bs-dismiss="offcanvas" data-bs-target="#sidebar">Mods</a></li>
-                    </ul>
+                    <div class="navbar p-0">
+                        <ul class="navbar-nav justify-content-end">
+                            <li class="nav-item">
+                                <a
+                                    class="nav-link"
+                                    href="/webui/inventory"
+                                    data-bs-dismiss="offcanvas"
+                                    data-bs-target="#sidebar"
+                                >
+                                    Inventory
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a
+                                    class="nav-link"
+                                    href="/webui/mods"
+                                    data-bs-dismiss="offcanvas"
+                                    data-bs-target="#sidebar"
+                                >
+                                    Mods
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
             <div>
diff --git a/static/webui/script.js b/static/webui/script.js
index b272dd0b..6fa3bbee 100644
--- a/static/webui/script.js
+++ b/static/webui/script.js
@@ -76,6 +76,12 @@ single.on("route_load", function (event) {
     } else {
         $("body").removeClass("logged-in");
     }
+
+    $(".nav-link").removeClass("active");
+    const navLink = document.querySelector(".nav-link[href='" + event.route.paths[0] + "']");
+    if (navLink) {
+        navLink.classList.add("active");
+    }
 });
 
 window.itemListPromise = new Promise(resolve => {
diff --git a/static/webui/style.css b/static/webui/style.css
index 109802b4..119d4fd2 100644
--- a/static/webui/style.css
+++ b/static/webui/style.css
@@ -1,14 +1,13 @@
 @media (min-width: 992px) {
     body.logged-in #main-view {
-        display: grid;
-        grid-template-columns: 1fr 8fr;
-        gap: 1.5rem;
+        display: flex;
     }
 
     body.logged-in #sidebar {
         position: sticky;
         top: 5rem;
         height: 100px;
+        margin-right: 3rem;
     }
 
     body:not(.logged-in) #sidebar {