+
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
+ return
}
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 (
-
+
)
}
@@ -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 && (
)}
{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"
>
-
+
@@ -52,7 +52,7 @@ export function StackedLayout({
let [showSidebar, setShowSidebar] = useState(false)
return (
-
+
{/* Sidebar on mobile */}
setShowSidebar(false)}>
{sidebar}
@@ -70,7 +70,7 @@ export function StackedLayout({
{/* Content */}
-