From 443fb58d17d1800d584d28b64511d22ae8529b6b Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Wed, 2 Oct 2024 17:44:19 +0100
Subject: [PATCH] navbar cleanup

---
 apps/home/templates/home/index.html |  2 +-
 static/css/base.css                 | 31 +++++++++++++++++++++++++++++
 templates/includes/navbar.html      | 28 ++++++++++++++------------
 3 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/apps/home/templates/home/index.html b/apps/home/templates/home/index.html
index a1d7d02..0c1e29e 100644
--- a/apps/home/templates/home/index.html
+++ b/apps/home/templates/home/index.html
@@ -127,7 +127,7 @@
                         </li>
                         <li class="nav-item ms-auto">
                             <div class="dropdown">
-                                <button class="nav-link rounded-1 dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                                <button class="nav-link rounded-1 dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                                     <i class="bi bi-gear"></i>
                                 </button>
                                 <ul class="dropdown-menu">
diff --git a/static/css/base.css b/static/css/base.css
index 035073c..51525c4 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -75,3 +75,34 @@
     .w-xxl-100 { width: 100%; }
     .w-xxl-auto { width: auto; }
 }
+
+
+/* Navbar */
+
+#navCollapse .navbar-nav {
+    height: auto;
+    padding-right: none;
+}
+
+@media (min-width: 992px) {
+    #navCollapse .navbar-nav {
+        height: 100%;
+    }
+}
+
+.navbar-btn {
+    text-align: start;
+    border: none;
+    width: 100%;
+    height: 100%;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    border-radius: var(--bs-border-radius-sm);
+
+    color: var(--bs-body-color);
+    background-color: var(--bs-secondary-bg);
+}
+
+.navbar-btn:hover {
+    background-color: var(--bs-tertiary-bg);
+}
diff --git a/templates/includes/navbar.html b/templates/includes/navbar.html
index 5623118..8e23b92 100644
--- a/templates/includes/navbar.html
+++ b/templates/includes/navbar.html
@@ -9,46 +9,48 @@
             <button type="button" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navCollapse" aria-controls="navCollapse" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            <div id="navCollapse" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="navCollapseLabel">
+            <div id="navCollapse" class="offcanvas offcanvas-end bg-body-secondary" tabindex="-1" aria-labelledby="navCollapseLabel">
                 <div class="offcanvas-header">
                     <h5 id="navCollapseLabel" class="offcanvas-title">PYRSS</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                 </div>
                 <div class="offcanvas-body">
-                    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 align-items-center">
-                        <li class="nav-item w-lg-100 py-lg-0 py-3 px-lg-0 px-1">
-                            <button type="button" id="themeToggle" class="me-0 btn btn-link p-0 text-body text-decoration-none">
+                    <ul class="navbar-nav justify-content-end align-items-stretch flex-grow-1">
+                        <li class="nav-item w-lg-100">
+                            <button type="button" id="themeToggle" class="navbar-btn">
                                 <i class="bi bi-sun"></i>
                                 <span class="d-lg-none ms-2 text-body-secondary">Change Theme</span>
                             </button>
                         </li>
+
                         {% if request.user.is_authenticated %}
                         <li class="nav-item w-lg-100">
                             <div class="dropdown">
-                                <button type="button" class="nav-link dropdown-toggle ms-lg-3" data-bs-toggle="dropdown">
+                                <button type="button" class="dropdown-toggle navbar-btn" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                                     <img src="{{ request.user.avatar_url }}" alt="User Icon" width="30" class="rounded-circle me-2">
                                     <span>{{ request.user.global_name }}</span>
                                 </button>
-                                <ul class="dropdown-menu dropdown-menu-end">
-                                    <li><h6 class="dropdown-header">@{{ request.user.username }}</h6></li>
+                                <ul class="dropdown-menu dropdown-menu-end rounded-1">
                                     <li>
-                                        <a href="https://gitea.cor.bz/corbz/PYRSS-Website/src/branch/master/README.md" class="dropdown-item" target="_blank">
-                                            <i class="bi bi-question"></i><span class="ms-2">Help</span>
-                                        </a>
+                                        <h6 class="dropdown-header d-flex justify-content-between">
+                                            <span>@{{ request.user.username }}</span>
+                                            <div class="vr mx-3"></div>
+                                            <span>{{ request.user.id }}</span>
+                                        </h6>
                                     </li>
+                                    <li><hr class="dropdown-divider"></li>
                                     <li>
                                         {% comment %}<!-- Logout only accepts POST requests -->{% endcomment %}
                                         <form action="/logout/" method="post" class="m-0">
                                             {% csrf_token %}
-                                            <button type="submit" class="dropdown-item">
+                                            <button type="submit" class="dropdown-item py-2">
                                                 <i class="bi bi-arrow-left-short"></i><span class="ms-2">Logout</span>
                                             </button>
                                         </form>
                                     </li>
                                     {% if request.user.is_superuser %}
-                                    <li><hr class="dropdown-divider"></li>
                                     <li>
-                                        <a href="/admin/" class="dropdown-item" target="_blank">
+                                        <a href="/admin/" class="dropdown-item py-2" target="_blank">
                                             <i class="bi bi-person-check-fill"></i><span class="ms-2">Admin Interface</span>
                                         </a>
                                     </li>