UI: Update Home Layout navbar design

.changeset/fine-baboons-cough.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Update Home Layout navbar design

apps/docs/app/docs/[...slug]/page.tsx

@@ -81,7 +81,7 @@ export default async function Page(props: {
         <PageTOCPopover>
           <PageTOCPopoverTrigger />
           <PageTOCPopoverContent>
-            <PageTOCPopoverItems variant="clerk" />
+            <PageTOCPopoverItems />
           </PageTOCPopoverContent>
         </PageTOCPopover>
       )}

packages/ui/src/components/accordion.tsx

@@ -80,7 +80,7 @@ export const Accordion = forwardRef<
       <AccordionPrimitive.Item
         ref={ref}
         value={value}
-        className={cn('group/accordion relative scroll-m-20', className)}
+        className={cn('scroll-m-24', className)}
         {...props}
       >
         <AccordionPrimitive.Header
@@ -88,8 +88,8 @@ export const Accordion = forwardRef<
           data-accordion-value={value}
           className="not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent"
         >
-          <AccordionPrimitive.Trigger className="flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none">
-            <ChevronRight className="size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion:rotate-90" />
+          <AccordionPrimitive.Trigger className="group flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none">
+            <ChevronRight className="size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90" />
             {title}
           </AccordionPrimitive.Trigger>
           {id ? <CopyButton id={id} /> : null}

packages/ui/src/components/ui/button.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none',
   {
     variants: {
       color: {

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

@@ -34,22 +34,14 @@ export function Navbar(props: ComponentProps<'div'>) {
         id="nd-nav"
         {...props}
         className={cn(
-          'fixed top-(--fd-banner-height) z-40 box-content backdrop-blur-lg max-w-fd-container -translate-x-1/2 border-b transition-colors lg:mt-2 lg:[--fd-padding:1rem] lg:rounded-2xl lg:border',
+          'fixed top-(--fd-banner-height) z-40 inset-x-0 backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container',
           value.length > 0 ? 'shadow-lg' : 'shadow-sm',
           (!isTransparent || value.length > 0) && 'bg-fd-background/80',
           props.className,
         )}
-        style={
-          {
-            width:
-              'calc(100% - var(--fd-padding,0px) - var(--removed-body-scroll-bar-size,0px))',
-            left: 'calc(50% - var(--removed-body-scroll-bar-size,0px) / 2)',
-            ...props.style,
-          } as object
-        }
       >
         <NavigationMenuList
-          className="flex h-14 w-full items-center px-4 lg:h-12"
+          className="flex h-14 w-full items-center px-4"
           asChild
         >
           <nav>{props.children}</nav>