server sidebar support smaller screens

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;
 }

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-nowrap h-100">
-        <div class="d-flex flex-column bg-body-tertiary py-3 border-end" style="width: 16rem">
+        <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-2">
+            <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>
+                        <i class="bi bi-plus-lg fs-5 d-lg-none d-inline"></i>
-                        <span class="small">Add Server</span>
+                        <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">
+    <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="bi bi-exclamation-triangle-fill"></i>
+        <i class="dot-icon bg-warning"></i>
     </div>
 </script>
 <script src="{% static 'js/api.js' %}"></script>