Use custom design and layout

Author: nmn

packages/docs/src/components/language-toggle.tsx

@@ -87,7 +87,8 @@ const styles = stylex.create({
   },
   buttonActive: {
     // 'bg-fd-primary/10 font-medium text-fd-primary'
-    backgroundColor: 'var(--bg-fd-primary/10)',
+    backgroundColor:
+      'color-mix(in oklab, var(--bg-fd-primary) 10%, transparent)',
     fontWeight: 500,
     color: 'var(--text-fd-primary)',
   },

packages/docs/src/components/layout/docs.tsx

@@ -7,26 +7,28 @@ import { useSearchContext } from 'fumadocs-ui/contexts/search';
 import { useSidebar } from 'fumadocs-ui/contexts/sidebar';
 import { usePathname } from 'fumadocs-core/framework';
 import * as stylex from '@stylexjs/stylex';
-import { StyleXComponentProps } from './shared';
+import { BaseLayoutProps, StyleXComponentProps } from './shared';
+import { activeLinkMarker } from '../../theming/vars.stylex';
 
-export interface DocsLayoutProps {
+export interface DocsLayoutProps extends BaseLayoutProps {
   tree: PageTree.Root;
   children: ReactNode;
 }
 
-export function DocsLayout({ tree, children }: DocsLayoutProps) {
+export function DocsLayout({ tree, children, ...props }: DocsLayoutProps) {
   return (
     <TreeContextProvider tree={tree}>
       <header {...stylex.props(layoutStyles.header)}>
         <nav {...stylex.props(layoutStyles.nav)}>
+          <NavbarSidebarTrigger
+            {...stylex.props(layoutStyles.sidebarTrigger)}
+          />
           <Link href="/" {...stylex.props(layoutStyles.title)}>
-            My Docs
+            {props.nav?.title ?? 'My Docs'}
           </Link>
 
+          <div {...stylex.props(layoutStyles.gap)} />
           <SearchToggle />
-          <NavbarSidebarTrigger
-            {...stylex.props(layoutStyles.sidebarTrigger)}
-          />
         </nav>
       </header>
       <main id="nd-docs-layout" {...stylex.props(layoutStyles.main)}>
@@ -40,10 +42,14 @@ const layoutStyles = stylex.create({
   header: {
     // sticky top-0 bg-fd-background h-14 z-20
     position: 'sticky',
+    display: 'flex',
     top: 0,
     backgroundColor: 'var(--bg-fd-background)',
-    height: 14,
+    height: '56px',
     zIndex: 20,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'var(--color-fd-border)',
   },
   nav: {
     // flex flex-row items-center gap-2 size-full px-4
@@ -54,21 +60,20 @@ const layoutStyles = stylex.create({
     width: '100%',
     paddingInline: 4 * 4,
   },
-  title: {
-    // font-medium mr-auto
-    fontWeight: 500,
-    marginInlineEnd: 'auto',
+  title: {},
+  gap: {
+    flexGrow: 1,
   },
   sidebarTrigger: {
     // md:hidden
-    display: { default: 'none', '@media (min-width: 768px)': 'block' },
+    // display: { default: 'none', '@media (min-width: 768px)': 'block' },
   },
   main: {
     // flex flex-1 flex-row [--fd-nav-height:56px]
     display: 'flex',
     flexGrow: 1,
     flexDirection: 'row',
-    ['--fd-nav-height' as any]: 56 * 4,
+    ['--fd-nav-height' as any]: '56px',
   },
 });
 
@@ -170,7 +175,7 @@ const sidebarStyles = stylex.create({
     },
   },
   notOpen: {
-    display: { default: 'flex', '@media (max-width: 767px)': 'none' },
+    display: 'none',
   },
 });
 
@@ -190,6 +195,7 @@ function SidebarItem({
         {...stylex.props(
           linkVariants.base,
           pathname === item.url ? linkVariants.active : linkVariants.inactive,
+          pathname === item.url && activeLinkMarker,
         )}
       >
         {item.icon}
@@ -207,29 +213,39 @@ function SidebarItem({
     );
   }
 
+  // type "folder"
   return (
-    <div>
-      {item.index ? (
-        <Link
-          {...stylex.props(
-            linkVariants.base,
-            pathname === item.index.url
-              ? linkVariants.active
-              : linkVariants.inactive,
-          )}
-          href={item.index.url}
-        >
-          {item.index.icon}
-          {item.index.name}
-        </Link>
-      ) : (
-        <p {...stylex.props(linkVariants.base, sidebarItemStyles.textStart)}>
-          {item.icon}
-          {item.name}
-        </p>
-      )}
+    <details {...stylex.props(sidebarItemStyles.details)}>
+      <summary>
+        {item.index ? (
+          <Link
+            {...stylex.props(
+              linkVariants.base,
+              sidebarItemStyles.summaryLink,
+              pathname === item.index.url
+                ? linkVariants.active
+                : linkVariants.inactive,
+            )}
+            href={item.index.url}
+          >
+            {item.index.icon}
+            {item.index.name}
+          </Link>
+        ) : (
+          <p
+            {...stylex.props(
+              linkVariants.base,
+              sidebarItemStyles.summaryLink,
+              sidebarItemStyles.textStart,
+            )}
+          >
+            {item.icon}
+            {item.name}
+          </p>
+        )}
+      </summary>
       <div {...stylex.props(sidebarItemStyles.childContainer)}>{children}</div>
-    </div>
+    </details>
   );
 }
 const sidebarItemStyles = stylex.create({
@@ -239,31 +255,41 @@ const sidebarItemStyles = stylex.create({
     marginTop: { default: 6 * 4, ':first-child': 0 },
     marginBottom: 2 * 4,
   },
+  details: {
+    ['--summary-color' as any]: {
+      default: null,
+      [stylex.when.descendant(':is(*)', activeLinkMarker)]: 'hotpink',
+    },
+  },
+  summaryLink: {
+    color:
+      'var(--summary-color, color-mix(in oklab, var(--text-fd-foreground) 80%, transparent))',
+  },
   textStart: { textAlign: 'start' },
   childContainer: {
     paddingInlineStart: 4 * 4,
     borderInlineStartWidth: 1,
     borderInlineStartStyle: 'solid',
-    borderInlineStartColor: 'var(--border-fd-border)',
+    borderInlineStartColor: 'var(--color-fd-border)',
     display: 'flex',
     flexDirection: 'column',
+    ['--summary-color' as any]: 'initial',
   },
 });
 
 const linkVariants = stylex.create({
   base: {
-    display: 'flex',
+    display: 'inline-flex',
     alignItems: 'center',
     gap: 2 * 4,
-    width: '100%',
+    // width: '100%',
     padding: 1.5 * 4,
     borderRadius: '8px',
     color: 'color-mix(in oklab, var(--text-fd-foreground) 80%, transparent)',
-    ['--svg-size' as any]: '4px',
   },
   active: {
     fontWeight: 500,
-    color: 'var(--text-fd-primary)',
+    color: 'hotpink',
   },
   inactive: {
     color: {

packages/docs/src/components/layout/home/client.tsx

@@ -63,7 +63,7 @@ const navbarStyles = stylex.create({
     backdropFilter: 'blur(16px)',
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
-    borderBottomColor: 'var(--border-fd-border)',
+    borderBottomColor: 'var(--color-fd-border)',
     transitionProperty: 'color, background-color',
   },
   headerWithVals: {
@@ -218,7 +218,7 @@ const navItemStyles = stylex.create({
     borderRadius: '8px',
     borderWidth: 1,
     borderStyle: 'solid',
-    borderColor: 'var(--border-fd-border)',
+    borderColor: 'var(--color-fd-border)',
     backgroundColor: 'var(--bg-fd-muted)',
     padding: 4,
     ['--svg-size' as any]: '4px',
@@ -230,7 +230,7 @@ const navItemStyles = stylex.create({
     borderRadius: '8px',
     borderWidth: 1,
     borderStyle: 'solid',
-    borderColor: 'var(--border-fd-border)',
+    borderColor: 'var(--color-fd-border)',
     backgroundColor: {
       default: 'var(--bg-fd-card)',
       ':hover': 'color-mix(in oklab, var(--bg-fd-accent) 80%, transparent)',

packages/docs/src/components/search-toggle.tsx

@@ -92,7 +92,7 @@ const styles = stylex.create({
     borderRadius: 8,
     borderWidth: 1,
     borderStyle: 'solid',
-    borderColor: 'var(--border-fd-border)',
+    borderColor: 'var(--color-fd-border)',
 
     backgroundColor:
       'color-mix(in oklab, var(--bg-fd-secondary) 50%, transparent)',
@@ -120,7 +120,7 @@ const styles = stylex.create({
     borderRadius: 8,
     borderWidth: 1,
     borderStyle: 'solid',
-    borderColor: 'var(--border-fd-border)',
+    borderColor: 'var(--color-fd-border)',
     backgroundColor: 'var(--bg-fd-background)',
     paddingInline: 1.5 * 4,
   },

packages/docs/src/components/theme-toggle.tsx

@@ -101,7 +101,7 @@ const styles = stylex.create({
     borderRadius: 9999,
     borderWidth: 1,
     borderStyle: 'solid',
-    borderColor: 'var(--border-fd-border)',
+    borderColor: 'var(--color-fd-border)',
     padding: 1 * 4,
   },
   sizeFull: {

packages/docs/src/pages/blog/[...slugs]/_layout.tsx

@@ -1,17 +1,13 @@
 import type { ReactNode } from 'react';
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import { DocsLayout } from '@/components/layout/docs';
 import { blogSource } from '@/lib/source';
 import { baseOptions } from '@/lib/layout.shared';
 import * as stylex from '@stylexjs/stylex';
 import { vars } from '../../../theming/vars.stylex';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <DocsLayout
-      {...baseOptions()}
-      sidebar={{ enabled: false }}
-      tree={blogSource.pageTree}
-    >
+    <DocsLayout {...baseOptions()} tree={blogSource.pageTree}>
       <div {...stylex.props(styles.container)}>{children}</div>
     </DocsLayout>
   );

packages/docs/src/pages/blog/[...slugs]/index.tsx

@@ -7,7 +7,7 @@ import {
   DocsDescription,
   DocsPage,
   DocsTitle,
-} from 'fumadocs-ui/page';
+} from '@/components/layout/page';
 import { baseOptions } from '@/lib/layout.shared';
 import { mdxComponents } from '@/components/mdx';
 import nmnImage from '@/static/img/nmn.jpg';
@@ -42,8 +42,8 @@ export default function BlogPage({ slugs }: PageProps<'/blog/[...slugs]'>) {
     <DocsPage
       {...baseOptions()}
       toc={page.data.toc}
-      tableOfContent={{ style: 'clerk' }}
-      breadcrumb={{ enabled: true }}
+      // tableOfContent={{ style: 'clerk' }}
+      // breadcrumb={{ enabled: true }}
     >
       <title>{`${page.data.title} | StyleX`}</title>
       <DocsTitle>

packages/docs/src/pages/blog/_layout.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { baseOptions } from '@/lib/layout.shared';
-import { HomeLayout } from 'fumadocs-ui/layouts/home';
+import { HomeLayout } from '@/components/layout/home';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;

packages/docs/src/pages/docs/[...slugs].tsx

@@ -6,7 +6,7 @@ import {
   DocsDescription,
   DocsPage,
   DocsTitle,
-} from 'fumadocs-ui/page';
+} from '@/components/layout/page';
 import { mdxComponents } from '@/components/mdx';
 import * as stylex from '@stylexjs/stylex';
 
@@ -26,7 +26,7 @@ export default function DocPage({ slugs }: PageProps<'/docs/[...slugs]'>) {
 
   const MDX = page.data.body;
   return (
-    <DocsPage toc={page.data.toc} tableOfContent={{ style: 'clerk' }}>
+    <DocsPage toc={page.data.toc}>
       <title>{`${page.data.title} | StyleX`}</title>
       <DocsTitle>
         {slugs.length > 1 && slugs[0] === 'api' ? (

packages/docs/src/pages/docs/_layout.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import { DocsLayout } from '@/components/layout/docs';
 import { source } from '@/lib/source';
 import { baseOptions } from '@/lib/layout.shared';
 
@@ -9,11 +9,7 @@ export default function Layout({ children }: { children: ReactNode }) {
   return (
     <DocsLayout
       {...base}
-      sidebar={{
-        tabs: false,
-      }}
       links={[base.links![2]!]}
-      tabMode="top"
       nav={{
         ...base.nav,
         enabled: true,