From 507b60e54ee8cac3f6f79f78c6f9c8bccf54a099 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Mon, 14 Oct 2024 22:44:52 +0100
Subject: [PATCH] finish sidebar scss rewrite

---
 apps/home/static/home/scss/sidebar.scss | 103 ++++++++++----
 apps/home/templates/home/sidebar.html   | 174 ++++++++++++++----------
 2 files changed, 180 insertions(+), 97 deletions(-)

diff --git a/apps/home/static/home/scss/sidebar.scss b/apps/home/static/home/scss/sidebar.scss
index 7bf1156..acbf71f 100644
--- a/apps/home/static/home/scss/sidebar.scss
+++ b/apps/home/static/home/scss/sidebar.scss
@@ -17,7 +17,7 @@
     bottom: 1rem;
     right: 1rem;
 
-    @include media-breakpoint-down(xl) { display: block; }
+    @include media-breakpoint-down(lg) { display: block; }
 
 }
 
@@ -35,7 +35,7 @@
     z-index: 999;
 
     // Hide the sidebar 
-    @include media-breakpoint-down(xl) {
+    @include media-breakpoint-down(lg) {
         transform: translateX(-100%);
         position: fixed;
         left: 0;
@@ -45,7 +45,7 @@
 
     // Show the sidebar on smaller screens
     &.visible {
-        @include media-breakpoint-down(xl) { transform: translateX(0); }
+        @include media-breakpoint-down(lg) { transform: translateX(0); }
         @include media-breakpoint-down(sm) { width: 100vw; }
     }
 
@@ -87,7 +87,7 @@
 
             display: none;
 
-            @include media-breakpoint-down(xl) { display: block; }
+            @include media-breakpoint-down(lg) { display: block; }
 
         }
 
@@ -227,38 +227,85 @@
 
         display: flex;
         padding: 0 1rem 1rem 1rem;
+        
+    }
 
-        .sidebar-menu-btn {
+    .sidebar-btn {
+
+        display: flex;
+        align-items: center;
+        width: auto;
+        padding: 0.5rem;
+        border: none;
+        border-radius: $border-radius-sm;
+        color: var(--bs-body-color);
+        background-color: inherit;
+
+        &:hover, &:focus, &.active { background-color: var(--bs-body-bg); }
+
+        &.sidebar-mini-btn {
+
+            justify-content: center;
+            padding-left: 1rem;
+            padding-right: 1rem;
+
+        }
+
+        &.dropdown { padding: 0; }
+
+        >.sidebar-menu-btn {
+
+            text-align: start;
+            padding: 0.5rem;
+            border: 0;
+            width: 100%;
+            height: 100%;
+            color: inherit;
+            background-color: inherit;
+            border-radius: $border-radius-sm;
+
+        }
+
+    }
+
+    .sidebar-avatar {
+
+        border-radius: 50%;
+        margin-right: 0.5rem;
+        width: 32px;
+        height: 32px;
+
+    }
+
+    .theme-menu {
+
+        flex-direction: row;
+
+        &.show {
+            display: flex;
+            inset: auto auto 0 auto !important;
+            // transform: translateX(-50%) !important;
+        }
+
+        .theme-btn {
 
             display: flex;
+            justify-content: center;
             align-items: center;
-            width: auto;
-            padding: 0.5rem;
-            border: none;
-            border-radius: $border-radius-sm;
+            font-size: 1.25rem;
+            border: 0;
+            width: 50px;
+            height: 50px;
             color: var(--bs-body-color);
             background-color: inherit;
+            border-radius: $border-radius-sm;
 
-            &:hover, &.active { background-color: var(--bs-body-bg); }
+            &:hover, &:focus { background-color: var(--bs-tertiary-bg); }
 
-            &.sidebar-user-btn {
+            &.active {
 
-                flex-grow: 1;
-                min-width: 0;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;  
-
-            }
-
-            .sidebar-pin-btn { flex-grow: 0; }
-
-            .sidebar-avatar {
-
-                border-radius: 50%;
-                margin-right: 0.5rem;
-                width: 32px;
-                height: 32px;
+                color: var(--bs-white);
+                background-color: var(--bs-primary);
 
             }
 
@@ -266,7 +313,7 @@
 
     }
 
-    .sidebar-menu {
+    .dropdown-menu {
 
         border: none;
         border-radius: var(--bs-border-radius-sm);
diff --git a/apps/home/templates/home/sidebar.html b/apps/home/templates/home/sidebar.html
index aeb11cd..e7f08f7 100644
--- a/apps/home/templates/home/sidebar.html
+++ b/apps/home/templates/home/sidebar.html
@@ -15,7 +15,7 @@
                 <span>Failed to fetch results - you are being rate limited by Discord.</span>
                 <i class="bi bi-question-circle-fill" data-bs-toggle="tooltip" data-bs-title="Discord rate-limits when requests are made in rapid succession."></i>
             </p>
-            <button type="button" class="sidebar-menu-btn sidebar-retry-btn w-100 rounded-1">
+            <button type="button" class="sidebar-btn sidebar-retry-btn w-100 rounded-1">
                 <i class="bi bi-arrow-clockwise me-2"></i>
                 <span>Retry</span>
             </button>
@@ -35,77 +35,113 @@
 
     </ul>
     <hr class="sidebar-divider">
-    <div class="sidebar-footer dropdown">
-        <button type="button" class="sidebar-menu-btn sidebar-user-btn dropdown-toggle flex-grow-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
-            <img src="{{ request.user.avatar_url }}" alt="user icon" class="sidebar-avatar">
-            <strong class="text-truncate">{{ request.user.global_name }}</strong>
-        </button>
-        <button type="button" class="sidebar-pin-btn sidebar-menu-btn justify-content-center d-flex d-lg-none px-3">
-            <i class="bi bi-pin-angle"></i>
-        </button>
-        <ul class="sidebar-menu dropdown-menu">
-            <li class="dropend">
-                <button type="button" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
-                    <i class="bi bi-sun me-2"></i>
-                    <span>Theme</span>
-                </button>
-                <ul class="sidebar-menu dropdown-menu">
-                    <li>
-                        <input type="radio" name="themeToggle" id="themeToggleLight" class="btn-check" value="light" autocomplete="off">
-                        <label for="themeToggleLight" class="dropdown-item" role="button">
-                            <i class="bi bi-sun me-2"></i>
-                            <span>Light</span>
-                        </label>
-                    </li>
-                    <li>
-                        <input type="radio" name="themeToggle" id="themeToggleDark" class="btn-check" value="dark" autocomplete="off">
-                        <label for="themeToggleDark" class="dropdown-item" role="button">
-                            <i class="bi bi-moon-stars me-2"></i>
-                            <span>Dark</span>
-                        </label>
-                    </li>
-                    <li>
-                        <input type="radio" name="themeToggle" id="themeToggleAuto" class="btn-check" value="auto" autocomplete="off">
-                        <label for="themeToggleAuto" class="dropdown-item" role="button">
-                            <i class="bi bi-circle-half me-2"></i>
-                            <span>Auto</span>
-                        </label>
-                    </li>
-                </ul>
-            </li>
-            <li>
-                <a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="dropdown-item" target="_blank">
-                    <i class="bi bi-git me-2"></i>
-                    <span>Source Code</span>
-                </a>
-            </li>
-            <li>
-                <a href="https://gitea.cor.bz/corbz/PYRSS-Website/wiki" class="dropdown-item" target="_blank">
-                    <i class="bi bi-question-lg me-2"></i>
-                    <span>Help</span>
-                </a>
-            </li>
-            <li>
-                <hr class="dropdown-divider">
-            </li>
-            {% if request.user.is_superuser %}
+    <div class="sidebar-footer">
+        <div class="sidebar-btn text-start flex-grow-1 dropdown p-0">
+            <button type="button" class="sidebar-menu-btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+                <img src="{{ request.user.avatar_url }}" alt="user icon" class="sidebar-avatar">
+                <strong class="text-truncate">{{ request.user.global_name }}</strong>
+            </button>
+            <ul class="dropdown-menu">
+                <li class="dropend">
+                    <button type="button" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+                        <i class="bi bi-sun me-2"></i>
+                        <span>Theme</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <!-- <li>
+                            <input type="radio" name="themeToggle" id="themeToggleLight" class="btn-check" value="light" autocomplete="off">
+                            <label for="themeToggleLight" class="dropdown-item" role="button">
+                                <i class="bi bi-sun me-2"></i>
+                                <span>Light</span>
+                            </label>
+                        </li>
+                        <li>
+                            <input type="radio" name="themeToggle" id="themeToggleDark" class="btn-check" value="dark" autocomplete="off">
+                            <label for="themeToggleDark" class="dropdown-item" role="button">
+                                <i class="bi bi-moon-stars me-2"></i>
+                                <span>Dark</span>
+                            </label>
+                        </li>
+                        <li>
+                            <input type="radio" name="themeToggle" id="themeToggleAuto" class="btn-check" value="auto" autocomplete="off">
+                            <label for="themeToggleAuto" class="dropdown-item" role="button">
+                                <i class="bi bi-circle-half me-2"></i>
+                                <span>Auto</span>
+                            </label>
+                        </li> -->
+                    </ul>
+                </li>
                 <li>
-                    <a href="/admin/" class="dropdown-item" target="_blank">
-                        <i class="bi bi-person-check-fill me-2"></i>
-                        <span>Admin</span>
+                    <a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="dropdown-item" target="_blank">
+                        <i class="bi bi-git me-2"></i>
+                        <span>Source Code</span>
                     </a>
                 </li>
-            {% endif %}
-            <li>
-                <form action="/logout/" method="post" class="m-0">
-                    {% csrf_token %}
-                    <button type="submit" class="dropdown-item">
-                        <i class="bi bi-arrow-left me-2"></i>
-                        <span>Logout</span>
-                    </button>
-                </form>
-            </li>
-        </ul>
+                <li>
+                    <a href="https://gitea.cor.bz/corbz/PYRSS-Website/wiki" class="dropdown-item" target="_blank">
+                        <i class="bi bi-question-lg me-2"></i>
+                        <span>Help</span>
+                    </a>
+                </li>
+                <li>
+                    <hr class="dropdown-divider">
+                </li>
+                {% if request.user.is_superuser %}
+                    <li>
+                        <a href="/admin/" class="dropdown-item" target="_blank">
+                            <i class="bi bi-person-check-fill me-2"></i>
+                            <span>Admin</span>
+                        </a>
+                    </li>
+                {% endif %}
+                <li>
+                    <form action="/logout/" method="post" class="m-0">
+                        {% csrf_token %}
+                        <button type="submit" class="dropdown-item">
+                            <i class="bi bi-arrow-left me-2"></i>
+                            <span>Logout</span>
+                        </button>
+                    </form>
+                </li>
+            </ul>
+        </div>
+        <div class="sidebar-btn sidebar-mini-btn dropdown">
+            <button type="button" class="js-themeMenuBtn sidebar-menu-btn px-3" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+                <i class="bi bi-sun"></i>
+            </button>
+            <ul class="theme-menu dropdown-menu dropdown-menu-center">
+                <li>
+                    <input type="radio" name="themeToggle" id="themeToggleLight" class="btn-check" value="light" autocomplete="off">
+                    <label for="themeToggleLight" class="theme-btn" role="button" data-bs-toggle="tooltip" data-bs-title="Light">
+                        <i class="bi bi-sun"></i>
+                    </label>
+                </li>
+                <li>
+                    <input type="radio" name="themeToggle" id="themeToggleDark" class="btn-check" value="dark" autocomplete="off">
+                    <label for="themeToggleDark" class="theme-btn" role="button" data-bs-toggle="tooltip" data-bs-title="Dark">
+                        <i class="bi bi-moon-stars"></i>
+                    </label>
+                </li>
+                <li>
+                    <input type="radio" name="themeToggle" id="themeToggleAuto" class="btn-check" value="auto" autocomplete="off">
+                    <label for="themeToggleAuto" class="theme-btn" role="button" data-bs-toggle="tooltip" data-bs-title="Auto">
+                        <i class="bi bi-circle-half"></i>
+                    </label>
+                </li>
+                <!-- <button type="button" class="theme-btn">
+                    <i class="bi bi-sun"></i>
+                </button>
+                <button type="button" class="theme-btn">
+                    <i class="bi bi-moon-stars"></i>
+                </button>
+                <button type="button" class="theme-btn">
+                    <i class="bi bi-circle-half"></i>
+                </button> -->
+            </ul>
+        </div>
+        <button type="button" class="js-pinSidebar sidebar-btn sidebar-mini-btn d-flex d-lg-none">
+            <i class="bi bi-pin-angle"></i>
+        </button>
     </div>
 </div>