From 5832da59a922e31083f275f3f84bdfeb7622685f Mon Sep 17 00:00:00 2001
From: seaznCode <alexander.atmn@gmail.com>
Date: Tue, 27 Jan 2026 19:18:57 +0100
Subject: [PATCH] fix: update sidebar and layout styles for improved dark mode
 support

---
 ToDo.txt                              |  2 +-
 src/app/components/nav/Header.tsx     | 12 ++++++------
 src/app/components/sidebar-layout.tsx |  6 +++---
 src/app/components/sidebar.tsx        | 25 ++++++++++---------------
 src/app/components/stacked-layout.tsx |  6 +++---
 5 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/ToDo.txt b/ToDo.txt
index 97e8bee..bd1a1a1 100644
--- a/ToDo.txt
+++ b/ToDo.txt
@@ -42,7 +42,7 @@ Last updated: 2026-01-20
 • [ ] Security Headers
 • [ ] Dependency Management
 • [ ] SYSTEM ABSCHALTUNG VERHINDERN -- Exoscale Role? / Security Konzept
-• [ ] 
+• [ ] new npm version
 
 ================================================================================
                           ICEBOX / LATER / BACKLOG
diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx
index 18e64b6..e104ef3 100644
--- a/src/app/components/nav/Header.tsx
+++ b/src/app/components/nav/Header.tsx
@@ -609,17 +609,17 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
                     <>
                       {/* CHANGED: include profile icon INSIDE hamburger menu */}
                       <div className="pt-6 space-y-2">
-                        <div className="flex items-center gap-3 border-b border-white/10 pb-4 mb-4 px-3">
+                        <div className="flex items-center gap-3 border-b border-gray-200 dark:border-white/10 pb-4 mb-4 px-3">
                           <Avatar
                             src=""
                             initials={getUserInitials()}
                             className="size-10 bg-gradient-to-br from-indigo-500/40 to-indigo-600/60 text-white"
                           />
                           <div className="min-w-0">
-                            <div className="font-medium text-white truncate">
+                            <div className="font-medium text-gray-900 dark:text-white truncate">
                               {user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : (user?.email || 'User')}
                             </div>
-                            <div className="text-sm text-gray-400 truncate">
+                            <div className="text-sm text-gray-600 dark:text-gray-400 truncate">
                               {user?.email || 'user@example.com'}
                             </div>
                           </div>
@@ -723,12 +723,12 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
 
                         {/* Admin navigation – LAST */}
                         {isAdmin && (
-                          <div className="group mt-2 rounded-2xl border border-white/15 bg-gradient-to-br from-white/5 via-white/10 to-white/5 bg-clip-padding backdrop-blur-md shadow-[0_18px_45px_rgba(0,0,0,0.45)] ring-1 ring-white/15 transition-transform transition-shadow duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_22px_55px_rgba(0,0,0,0.6)]">
+                          <div className="group mt-2 rounded-2xl border border-white/15 bg-zinc-900/90 shadow-[0_18px_45px_rgba(0,0,0,0.45)] ring-1 ring-white/15 transition-transform transition-shadow duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_22px_55px_rgba(0,0,0,0.6)]">
                             <div className="px-3 py-2.5 group-hover:animate-pulse">
-                              <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-200 mb-1.5">
+                              <p className="mb-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-200">
                                 Admin Navigation
                               </p>
-                              <div className="h-px w-full bg-gradient-to-r from-transparent via-white/70 to-transparent opacity-80 mb-2 transition-opacity group-hover:opacity-100" />
+                              <div className="mb-2 h-px w-full bg-gradient-to-r from-transparent via-white/70 to-transparent opacity-80 transition-opacity group-hover:opacity-100" />
                               <div className="grid grid-cols-1 gap-1.5 text-sm">
                                 <button
                                   onClick={() => { router.push('/admin'); setMobileMenuOpen(false); }}
diff --git a/src/app/components/sidebar-layout.tsx b/src/app/components/sidebar-layout.tsx
index ecc07b1..50c4ca6 100644
--- a/src/app/components/sidebar-layout.tsx
+++ b/src/app/components/sidebar-layout.tsx
@@ -31,7 +31,7 @@ function MobileSidebar({ open, close, children }: React.PropsWithChildren<{ open
         transition
         className="fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full"
       >
-        <div className="flex h-full flex-col rounded-lg bg-white shadow-xs ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10">
+        <div className="flex h-full flex-col rounded-lg bg-zinc-900 shadow-xs ring-1 ring-white/10">
           <div className="-mb-3 px-4 pt-3">
             <Headless.CloseButton as={NavbarItem} aria-label="Close navigation">
               <CloseMenuIcon />
@@ -52,7 +52,7 @@ export function SidebarLayout({
   let [showSidebar, setShowSidebar] = useState(false)
 
   return (
-    <div className="relative isolate flex min-h-svh w-full bg-white max-lg:flex-col lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
+    <div className="relative isolate flex min-h-svh w-full bg-zinc-900 max-lg:flex-col lg:bg-zinc-950">
       {/* Sidebar on desktop */}
       <div className="fixed inset-y-0 left-0 w-64 max-lg:hidden">{sidebar}</div>
 
@@ -73,7 +73,7 @@ export function SidebarLayout({
 
       {/* Content */}
       <main className="flex flex-1 flex-col pb-2 lg:min-w-0 lg:pt-2 lg:pr-2 lg:pl-64">
-        <div className="grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">
+        <div className="grow p-6 lg:rounded-lg lg:bg-zinc-900 lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-white/10">
           <div className="mx-auto max-w-6xl">{children}</div>
         </div>
       </main>
diff --git a/src/app/components/sidebar.tsx b/src/app/components/sidebar.tsx
index 9b4086c..61bc0af 100644
--- a/src/app/components/sidebar.tsx
+++ b/src/app/components/sidebar.tsx
@@ -17,7 +17,7 @@ export function SidebarHeader({ className, ...props }: React.ComponentPropsWitho
       {...props}
       className={clsx(
         className,
-        'flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5'
+        'flex flex-col border-b border-white/10 p-4 [&>[data-slot=section]+[data-slot=section]]:mt-2.5'
       )}
     />
   )
@@ -41,7 +41,7 @@ export function SidebarFooter({ className, ...props }: React.ComponentPropsWitho
       {...props}
       className={clsx(
         className,
-        'flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5'
+        'flex flex-col border-t border-white/10 p-4 [&>[data-slot=section]+[data-slot=section]]:mt-2.5'
       )}
     />
   )
@@ -58,7 +58,7 @@ export function SidebarSection({ className, ...props }: React.ComponentPropsWith
 }
 
 export function SidebarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'hr'>) {
-  return <hr {...props} className={clsx(className, 'my-4 border-t border-zinc-950/5 lg:-mx-4 dark:border-white/5')} />
+  return <hr {...props} className={clsx(className, 'my-4 border-t border-white/10 lg:-mx-4')} />
 }
 
 export function SidebarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
@@ -67,7 +67,7 @@ export function SidebarSpacer({ className, ...props }: React.ComponentPropsWitho
 
 export function SidebarHeading({ className, ...props }: React.ComponentPropsWithoutRef<'h3'>) {
   return (
-    <h3 {...props} className={clsx(className, 'mb-1 px-2 text-xs/6 font-medium text-zinc-500 dark:text-zinc-400')} />
+    <h3 {...props} className={clsx(className, 'mb-1 px-2 text-xs/6 font-medium text-zinc-300')} />
   )
 }
 
@@ -85,24 +85,19 @@ export const SidebarItem = forwardRef(function SidebarItem(
 ) {
   let classes = clsx(
     // Base
-    'flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5',
+    'flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-white sm:py-2 sm:text-sm/5',
     // Leading icon/icon-only
-    '*:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5',
+    '*:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-300 sm:*:data-[slot=icon]:size-5',
     // Trailing icon (down chevron or similar)
     '*:last:data-[slot=icon]:ml-auto *:last:data-[slot=icon]:size-5 sm:*:last:data-[slot=icon]:size-4',
     // Avatar
     '*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 sm:*:data-[slot=avatar]:size-6',
     // Hover
-    'data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950',
+    'data-hover:bg-white/5 data-hover:*:data-[slot=icon]:fill-white',
     // Active
-    'data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950',
+    'data-active:bg-white/5 data-active:*:data-[slot=icon]:fill-white',
     // Current
-    'data-current:*:data-[slot=icon]:fill-zinc-950',
-    // Dark mode
-    'dark:text-white dark:*:data-[slot=icon]:fill-zinc-400',
-    'dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white',
-    'dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white',
-    'dark:data-current:*:data-[slot=icon]:fill-white'
+    'data-current:*:data-[slot=icon]:fill-white'
   )
 
   return (
@@ -110,7 +105,7 @@ export const SidebarItem = forwardRef(function SidebarItem(
       {current && (
         <motion.span
           layoutId="current-indicator"
-          className="absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white"
+          className="absolute inset-y-2 -left-4 w-0.5 rounded-full bg-white"
         />
       )}
       {typeof props.href === 'string' ? (
diff --git a/src/app/components/stacked-layout.tsx b/src/app/components/stacked-layout.tsx
index 5b1c40e..8cebf89 100644
--- a/src/app/components/stacked-layout.tsx
+++ b/src/app/components/stacked-layout.tsx
@@ -31,7 +31,7 @@ function MobileSidebar({ open, close, children }: React.PropsWithChildren<{ open
         transition
         className="fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full"
       >
-        <div className="flex h-full flex-col rounded-lg bg-white shadow-xs ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10">
+        <div className="flex h-full flex-col rounded-lg bg-zinc-900 shadow-xs ring-1 ring-white/10">
           <div className="-mb-3 px-4 pt-3">
             <Headless.CloseButton as={NavbarItem} aria-label="Close navigation">
               <CloseMenuIcon />
@@ -52,7 +52,7 @@ export function StackedLayout({
   let [showSidebar, setShowSidebar] = useState(false)
 
   return (
-    <div className="relative isolate flex min-h-svh w-full flex-col bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
+    <div className="relative isolate flex min-h-svh w-full flex-col bg-zinc-900 lg:bg-zinc-950">
       {/* Sidebar on mobile */}
       <MobileSidebar open={showSidebar} close={() => setShowSidebar(false)}>
         {sidebar}
@@ -70,7 +70,7 @@ export function StackedLayout({
 
       {/* Content */}
       <main className="flex flex-1 flex-col pb-2 lg:px-2">
-        <div className="grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">
+        <div className="grow p-6 lg:rounded-lg lg:bg-zinc-900 lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-white/10">
           <div className="mx-auto max-w-6xl">{children}</div>
         </div>
       </main>