From 2b6546bd76b5edcf27bf0b9e4d14464ea4eaac91 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Sat, 14 Sep 2024 20:12:22 +0100
Subject: [PATCH] server sidebar support smaller screens

---
 apps/static/css/home/index.css | 41 ++++++++++++++++++++++++++++++++++
 apps/templates/home/index.html | 16 ++++++-------
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/apps/static/css/home/index.css b/apps/static/css/home/index.css
index 02786c3..f9d5738 100644
--- a/apps/static/css/home/index.css
+++ b/apps/static/css/home/index.css
@@ -30,6 +30,39 @@
     transition: border-radius .15s ease-in;
 } */
 
+.server-sidebar {
+  width: 16rem;
+}
+
+@media (max-width: 992px) {
+    .server-sidebar {
+        width: 4.5rem;
+    }
+
+    .server-item > button {
+        padding: 0.25rem !important;
+    }
+
+    .server-item > button > div {
+        justify-content: center !important;
+    }
+
+    .server-item .server-item-labels {
+        display: none !important;
+    }
+
+    .server-sidebar > ul > li:has(> #newServerBtn) {
+        display: flex;
+        justify-content: center !important;
+    }
+
+    #newServerBtn {
+        width: 45px !important;
+        height: 45px !important;
+        padding: 0 !important;
+    }
+}
+
 .server-item {
     max-width: calc(16rem - 1rem);
 }
@@ -99,4 +132,12 @@ td > .btn-link {
 
 #serverTabs .nav-link:not(.active) {
   color: var(--bs-text-body);
+}
+
+.dot-icon {
+  height: .75rem;
+  width: .75rem;
+  background-color: var(--bs-primary);
+  border-radius: 50%;
+  display: inline-block;
 }
\ No newline at end of file
diff --git a/apps/templates/home/index.html b/apps/templates/home/index.html
index cc17c2d..404e5d1 100644
--- a/apps/templates/home/index.html
+++ b/apps/templates/home/index.html
@@ -11,13 +11,13 @@
 
 {% block content %}
 <div class="px-0 h-100">
-    <div class="d-flex flex-nowrap h-100 border-start border-end">
-        <div class="d-flex flex-column bg-body-tertiary py-3 border-end" style="width: 16rem">
-            <ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center px-2">
+    <div class="d-flex flex-nowrap h-100">
+        <div class="server-sidebar d-flex flex-column bg-body-tertiary py-3 border-end">
+            <ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center px-lg-2 px-1 flex-nowrap overflow-y-auto">
                 <li class="nav-item">
                     <button type="button" id="newServerBtn" class="btn btn-outline-primary rounded-1 mt-2 w-100 d-flex justify-content-center align-items-center">
-                        <i class="bi bi-plus-lg fs-5 d-none"></i>
-                        <span class="small">Add Server</span>
+                        <i class="bi bi-plus-lg fs-5 d-lg-none d-inline"></i>
+                        <span class="small d-lg-inline d-none">Add Server</span>
                     </button>
                 </li>
             </ul>
@@ -117,7 +117,7 @@
         <button type="button" class="btn border-0 server-item-selector w-100 rounded-1 position-relative">
             <div class="d-flex justify-content-start align-items-center w-100">
                 <img src="" alt="Guild Icon" class="rounded-1 small" width="45" height="45">
-                <div class="small text-start ps-2 w-100 flex-shrink-1 overflow-hidden">
+                <div class="server-item-labels small text-start ps-2 w-100 flex-shrink-1 overflow-hidden">
                     <div class="js-guildName text-body fw-bold text-truncate"></div>
                     <div class="js-guildId text-body-secondary text-truncate font-monospace"></div>
                 </div>
@@ -126,8 +126,8 @@
     </li>
 </script>
 <script id="serverItemIconTemplate" type="text/template">
-    <div class="position-absolute top-0 end-0 badge rounded-1 text-warning fs-5 p-1" data-bs-toggle="tooltip" data-bs-placement="right">
-        <i class="bi bi-exclamation-triangle-fill"></i>
+    <div class="position-absolute top-0 end-0 badge rounded-1 fs-5 p-1" data-bs-toggle="tooltip" data-bs-placement="right">
+        <i class="dot-icon bg-warning"></i>
     </div>
 </script>
 <script src="{% static 'js/api.js' %}"></script>