fix(docs): refine navigation and compact sample controls

Author: waleedlatif1

apps/docs/components/docs/navigation-drawer.tsx

@@ -4,8 +4,10 @@ import type { ReactNode } from 'react'
 import { useRef, useState } from 'react'
 import * as Dialog from '@radix-ui/react-dialog'
 import { X } from '@sim/emcn/icons'
+import { cn } from '@/components/docs/classnames'
 import { SidebarNavigation } from '@/components/docs/navigation'
 import { useDocsNavigation } from '@/components/docs/navigation-context'
+import { docsScrollAreaClass } from '@/components/docs/primitives'
 import { DocsSearchTrigger } from '@/components/docs/search'
 import { ThemeSwitch } from '@/components/docs/theme'
 
@@ -50,7 +52,10 @@ export function DocsNavigationDrawer({ children }: DocsNavigationDrawerProps) {
             onScroll={(event) => {
               position.current = { navigation, top: event.currentTarget.scrollTop }
             }}
-            className='mt-5 min-h-0 flex-1 overflow-y-auto overscroll-contain pb-6'
+            className={cn(
+              docsScrollAreaClass,
+              'mt-5 min-h-0 flex-1 overflow-y-auto overscroll-contain pb-6'
+            )}
           >
             <SidebarNavigation
               nodes={navigation}

apps/docs/components/docs/navigation.tsx

@@ -17,7 +17,7 @@ interface NavigationItemProps extends Omit<SidebarNavigationProps, 'nodes'> {
 }
 
 const rowClass =
-  'group flex min-h-[30px] w-full items-center gap-1.5 rounded-lg px-2 py-[5px] text-docs-nav text-[var(--docs-text)] transition-colors focus-visible:outline-2 focus-visible:outline-[var(--docs-link)] focus-visible:outline-offset-2'
+  'group flex min-h-[30px] w-full items-center gap-1.5 rounded-lg px-2 py-[5px] text-docs-nav text-[var(--docs-text)] transition-colors focus-visible:outline-2 focus-visible:outline-[var(--docs-muted)] focus-visible:-outline-offset-2'
 
 function containsPath(node: NavNode, pathname: string): boolean {
   return (
@@ -68,8 +68,7 @@ function NavigationItem({ node, pathname, onNavigate }: NavigationItemProps) {
         <div
           className={cn(
             'group/branch flex min-h-[30px] items-center rounded-lg transition-colors hover:bg-[var(--docs-hover)] active:bg-[var(--docs-pressed)]',
-            isCurrent &&
-              'bg-[var(--docs-selected)] shadow-[var(--docs-current-edge)] hover:bg-[var(--docs-selected-hover)]'
+            isCurrent && 'bg-[var(--docs-selected)] hover:bg-[var(--docs-selected-hover)]'
           )}
         >
           <Link
@@ -90,7 +89,7 @@ function NavigationItem({ node, pathname, onNavigate }: NavigationItemProps) {
               aria-label={`${expanded ? 'Collapse' : 'Expand'} ${node.title}`}
               aria-expanded={expanded}
               onClick={toggle}
-              className='mr-0.5 flex size-7 shrink-0 items-center justify-center rounded-md opacity-0 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-[var(--docs-link)] group-focus-within/branch:opacity-100 group-hover/branch:opacity-100 [@media(hover:none)]:opacity-100'
+              className='focus-visible:-outline-offset-2 mr-0.5 flex size-7 shrink-0 items-center justify-center rounded-md opacity-0 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-[var(--docs-muted)] group-focus-within/branch:opacity-100 group-hover/branch:opacity-100 [@media(hover:none)]:opacity-100'
             >
               <ChevronDown
                 className={cn('size-4 transition-transform', !expanded && '-rotate-90')}

apps/docs/components/docs/page-frame.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react'
 import * as Dialog from '@radix-ui/react-dialog'
 import { Menu } from '@sim/emcn/icons'
 import { cn } from '@/components/docs/classnames'
+import { docsScrollAreaClass } from '@/components/docs/primitives'
 import { DocsSearchTrigger } from '@/components/docs/search'
 import { TableOfContents } from '@/components/docs/table-of-contents'
 import type { DocsHeading } from '@/lib/content/types'
@@ -43,7 +44,12 @@ export function DocsPageFrame({ children, headings, api = false }: DocsPageFrame
           {children}
         </div>
         {!api && (
-          <aside className='sticky top-24 hidden max-h-[calc(100dvh-120px)] overflow-y-auto pb-5 xl:block'>
+          <aside
+            className={cn(
+              docsScrollAreaClass,
+              'sticky top-24 hidden max-h-[calc(100dvh-120px)] overflow-y-auto pb-5 xl:block'
+            )}
+          >
             <TableOfContents headings={headings} active={activeHeading} />
           </aside>
         )}

apps/docs/components/docs/primitives.tsx

@@ -10,8 +10,11 @@ export const docsMenuClass =
 export const docsDialogClass =
   'docs-portal rounded-2xl border border-[var(--docs-border)] bg-[var(--docs-overlay)] text-[var(--docs-text)] shadow-[var(--docs-dialog-shadow)] backdrop-blur-[var(--docs-chrome-blur)]'
 
+export const docsScrollAreaClass =
+  '[scrollbar-width:thin] [scrollbar-color:var(--docs-muted)_transparent] [&::-webkit-scrollbar]:size-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--docs-muted)] [&::-webkit-scrollbar-track]:bg-transparent'
+
 export const docsInlineLinkClass =
-  'rounded-sm text-[var(--docs-prose-link)] underline decoration-current underline-offset-4 focus-visible:outline-2 focus-visible:outline-[var(--docs-link)] focus-visible:outline-offset-2 dark:underline-offset-[3px]'
+  'rounded-sm font-semibold text-[var(--docs-link)] focus-visible:outline-2 focus-visible:outline-[var(--docs-link)] focus-visible:outline-offset-2'
 
 export const docsMenuItemClass =
   'flex min-h-[30px] cursor-pointer items-center gap-2 rounded-md px-2 outline-none data-[highlighted]:bg-[var(--docs-hover)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 dark:data-[disabled]:text-[var(--docs-disabled)] dark:data-[disabled]:opacity-100'

apps/docs/components/docs/sample-panels.tsx

@@ -47,20 +47,32 @@ export function SamplePanels({
         items.map((item) => [item.value, item.groupValue ?? item.value])
       )}
       aria-label={label}
-      className={cn('my-0 overflow-hidden rounded-lg bg-[var(--docs-surface)]', className)}
+      className={cn(
+        '@container/sample my-0 overflow-hidden rounded-lg bg-[var(--docs-surface)]',
+        className
+      )}
     >
       <div className='flex min-h-11 items-center gap-2 px-3'>
         <span id={selectorId} className='shrink-0 font-medium text-docs-control'>
           {label}
         </span>
         {presentation === 'tabs' ? (
-          <TabsList aria-label={`${label} language`}>
-            {items.map((item) => (
-              <TabsTrigger key={item.value} value={item.value}>
-                {item.label}
-              </TabsTrigger>
-            ))}
-          </TabsList>
+          <>
+            <div className='@[480px]/sample:block hidden min-w-0'>
+              <TabsList aria-label={`${label} language`}>
+                {items.map((item) => (
+                  <TabsTrigger key={item.value} value={item.value}>
+                    {item.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+            <TabsSelect
+              label={`${label} language`}
+              items={items}
+              className='@[480px]/sample:hidden'
+            />
+          </>
         ) : (
           <TabsSelect label={`${label} example`} items={items} />
         )}

apps/docs/components/docs/search.tsx

@@ -15,7 +15,7 @@ import { ArrowRight, Search, X } from '@sim/emcn/icons'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 import { cn } from '@/components/docs/classnames'
-import { docsDialogClass } from '@/components/docs/primitives'
+import { docsDialogClass, docsScrollAreaClass } from '@/components/docs/primitives'
 import type { NavNode } from '@/lib/content/types'
 import { DOCS_SECTIONS } from '@/lib/navigation'
 import { useDocsSearch } from '@/hooks/queries/search'
@@ -215,7 +215,12 @@ function SearchContents({ close, navigation, sectionLabel }: SearchContentsProps
           <X className='size-4' aria-hidden />
         </Dialog.Close>
       </div>
-      <div className='h-80 min-h-0 overflow-y-auto overscroll-contain p-2 sm:h-96'>
+      <div
+        className={cn(
+          docsScrollAreaClass,
+          'h-80 min-h-0 overflow-y-auto overscroll-contain p-2 sm:h-96'
+        )}
+      >
         {!hasQuery && (
           <p className='px-3 py-2 text-[var(--docs-muted)] text-docs-caption'>
             Quick links · {sectionLabel}

apps/docs/components/docs/shell.tsx

@@ -7,6 +7,7 @@ import { cn } from '@/components/docs/classnames'
 import { SidebarNavigation } from '@/components/docs/navigation'
 import { DocsNavigationContext } from '@/components/docs/navigation-context'
 import { DocsNavigationDrawer } from '@/components/docs/navigation-drawer'
+import { docsScrollAreaClass } from '@/components/docs/primitives'
 import { DocsSearchProvider, DocsSearchTrigger } from '@/components/docs/search'
 import { ThemeSwitch } from '@/components/docs/theme'
 import { SimWordmark } from '@/components/ui/sim-logo'
@@ -95,7 +96,10 @@ export function DocsShell({ children, navigationBySection }: DocsShellProps) {
           <div className='mx-auto grid w-full max-w-[1280px] flex-1 grid-cols-[minmax(0,1fr)] items-start gap-x-12 pb-16 lg:grid-cols-[216px_minmax(0,1fr)] lg:px-4 lg:pt-10'>
             <aside
               key={section}
-              className='sticky top-24 hidden max-h-[calc(100dvh-120px)] min-w-0 space-y-5 overflow-y-auto overscroll-contain pb-5 lg:block'
+              className={cn(
+                docsScrollAreaClass,
+                'sticky top-24 hidden max-h-[calc(100dvh-120px)] min-w-0 space-y-5 overflow-y-auto overscroll-contain pb-5 lg:block'
+              )}
             >
               <DocsSearchTrigger />
               <SidebarNavigation nodes={navigation} pathname={pathname} />

apps/docs/components/docs/table-of-contents.tsx

@@ -2,7 +2,7 @@
 
 import { ChevronDown } from '@sim/emcn/icons'
 import { cn } from '@/components/docs/classnames'
-import { docsMenuClass } from '@/components/docs/primitives'
+import { docsMenuClass, docsScrollAreaClass } from '@/components/docs/primitives'
 import type { DocsHeading } from '@/lib/content/types'
 
 interface TableOfContentsProps {
@@ -29,7 +29,7 @@ export function TableOfContents({ headings, active, compact = false }: TableOfCo
               'dark:-mx-2 block rounded-md pointer-coarse:py-3 text-docs-control leading-5 transition-colors focus-visible:outline-2 focus-visible:outline-[var(--docs-link)] focus-visible:outline-offset-2 dark:px-2 dark:hover:bg-[var(--docs-hover)]',
               depth > 2 && 'pl-3 dark:pl-5',
               active === id
-                ? 'text-[var(--docs-toc-current)] dark:underline dark:underline-offset-[3px]'
+                ? 'font-medium text-[var(--docs-toc-current)]'
                 : 'text-[var(--docs-muted)] hover:text-[var(--docs-heading)] dark:hover:text-[var(--docs-muted)]'
             )}
           >
@@ -49,6 +49,7 @@ export function TableOfContents({ headings, active, compact = false }: TableOfCo
         aria-label='On this page'
         className={cn(
           docsMenuClass,
+          docsScrollAreaClass,
           'absolute top-full right-0 z-40 max-h-[60dvh] w-[min(320px,calc(100vw-40px))] overflow-y-auto overscroll-contain p-4'
         )}
       >

apps/docs/components/docs/tokens.css

@@ -45,10 +45,8 @@
   --docs-hover: rgb(10 10 10 / 6%);
   --docs-selected: rgb(0 0 0 / 8%);
   --docs-selected-hover: var(--docs-selected);
-  --docs-current-edge: none;
   --docs-pressed: rgb(0 0 0 / 12%);
   --docs-link: #0066cc;
-  --docs-prose-link: var(--docs-link);
   --docs-toc-current: var(--docs-link);
   --docs-glass: rgb(255 255 255 / 80%);
   --docs-overlay: rgb(255 255 255 / 88%);
@@ -134,10 +132,8 @@
   --docs-hover: #2b2b2b;
   --docs-selected: #333;
   --docs-selected-hover: var(--docs-pressed);
-  --docs-current-edge: inset 2px 0 0 var(--docs-boundary);
   --docs-pressed: #3a3a3a;
   --docs-link: #8abeff;
-  --docs-prose-link: var(--docs-heading);
   --docs-toc-current: var(--docs-muted);
   --docs-glass: rgb(20 20 20 / 92%);
   --docs-overlay: rgb(36 36 36 / 92%);

apps/docs/components/ui/scroll-region.tsx

@@ -2,6 +2,7 @@
 
 import { type HTMLAttributes, useEffect, useRef } from 'react'
 import { cn } from '@/components/docs/classnames'
+import { docsScrollAreaClass } from '@/components/docs/primitives'
 
 interface ScrollRegionProps extends HTMLAttributes<HTMLDivElement> {
   label: string
@@ -28,7 +29,8 @@ export function ScrollRegion({ label, className, children, ...props }: ScrollReg
       role='region'
       aria-label={label}
       className={cn(
-        'min-w-0 overflow-x-auto [scrollbar-width:thin] focus-visible:outline-2 focus-visible:outline-[var(--docs-link)] focus-visible:outline-offset-2',
+        docsScrollAreaClass,
+        'min-w-0 overflow-x-auto focus-visible:outline-2 focus-visible:outline-[var(--docs-link)] focus-visible:outline-offset-2',
         className
       )}
     >