UI: control page styles from layouts

.changeset/shy-mice-sip.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Control page styles from layouts

packages/ui/src/components/layout/toc-popover.tsx

@@ -31,7 +31,7 @@ export function TocPopoverTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        'inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start md:px-3',
+        'inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start',
         props.className,
       )}
     >

packages/ui/src/components/type-table.tsx

@@ -57,7 +57,7 @@ export function TypeTable({
 }): React.ReactElement {
   return (
     <div className="not-prose overflow-auto whitespace-nowrap">
-      <table className="my-4 w-full text-left text-sm text-fd-muted-foreground">
+      <table className="my-4 w-full text-start text-sm text-fd-muted-foreground">
         <thead className="border-b">
           <tr>
             <th className={cn(th(), 'w-[45%]')}>Prop</th>
@@ -93,6 +93,7 @@ export function TypeTable({
                 ) : (
                   <span>-</span>
                 )}
+                √
               </td>
             </tr>
           ))}

packages/ui/src/layouts/docs.tsx

@@ -82,7 +82,7 @@ export function DocsLayout({
       <NavProvider transparentMode={transparentMode}>
         {replaceOrDefault(
           { enabled: navEnabled, component: navReplace },
-          <Navbar className="h-14 md:hidden">
+          <Navbar id="nd-subnav" className="h-14 md:hidden">
             <Title url={nav.url} title={nav.title} />
             <div className="flex flex-1 flex-row items-center gap-1">
               {nav.children}
@@ -98,7 +98,7 @@ export function DocsLayout({
           id="nd-docs-layout"
           {...props.containerProps}
           className={cn(
-            'flex flex-1 flex-row md:[--fd-sidebar-width:260px] xl:[--fd-toc-width:260px]',
+            'flex flex-1 flex-row md:[--fd-sidebar-width:260px] xl:[--fd-toc-width:260px] [&_#nd-toc]:max-xl:hidden [&_#nd-tocnav]:xl:hidden max-xl:[&_article]:mx-0',
             !navReplace && navEnabled
               ? '[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]'
               : null,

packages/ui/src/layouts/docs/navbar.tsx

@@ -13,7 +13,6 @@ export function Navbar(props: HTMLAttributes<HTMLElement>) {
 
   return (
     <header
-      id="nd-subnav"
       {...props}
       className={cn(
         'sticky top-[var(--fd-banner-height)] z-30 flex flex-row items-center border-b border-fd-foreground/10 px-4 transition-colors',

packages/ui/src/layouts/notebook.tsx

@@ -76,7 +76,7 @@ export function DocsLayout({
         <LayoutBody
           {...props.containerProps}
           className={cn(
-            '[--fd-nav-height:3.5rem] md:[--fd-sidebar-width:260px] xl:[--fd-toc-width:260px]',
+            '[--fd-nav-height:3.5rem] md:[--fd-sidebar-width:260px] lg:[--fd-toc-width:260px] [&_#nd-toc]:max-lg:hidden [&_#nd-tocnav]:lg:hidden',
             props.containerProps?.className,
           )}
         >
@@ -141,15 +141,15 @@ function DocsNavbar({
   links: LinkItemType[];
 }) {
   return (
-    <Navbar className="h-14">
+    <Navbar id="nd-subnav" className="h-14 md:gap-1.5">
       {sidebarCollapsible ? (
-        <SidebarCollapseTrigger className="me-2 data-[collapsed=false]:hidden max-md:hidden" />
+        <SidebarCollapseTrigger className="-ms-1.5 text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden" />
       ) : null}
       <SearchOnly>
         <LargeSearchToggle className="w-full max-w-[240px] rounded-lg max-md:hidden" />
       </SearchOnly>
       <Title url={nav.url} title={nav.title} className="md:hidden" />
-      <div className="ms-4 flex flex-1 flex-row items-center gap-6">
+      <div className="flex flex-1 flex-row items-center gap-6 px-2">
         {links
           .filter((item) => item.type !== 'icon')
           .map((item, i) => (
@@ -164,28 +164,30 @@ function DocsNavbar({
       <SearchOnly>
         <SearchToggle className="md:hidden" />
       </SearchOnly>
-      <NavbarSidebarTrigger className="-me-2 md:hidden" />
-      {links
-        .filter((item) => item.type === 'icon')
-        .map((item, i) => (
-          <BaseLinkItem
-            key={i}
-            item={item}
-            className={cn(
-              buttonVariants({ size: 'icon', color: 'ghost' }),
-              'text-fd-muted-foreground max-lg:hidden',
-            )}
-            aria-label={item.label}
-          >
-            {item.icon}
-          </BaseLinkItem>
-        ))}
+      <NavbarSidebarTrigger className="-me-1.5 max-lg:hidden md:hidden" />
+      <div className="flex flex-row items-center empty:hidden">
+        {links
+          .filter((item) => item.type === 'icon')
+          .map((item, i) => (
+            <BaseLinkItem
+              key={i}
+              item={item}
+              className={cn(
+                buttonVariants({ size: 'icon', color: 'ghost' }),
+                'text-fd-muted-foreground',
+              )}
+              aria-label={item.label}
+            >
+              {item.icon}
+            </BaseLinkItem>
+          ))}
+      </div>
       {i18n ? (
-        <LanguageToggle className="me-1.5">
+        <LanguageToggle>
           <Languages className="size-5" />
         </LanguageToggle>
       ) : null}
-      <ThemeToggle className="max-md:hidden" />
+      <ThemeToggle className="p-0 max-md:hidden" />
     </Navbar>
   );
 }

packages/ui/src/page.client.tsx

@@ -27,7 +27,6 @@ export function PageContainer(props: HTMLAttributes<HTMLDivElement>) {
 
   return (
     <div
-      id="nd-page"
       {...props}
       className={cn(
         'flex w-full min-w-0 max-w-[var(--fd-page-width)] flex-col md:transition-[max-width]',
@@ -52,8 +51,7 @@ export function PageHeader(props: HTMLAttributes<HTMLDivElement>) {
   const { isTransparent } = useNav();
 
   return (
-    <div
-      id="nd-tocnav"
+    <header
       {...props}
       className={cn(
         'sticky top-fd-layout-top z-10 flex flex-row items-center border-b border-fd-foreground/10 text-sm transition-colors',
@@ -70,7 +68,7 @@ export function PageHeader(props: HTMLAttributes<HTMLDivElement>) {
       }
     >
       {props.children}
-    </div>
+    </header>
   );
 }
 

packages/ui/src/page.tsx

@@ -129,6 +129,7 @@ export function DocsPage({
   return (
     <AnchorProvider toc={toc} single={tocOptions.single}>
       <PageContainer
+        id="nd-page"
         style={
           {
             '--fd-toc-width': tocEnabled ? undefined : '0px',
@@ -137,7 +138,7 @@ export function DocsPage({
       >
         {replaceOrDefault(
           { enabled: tocPopoverEnabled, component: tocPopoverReplace },
-          <PageHeader className="xl:hidden">
+          <PageHeader id="nd-tocnav">
             <TocPopover>
               <TocPopoverTrigger className="size-full" items={toc} />
               <TocPopoverContent>
@@ -158,7 +159,7 @@ export function DocsPage({
         )}
         <article
           className={cn(
-            'mx-auto flex w-full flex-1 flex-col gap-6 px-4 pt-10 md:px-8 md:pt-12',
+            'mx-auto flex w-full flex-1 flex-col gap-6 px-4 pt-10 md:px-7 md:pt-12',
             tocEnabled ? 'max-w-[860px]' : 'max-w-[1120px]',
           )}
         >
@@ -181,7 +182,7 @@ export function DocsPage({
       </PageContainer>
       {replaceOrDefault(
         { enabled: tocEnabled, component: tocReplace },
-        <Toc className="max-xl:hidden">
+        <Toc id="nd-toc">
           <div className="flex h-full w-[var(--fd-toc-width)] max-w-full flex-col gap-3 pe-2">
             {tocOptions.header}
             <h3 className="-ms-0.5 inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground">