fix: sidebar tab icon (#11141)

This commit is contained in:
Almeida
2025-10-05 18:46:59 +01:00
committed by GitHub
parent 05224e78ec
commit dee79efbaf

View File

@@ -1,5 +1,5 @@
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';
import type { CSSProperties, ReactNode } from 'react';
import { baseOptions } from '@/app/layout.config';
import { source } from '@/lib/source';
@@ -13,17 +13,18 @@ export default function Layout({ children }: { readonly children: ReactNode }) {
if (!meta || !node.icon) return option;
// category selection color based on path src/styles/base.css
const color = `var(--${meta.file.path.split('/')[0]}-color, var(--color-fd-foreground))`;
const color = `var(--${meta.path.split('/')[0]}-color, var(--color-fd-foreground))`;
return {
...option,
icon: (
<div
className="rounded-lg border p-1.5 shadow-lg md:mb-auto md:rounded-md md:p-1 [&_svg]:size-6 md:[&_svg]:size-5"
style={{
color,
backgroundColor: `color-mix(in oklab, ${color} 10%, transparent)`,
}}
className="size-full rounded-lg text-(--tab-color) max-md:border max-md:bg-(--tab-color)/10 max-md:p-1.5 [&_svg]:size-full"
style={
{
'--tab-color': color,
} as CSSProperties
}
>
{node.icon}
</div>