From 4dcd1f71fb5e003dd7da09da0e38788151c878c4 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Wed, 9 Oct 2024 21:05:45 +0100
Subject: [PATCH] animate sidebar & fix active server not highlighted

---
 apps/home/static/home/css/sidebar.css | 11 ++++-------
 apps/home/static/home/js/servers.js   |  6 +++---
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/home/static/home/css/sidebar.css b/apps/home/static/home/css/sidebar.css
index af4603b..8555708 100644
--- a/apps/home/static/home/css/sidebar.css
+++ b/apps/home/static/home/css/sidebar.css
@@ -23,9 +23,9 @@
     flex-direction: column;
     flex-shrink: 0;
     width: 300px;
-
     color: var(--bs-body-color);
-    background-color: var(--bs-tertiary-bg)
+    background-color: var(--bs-tertiary-bg);
+    transition: transform 0.3s ease-in-out;
 }
 
 @media (max-width: 992px) {
@@ -43,14 +43,11 @@
         left: 0;
         top: 0;
         bottom: 0;
-    }
-
-    .sidebar:not(.visible) {
-        display: none;
+        transform: translateX(-100%);
     }
 
     .sidebar.visible {
-        display: flex;
+        transform: translateX(0);
     }
 }
 
diff --git a/apps/home/static/home/js/servers.js b/apps/home/static/home/js/servers.js
index e929549..8168970 100644
--- a/apps/home/static/home/js/servers.js
+++ b/apps/home/static/home/js/servers.js
@@ -86,11 +86,11 @@ function createSelectButton(serverData) {
     template.find(".js-image").attr("src", imageUrl).attr("alt", altText);
     template.find(".js-name").text(name);
     template.find(".js-id").text(id);
-    template.find(".sidebar-item").data("id", id);
+    template.find(".sidebar-item").attr("data-id", id);
 
     // Bind the button for selecting this server
     template.find(".sidebar-item").off("click").on("click", function() {
-        selectServer(id);
+        selectServer($(this).data("id"));
     });
 
     $("#serverList").prepend(template);
@@ -121,7 +121,7 @@ function selectServer(id) {
 
     // Change appearance of selected vs none-selected items
     $("#serverList .sidebar-item").removeClass("active");
-    $(`#serverList .sidebar-item[data-id=${id}]`).addClass("active");
+    $(`#serverList .sidebar-item[data-id="${id}"]`).addClass("active");
 
     // Global variable
     selectedServer = server;