From b5a4f39c6f69a39d7c0d757cb8ab5724fa5b7afc Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Sun, 12 Jul 2026 19:12:24 +0200
Subject: [PATCH] fix: bg color when hovered in dark mode

---
 frontend/src/components/Sidebar.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index dc9a7c8..b26e1ea 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -67,7 +67,14 @@ export const Sidebar = () => {
         <Button
           variant="soft"
           size="sm"
-          className="transition-transform duration-200 ease-out"
+          sx={{
+            display: "inline-flex",
+            "@media (min-width: 1024px)": { display: "none" },
+            "&:hover": {
+              backgroundColor: "var(--joy-palette-primary-900)",
+              color: "var(--joy-palette-primary-50)",
+            },
+          }}
           onClick={() => setIsOpen((open) => !open)}
           startDecorator={
             <span
@@ -78,10 +85,6 @@ export const Sidebar = () => {
               {isOpen ? <CloseIcon /> : <MenuIcon />}
             </span>
           }
-          sx={{
-            display: "inline-flex",
-            "@media (min-width: 1024px)": { display: "none" },
-          }}
         >
           {isOpen ? t("close") : t("menu")}
         </Button>