Semi-stable version with old variable names

www/intern/css/sidebar.css

@@ -184,9 +184,15 @@
 }
 
 .menuWrapper {
+    position: fixed;
+    right: 20px;
+    top: 20px;
     display: flex;
     align-items: center;
     gap: 16px;
+    padding: 20px;
+    border-radius: 40px;
+    background-color: rgb(var(--bg-top-raw));
 }
 
 .abmeldenbutton {
@@ -211,7 +217,7 @@
     padding: 20px 24px 8px;
     font-size: 14px;
     font-weight: 400;
-    color: rgba(45, 45, 45, 0.85);
+    color: rgb(146 146 146 / 85%);
 }
 
 .customSelect {
@@ -230,8 +236,7 @@ table input {
     height: 38px;
 }
 
-.selectTrigger,
-.selectTriggerBulk {
+.selectTriggerSidebar {
     background: none;
     border: none;
     padding: 0;
@@ -241,21 +246,21 @@ table input {
     cursor: pointer;
 }
 
-.sidebar-nav .selectOptions,
-.sidebar-nav .selectOptionsBulk {
+.sidebar-nav .selectOptionsSidebar {
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
     right: 0;
     padding: 4px;
     list-style: none;
+    margin-top: 2px;
 
-    border: 1px solid;
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 12px;
 
-    background: var(--sidebar-bg);
+    background: #fff;
     z-index: 1000;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 
     opacity: 0;
     transform: scaleY(0);
@@ -265,8 +270,7 @@ table input {
     transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
-.sidebar-nav .customSelect.open .selectOptions,
-.sidebar-nav .customSelect.open .selectOptionsBulk {
+.sidebar-nav .customSelect.open .selectOptionsSidebar {
     opacity: 1;
     transform: scaleY(1);
     pointer-events: auto;
@@ -276,8 +280,7 @@ table input {
     rotate: 180deg
 }
 
-.selectOptions li,
-.selectOptionsBulk li {
+.selectOptionsSidebar li {
     padding: 10px 14px;
     cursor: pointer;
     border-radius: 8px;
@@ -285,8 +288,7 @@ table input {
     transition: background-color 0.15s ease;
 }
 
-.selectOptions li:last-child,
-.selectOptionsBulk li:last-child {
+.selectOptionsSidebar li:last-child {
     margin-bottom: 0;
 }
 
@@ -302,43 +304,36 @@ table input {
     font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
-    color: rgba(45, 45, 45, 0.45);
+    color: #fff;
     margin-bottom: 6px;
     letter-spacing: 0.5px;
 }
 
-.sidebar-li-freigaben .selectTrigger {
+.selectTriggerSidebar {
     width: 100%;
     padding: 9px 12px;
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: #171717;
+    border: 1px solid #fcfcfc;
     border-radius: 8px;
     font-size: 13px;
     font-weight: 500;
-    color: var(--sidebar-text);
+    color: #fcfcfc;
     transition: all 0.2s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
 }
 
-.sidebar-li-freigaben .selectTrigger:hover {
-    border-color: rgba(0, 0, 0, 0.15);
+.selectTriggerSidebar:hover, .sidebar-li-freigaben .customSelect.open .selectTriggerSidebar {
     background: #fcfcfc;
+    color: #171717;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
 }
 
-.sidebar-li-freigaben .selectOptions {
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-    margin-top: 2px;
-}
-
-.sidebar-li-freigaben .selectOptions li {
+.selectOptionsSidebar li {
     font-size: 13px;
     padding: 8px 12px;
 }
 
-.sidebar-li-freigaben .selectOptions li.selected {
+.selectOptionsSidebar li.selected {
     background: var(--sidebar-active);
     color: #111;
     font-weight: 600;