From 4a64a40226f57838827a3bdbeeb640c332fac505 Mon Sep 17 00:00:00 2001
From: MasterAcnolo <axel.ncls@hotmail.com>
Date: Wed, 16 Sep 2026 20:17:42 +0200
Subject: [PATCH] fix(front): settings menu transition

---
 public/script/settingsPanel.js         |  5 ++---
 public/styles/layout/settingsPanel.css | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/public/script/settingsPanel.js b/public/script/settingsPanel.js
index 528679d..37c435e 100644
--- a/public/script/settingsPanel.js
+++ b/public/script/settingsPanel.js
@@ -16,8 +16,7 @@ let isOpen = false;
  * Toggles visibility of the settings panel when clicking the settings button.
  */
 settingsButton.addEventListener("click", () => {
-  const currentlyOpen = settingsPanel.style.display === "block";
-  settingsPanel.style.display = currentlyOpen ? "none" : "block";
+    settingsPanel.classList.toggle("open");
 });
 
 /**
@@ -25,7 +24,7 @@ settingsButton.addEventListener("click", () => {
  */
 function closePanel() {
   isOpen = false;
-  settingsPanel.style.display = "none";
+    settingsPanel.classList.remove("open");
 }
 
 /**
diff --git a/public/styles/layout/settingsPanel.css b/public/styles/layout/settingsPanel.css
index 32b81e0..1c26f09 100644
--- a/public/styles/layout/settingsPanel.css
+++ b/public/styles/layout/settingsPanel.css
@@ -45,11 +45,22 @@
     border-radius: 12px;
     padding: 20px;
     box-shadow: 0 8px 24px rgba(0,0,0,0.4);
-    display: none;
     overflow-y: auto;
     z-index: 9999;
-    animation: slideIn 0.2s ease-out;
+    /*animation: slideIn 0.2s ease-out; */
     color: var(--settings-text-color);
+
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(20px);
+    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+
+.settings-panel.open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0);
 }
 
 .settings-panel::-webkit-scrollbar {