UI: Improve sidebar font

apps/docs/app/docs/[mode]/layout.tsx

@@ -14,15 +14,10 @@ export default function Layout({
   children: ReactNode
 }) {
   const tree = getTree(params.mode)
-  const [Icon, title, description, version] =
+  const [Icon, title, version] =
     params.mode === 'ui'
-      ? [LayoutIcon, 'Next Docs UI', 'The framework', packageJsonUI.version]
-      : [
-          LibraryIcon,
-          'Next Docs Zeta',
-          'The headless library',
-          packageJsonZeta.version
-        ]
+      ? [LayoutIcon, 'Next Docs UI', packageJsonUI.version]
+      : [LibraryIcon, 'Next Docs Zeta', packageJsonZeta.version]
 
   return (
     <main
@@ -37,13 +32,10 @@ export default function Layout({
         sidebar={{
           banner: (
             <div className="relative flex flex-row gap-2 items-center p-2 rounded-lg border bg-card text-card-foreground transition-colors hover:bg-muted/80">
-              <p className="absolute right-2 top-2 text-muted-foreground text-xs">
-                {version}
-              </p>
               <Icon className="w-9 h-9 p-1 shrink-0 border rounded-md text-primary bg-background" />
               <div>
-                <p className="font-medium text-sm">{title}</p>
-                <p className="text-muted-foreground text-xs">{description}</p>
+                <p className="font-medium">{title}</p>
+                <p className="text-muted-foreground text-xs">v{version}</p>
               </div>
             </div>
           )

packages/next-docs-ui/src/components/breadcrumb.tsx

@@ -1,5 +1,5 @@
 import { LayoutContext } from '@/contexts/tree'
-import clsx from 'clsx'
+import { cn } from '@/utils/cn'
 import { ChevronRightIcon } from 'lucide-react'
 import { useBreadcrumb } from 'next-docs-zeta/breadcrumb'
 import Link from 'next/link'
@@ -15,9 +15,9 @@ export function Breadcrumb() {
     <div className="nd-flex nd-flex-row nd-gap-1 nd-text-sm nd-text-muted-foreground nd-items-center">
       {items.map((item, i) => {
         const active = items.length === i + 1
-        const style = clsx(
-          'nd-overflow-hidden nd-overflow-ellipsis nd-whitespace-nowrap',
-          active && 'nd-text-foreground'
+        const style = cn(
+          'nd-whitespace-nowrap nd-overflow-hidden',
+          active ? 'nd-text-foreground nd-font-medium' : 'nd-overflow-ellipsis'
         )
 
         return (

packages/next-docs-ui/src/components/sidebar.tsx

@@ -19,11 +19,11 @@ export type SidebarProps = {
 }
 
 const itemVariants = cva(
-  'nd-flex nd-flex-row nd-items-center nd-gap-2 nd-text-muted-foreground nd-px-2 nd-py-1.5 nd-rounded-md [&_svg]:nd-w-4 [&_svg]:nd-h-4',
+  'nd-flex nd-flex-row nd-font-medium nd-items-center nd-gap-2 nd-text-muted-foreground nd-p-2 nd-rounded-md [&_svg]:nd-w-4 [&_svg]:nd-h-4',
   {
     variants: {
       active: {
-        true: 'nd-text-primary nd-bg-primary/10 nd-font-medium',
+        true: 'nd-text-primary nd-bg-primary/10',
         false: 'hover:nd-bg-accent/50'
       }
     }
@@ -38,16 +38,19 @@ export function Sidebar({ banner, footer }: SidebarProps) {
     <Base.SidebarList
       minWidth={1024} // lg
       className={cn(
-        'nd-flex nd-flex-col',
+        'nd-flex nd-flex-col nd-w-full',
         open
-          ? 'lg:nd-w-[260px]'
+          ? 'lg:nd-w-[250px]'
           : 'lg:nd-w-0 lg:nd-overflow-hidden lg:nd-opacity-0',
         'lg:nd-sticky lg:nd-top-16 lg:nd-h-[calc(100vh-4rem)] lg:nd-transition-[width,opacity]',
-        'max-lg:nd-w-full max-lg:nd-px-8 max-lg:nd-fixed max-lg:nd-inset-y-0 max-lg:nd-right-0 max-lg:nd-bg-background max-lg:nd-z-40 max-lg:nd-pt-16 max-lg:data-[open=false]:nd-hidden sm:max-lg:nd-max-w-sm sm:max-lg:nd-border-l'
+        'max-lg:nd-fixed max-lg:nd-inset-y-0 max-lg:nd-right-0 max-lg:nd-bg-background max-lg:nd-z-40 max-lg:nd-pt-16 max-lg:data-[open=false]:nd-hidden sm:max-lg:nd-max-w-sm sm:max-lg:nd-border-l'
       )}
     >
-      <ScrollArea className="nd-flex-1 [mask-image:linear-gradient(to_top,transparent,white_40px)] max-lg:-nd-mr-4 lg:nd-w-[260px]">
-        <div className="nd-flex nd-flex-col nd-pb-10 nd-pr-4 nd-pt-4 sm:nd-text-sm lg:nd-pt-12">
+      <ScrollArea
+        type="scroll"
+        className="nd-flex-1 [mask-image:linear-gradient(to_top,transparent,white_40px)] lg:nd-w-[250px]"
+      >
+        <div className="nd-flex nd-flex-col nd-pb-10 nd-pt-4 nd-text-medium max-lg:nd-px-8 lg:nd-pr-4 lg:nd-pt-12 lg:nd-text-sm">
           {banner}
           {tree.children.map((item, i) => (
             <Node key={i} item={item} level={1} />
@@ -56,7 +59,7 @@ export function Sidebar({ banner, footer }: SidebarProps) {
       </ScrollArea>
       <div
         className={cn(
-          'nd-flex nd-flex-row nd-items-center nd-gap-2 nd-border-t nd-py-2',
+          'nd-flex nd-flex-row nd-items-center nd-gap-2 nd-border-t nd-py-2 max-lg:nd-px-8',
           !footer && 'lg:nd-hidden'
         )}
       >

packages/next-docs-ui/src/components/ui/scroll-area.tsx

@@ -30,7 +30,7 @@ const ScrollBar = React.forwardRef<
     ref={ref}
     orientation={orientation}
     className={cn(
-      'nd-flex nd-touch-none nd-select-none data-[state=hidden]:nd-animate-out data-[state=hidden]:nd-fade-out',
+      'nd-flex nd-select-none data-[state=hidden]:nd-animate-out data-[state=hidden]:nd-fade-out',
       orientation === 'vertical' && 'nd-h-full nd-w-1.5',
       orientation === 'horizontal' && 'nd-h-1.5 nd-flex-col',
       className

packages/next-docs-ui/tailwind.config.js

@@ -12,6 +12,9 @@ module.exports = {
       }
     },
     extend: {
+      fontSize: {
+        medium: '15px'
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',