Seazn/profit-planet-frontend
2
2
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: update sidebar and layout styles for improved dark mode support

Browse Source
This commit is contained in:
seaznCode 2026-01-27 19:18:57 +01:00
parent 5958cf910c
commit 5832da59a9
5 changed files with 23 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ToDo.txt
View File

@ -42,7 +42,7 @@ Last updated: 2026-01-20
• [ ] Security Headers • [ ] Security Headers
• [ ] Dependency Management • [ ] Dependency Management
• [ ] SYSTEM ABSCHALTUNG VERHINDERN -- Exoscale Role? / Security Konzept • [ ] SYSTEM ABSCHALTUNG VERHINDERN -- Exoscale Role? / Security Konzept
• [ ] • [ ] new npm version
================================================================================ ================================================================================
ICEBOX / LATER / BACKLOG ICEBOX / LATER / BACKLOG

12
src/app/components/nav/Header.tsx
View File

@ -609,17 +609,17 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
<> <>
{/* CHANGED: include profile icon INSIDE hamburger menu */} {/* CHANGED: include profile icon INSIDE hamburger menu */}
<div className="pt-6 space-y-2"> <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 <Avatar
src="" src=""
initials={getUserInitials()} initials={getUserInitials()}
className="size-10 bg-gradient-to-br from-indigo-500/40 to-indigo-600/60 text-white" className="size-10 bg-gradient-to-br from-indigo-500/40 to-indigo-600/60 text-white"
/> />
<div className="min-w-0"> <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')} {user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : (user?.email || 'User')}
</div> </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'} {user?.email || 'user@example.com'}
</div> </div>
</div> </div>
@ -723,12 +723,12 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
{/* Admin navigation – LAST */} {/* Admin navigation – LAST */}
{isAdmin && ( {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"> <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 Admin Navigation
</p> </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"> <div className="grid grid-cols-1 gap-1.5 text-sm">
<button <button
onClick={() => { router.push('/admin'); setMobileMenuOpen(false); }} onClick={() => { router.push('/admin'); setMobileMenuOpen(false); }}

6
src/app/components/sidebar-layout.tsx
View File

@ -31,7 +31,7 @@ function MobileSidebar({ open, close, children }: React.PropsWithChildren<{ open
transition transition
className="fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full" 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"> <div className="-mb-3 px-4 pt-3">
<Headless.CloseButton as={NavbarItem} aria-label="Close navigation"> <Headless.CloseButton as={NavbarItem} aria-label="Close navigation">
<CloseMenuIcon /> <CloseMenuIcon />
@ -52,7 +52,7 @@ export function SidebarLayout({
let [showSidebar, setShowSidebar] = useState(false) let [showSidebar, setShowSidebar] = useState(false)
return ( 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 */} {/* Sidebar on desktop */}
<div className="fixed inset-y-0 left-0 w-64 max-lg:hidden">{sidebar}</div> <div className="fixed inset-y-0 left-0 w-64 max-lg:hidden">{sidebar}</div>
@ -73,7 +73,7 @@ export function SidebarLayout({
{/* Content */} {/* Content */}
<main className="flex flex-1 flex-col pb-2 lg:min-w-0 lg:pt-2 lg:pr-2 lg:pl-64"> <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 className="mx-auto max-w-6xl">{children}</div>
</div> </div>
</main> </main>

25
src/app/components/sidebar.tsx
View File

@ -17,7 +17,7 @@ export function SidebarHeader({ className, ...props }: React.ComponentPropsWitho
{...props} {...props}
className={clsx( className={clsx(
className, 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} {...props}
className={clsx( className={clsx(
className, 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'>) { 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'>) { 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'>) { export function SidebarHeading({ className, ...props }: React.ComponentPropsWithoutRef<'h3'>) {
return ( 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( let classes = clsx(
// Base // 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 // 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) // 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', '*:last:data-[slot=icon]:ml-auto *:last:data-[slot=icon]:size-5 sm:*:last:data-[slot=icon]:size-4',
// Avatar // Avatar
'*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 sm:*:data-[slot=avatar]:size-6', '*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 sm:*:data-[slot=avatar]:size-6',
// Hover // 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 // 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 // Current
'data-current:*:data-[slot=icon]:fill-zinc-950', 'data-current:*:data-[slot=icon]:fill-white'
// 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'
) )
return ( return (
@ -110,7 +105,7 @@ export const SidebarItem = forwardRef(function SidebarItem(
{current && ( {current && (
<motion.span <motion.span
layoutId="current-indicator" 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' ? ( {typeof props.href === 'string' ? (

6
src/app/components/stacked-layout.tsx
View File

@ -31,7 +31,7 @@ function MobileSidebar({ open, close, children }: React.PropsWithChildren<{ open
transition transition
className="fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full" 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"> <div className="-mb-3 px-4 pt-3">
<Headless.CloseButton as={NavbarItem} aria-label="Close navigation"> <Headless.CloseButton as={NavbarItem} aria-label="Close navigation">
<CloseMenuIcon /> <CloseMenuIcon />
@ -52,7 +52,7 @@ export function StackedLayout({
let [showSidebar, setShowSidebar] = useState(false) let [showSidebar, setShowSidebar] = useState(false)
return ( 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 */} {/* Sidebar on mobile */}
<MobileSidebar open={showSidebar} close={() => setShowSidebar(false)}> <MobileSidebar open={showSidebar} close={() => setShowSidebar(false)}>
{sidebar} {sidebar}
@ -70,7 +70,7 @@ export function StackedLayout({
{/* Content */} {/* Content */}
<main className="flex flex-1 flex-col pb-2 lg:px-2"> <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 className="mx-auto max-w-6xl">{children}</div>
</div> </div>
</main> </main>