From 1d6e7c68848d5ca0904bf336b7e76081fc84cd96 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Mon, 14 Oct 2024 11:13:38 +0100
Subject: [PATCH] tidy up sidebar scss

---
 apps/home/static/home/scss/index.scss   |   1 +
 apps/home/static/home/scss/sidebar.scss | 602 ++++++++++--------------
 2 files changed, 240 insertions(+), 363 deletions(-)

diff --git a/apps/home/static/home/scss/index.scss b/apps/home/static/home/scss/index.scss
index d7932b6..50da955 100644
--- a/apps/home/static/home/scss/index.scss
+++ b/apps/home/static/home/scss/index.scss
@@ -1,3 +1,4 @@
+@import "../../../../../static/bootstrap-5.3.3/scss/bootstrap.scss";
 @import "./sidebar.scss";
 
 @keyframes bump {
diff --git a/apps/home/static/home/scss/sidebar.scss b/apps/home/static/home/scss/sidebar.scss
index 41f0849..7bf1156 100644
--- a/apps/home/static/home/scss/sidebar.scss
+++ b/apps/home/static/home/scss/sidebar.scss
@@ -1,106 +1,3 @@
-
-// .sidebar-backdrop {
-//     position: fixed;
-//     top: 0;
-//     left: 0;
-//     width: 100%;
-//     height: 100%;
-//     backdrop-filter: blur(10px);
-//     background-color: rgba(var(--bs-secondary-rgb), 0.50);
-//     z-index: 998;
-//     display: none;  /* Must start as hidden! */
-// }
-
-// .reveal-sidebar-btn {
-//     z-index: 998;
-//     display: none;
-//     position: fixed;
-//     bottom: 1rem;
-//     right: 1rem;
-
-//     // @include media-breakpoint-down(xl) {
-//     //     display: block;
-//     // }
-
-// }
-
-// .sidebar {
-
-//     display: flex;
-//     flex-direction: column;
-//     flex-shrink: 0;
-//     width: 300px;
-//     color: var(--bs-body-color);
-//     background-color: var(--bs-secondary-bg-subtle);
-//     transition: transform 0.3s ease-in-out;
-//     z-index: 999;
-
-//     .sidebar-divider {
-
-//     }
-
-//     .sidebar-header {
-
-//         .sidebar-header-link {
-
-//         }
-
-//         .sidebar-logo {
-
-//         }
-
-//         .sidebar-title {
-
-//         }
-
-//     }
-
-//     .sidebar-content {
-
-//         .sidebar-placeholder {
-
-//             .sidebar-placeholder-image {
-
-//             }
-
-//             .sidebar-placeholder-data {
-
-//                 >.placeholder {
-
-//                 }
-
-//             }
-
-//         }
-
-//         .sidebar-item {
-
-//             &:not(:disabled):hover,
-//             &:not(:disabled):focus,
-//             &.active {
-
-//             }
-
-//             &.spot::before {
-
-//                 &:not(:disabled):hover,
-//                 &:not(:disabled):focus,
-//                 &.active {
-
-//                 }
-    
-//             }
-
-//         }
-
-//     }
-
-
-// }
-
-
-/* Backdrop */
-
 .sidebar-backdrop {
     position: fixed;
     top: 0;
@@ -113,28 +10,21 @@
     display: none;  /* Must start as hidden! */
 }
 
-
-/* Show Sidebar Button */
-
 .reveal-sidebar-btn {
     z-index: 998;
     display: none;
     position: fixed;
     bottom: 1rem;
     right: 1rem;
+
+    @include media-breakpoint-down(xl) { display: block; }
+
 }
 
-
-/* Hide Sidebar Button */   
-
-.sidebar .btn-close {
-    display: none;
-}
-
-
-/* Sidebar */
+.server-rate-limit { display: none; }
 
 .sidebar {
+
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
@@ -143,262 +33,248 @@
     background-color: var(--bs-secondary-bg-subtle);
     transition: transform 0.3s ease-in-out;
     z-index: 999;
-}
 
-@media (max-width: 992px) {
-    .reveal-sidebar-btn {
-        display: block;
-    }
-
-    .sidebar .btn-close {
-        display: block;
-    }
-
-    .sidebar {
+    // Hide the sidebar 
+    @include media-breakpoint-down(xl) {
+        transform: translateX(-100%);
         position: fixed;
         left: 0;
         top: 0;
         bottom: 0;
-        transform: translateX(-100%);
     }
 
-    .sidebar.visible {
-        transform: translateX(0);
+    // Show the sidebar on smaller screens
+    &.visible {
+        @include media-breakpoint-down(xl) { transform: translateX(0); }
+        @include media-breakpoint-down(sm) { width: 100vw; }
     }
-}
 
-@media (max-width: 360px) {
-    .sidebar.visible {
-        width: 100vw;
+    .sidebar-divider { margin: 1rem; }
+
+    .sidebar-header {
+
+        display: flex;
+        align-items: center;
+        padding: 1rem 1rem 0 1rem;
+        text-decoration: none;
+        color: inherit;
+
+        .sidebar-header-link {
+
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            color: inherit;
+
+            .sidebar-logo {
+    
+                width: 45px;
+                margin-right: 0.5rem;
+    
+            }
+    
+            .sidebar-title {
+    
+                font-size: 2rem;
+                font-weight: bold;
+    
+            }
+
+        }
+
+        // Hide on larger screens, show on smaller screens
+        .btn-close {
+
+            display: none;
+
+            @include media-breakpoint-down(xl) { display: block; }
+
+        }
+
     }
-}
-
-
-/* Divider */
-
-.sidebar .sidebar-divider {
-    margin: 1rem;
-}
-
-
-/* Header */
-
-.sidebar .sidebar-header {
-    display: flex;
-    align-items: center;
-    padding: 1rem 1rem 0 1rem;
-    text-decoration: none;
-    color: inherit;
-}
-
-.sidebar .sidebar-header .sidebar-header-link {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: inherit;
-}
-
-.sidebar .sidebar-header .sidebar-logo {
-    width: 45px;
-    margin-right: 0.5rem;
-}
-
-.sidebar .sidebar-header .sidebar-title {
-    font-size: 2rem;
-    font-weight: bold;
-}
-
-
-/* Content */
-
-.sidebar .sidebar-content {
-    margin-bottom: auto;
-    padding: 0 1rem;
-    list-style: none;
-}
-
-
-/* Content - Placeholder */
-
-.sidebar .sidebar-content .sidebar-placeholder {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 0.5rem;
-    border: none;
-}
-
-.sidebar .sidebar-content .sidebar-placeholder .sidebar-placeholder-image {
-    flex-shrink: 0;
-    width: 50px;
-    height: 50px;
-    margin-right: 0.75rem;
-    border-radius: var(--bs-border-radius-sm);
-}
-
-.sidebar .sidebar-content .sidebar-placeholder .sidebar-placeholder-data {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    overflow: hidden;
-}
-
-.sidebar .sidebar-content .sidebar-placeholder .sidebar-placeholder-data > .placeholder {
-    border-radius: var(--bs-border-radius-sm);
-}
-
-
-/* Content (Servers) */
-
-.sidebar .sidebar-content .sidebar-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 0.5rem;
-    border: none;
-    border-radius: var(--bs-border-radius-sm);
-    background-color: inherit;
-}
-
-.sidebar .sidebar-content .sidebar-item:not(:disabled):hover,
-.sidebar .sidebar-content .sidebar-item:not(:disabled):focus,
-.sidebar .sidebar-content .sidebar-item.active {
-    background-color: var(--bs-body-bg);
-}
-
-/* Content Alerts */
-
-.sidebar .sidebar-content .sidebar-item.spot::before {
-    content: "";
-    transition: 0.1s ease;
-    transform: translate(-100%, -50%);
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    background-color: var(--bs-body-bg);
-}
-
-.sidebar .sidebar-content .sidebar-item.spot:not(:disabled):hover::before,
-.sidebar .sidebar-content .sidebar-item.spot:not(:disabled):focus::before,
-.sidebar .sidebar-content .sidebar-item.spot.active::before {
-    transition: 0.15s ease;
-    width: 0.25rem;
-    height: 60px;
-    border-radius: 0.25rem 0 0 0.25rem;
-}
-
-/* Content Alerts Colours */
-
-.sidebar .sidebar-content .sidebar-item.spot.spot-primary::before {
-    background-color: var(--bs-primary);
-}
-.sidebar .sidebar-content .sidebar-item.spot.spot-secondary::before {
-    background-color: var(--bs-secondary);
-}
-.sidebar .sidebar-content .sidebar-item.spot.spot-success::before {
-    background-color: var(--bs-success);
-}
-.sidebar .sidebar-content .sidebar-item.spot.spot-danger::before {
-    background-color: var(--bs-danger);
-}
-.sidebar .sidebar-content .sidebar-item.spot.spot-warning::before {
-    background-color: var(--bs-warning);
-}
-.sidebar .sidebar-content .sidebar-item.spot.spot-info::before {
-    background-color: var(--bs-info);
-}
-
-.sidebar .sidebar-content .sidebar-item .sidebar-item-image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    width: 50px;
-    height: 50px;
-    border-radius: var(--bs-border-radius-sm);
-    margin-right: 0.75rem;
-}
-
-.sidebar .sidebar-content .sidebar-item .sidebar-item-data {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    overflow: hidden;
-}
-
-.sidebar .sidebar-content .sidebar-item .sidebar-item-data > span {
-    text-align: start;
-    display: block;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-
-/* Footer */
-
-.sidebar .sidebar-footer {
-    padding: 0 1rem 1rem 1rem;
-    display: flex;
-}
-
-.sidebar .sidebar-menu-btn {
-    display: flex;
-    align-items: center;
-    width: auto;
-    padding: 0.5rem;
-    border: none;
-    border-radius: var(--bs-border-radius-sm);
-    color: var(--bs-body-color);
-    background-color: inherit;
-}
-
-.sidebar .sidebar-menu-btn:hover,
-.sidebar .sidebar-menu-btn.active {
-    background-color: var(--bs-body-bg);
-}
-
-.sidebar .sidebar-user-btn {
-    flex-grow: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.sidebar .sidebar-pin-btn {
-    flex-grow: 0;
-}
-
-.sidebar .sidebar-avatar {
-    border-radius: 50%;
-    margin-right: 0.5rem;
-    width: 32px;
-    height: 32px;
-}
-
-
-/* Drop Menu */
-
-.sidebar .sidebar-menu {
-    border: none;
-    border-radius: var(--bs-border-radius-sm);
-    box-shadow: var(--bs-box-shadow);
-    padding: 0.25rem;
-}
-
-.sidebar .sidebar-menu .dropdown-item {
-    border-radius: var(--bs-border-radius-sm);
-}
-
-
-/* Rate Limit Message */
-
-.server-rate-limit {
-    display: none;
+
+    .sidebar-content {
+
+        padding: 0 1rem ;
+        margin-bottom: auto;
+        list-style: none;
+
+        .sidebar-placeholder {
+
+            display: flex;
+            align-items: center;
+            width: 100%;
+            padding: 0.5rem;
+            border: none;
+
+            .sidebar-placeholder-image {
+
+                flex-shrink: 0;
+                width: 50px;
+                height: 50px;
+                margin-right: 0.75rem;
+                border-radius: $border-radius-sm;
+
+            }
+
+            .sidebar-placeholder-data {
+
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                width: 100%;
+
+                >.placeholder { border-radius: $border-radius-sm; }
+
+            }
+
+        }
+
+        .sidebar-item {
+
+            position: relative;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            padding: 0.5rem;
+            border: none;
+            border-radius: $border-radius-sm;
+            background-color: inherit;
+
+            // Highlight effect
+            &:not(:disabled):hover,
+            &:not(:disabled):focus,
+            &.active { background-color: var(--bs-body-bg); }
+
+            // 'Spot' is an alert indicator, that appears as a coloured dot against a sidebar item 
+            &.spot {
+
+                &::before {
+
+                    content: "";
+                    transition: 0.1s ease;
+                    transform: translate(-100%, -50%);
+                    position: absolute;
+                    left: 0;
+                    top: 50%;
+                    width: 0.5rem;
+                    height: 0.5rem;
+                    border-radius: 50%;
+                    background-color: var(--bs-body-bg);
+
+                }
+
+                &:not(:disabled):hover::before,
+                &:not(:disabled):focus::before,
+                &.active::before {
+
+                    transform: 0.15s ease;
+                    width: 0.25rem;
+                    height: 60px;
+                    border-radius: 0.25rem 0 0 0.25rem;  
+
+                }
+
+                // Spot Colours
+                &.spot-primary::before { background-color: var(--bs-primary); }
+                &.spot-secondary::before { background-color: var(--bs-secondary); }
+                &.spot-success::before { background-color: var(--bs-success); }
+                &.spot-danger::before { background-color: var(--bs-danger); }
+                &.spot-warning::before { background-color: var(--bs-warning); }
+                &.spot-info::before { background-color: var(--bs-info); }
+
+            }
+
+            .sidebar-item-image {
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-shrink: 0;
+                width: 50px;
+                height: 50px;
+                border-radius: $border-radius-sm;
+                margin-right: 0.75rem;
+
+            }
+
+            // Includes the server name and id
+            .sidebar-item-data {
+
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                overflow: hidden;
+
+                &>span {
+
+                    text-align: start;
+                    display: block;
+                    width: 100%;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+
+                }
+
+            }
+
+        }
+
+    }
+
+    .sidebar-footer {
+
+        display: flex;
+        padding: 0 1rem 1rem 1rem;
+
+        .sidebar-menu-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, &.active { background-color: var(--bs-body-bg); }
+
+            &.sidebar-user-btn {
+
+                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;
+
+            }
+
+        }
+
+    }
+
+    .sidebar-menu {
+
+        border: none;
+        border-radius: var(--bs-border-radius-sm);
+        box-shadow: var(--bs-box-shadow);
+        padding: 0.25rem;
+
+        .dropdown-item { border-radius: var(--bs-border-radius-sm); }
+
+    }
+
 }