add Navbar.className prop (#4203)

Author: dimaMachina

.changeset/kind-cameras-join.md

@@ -0,0 +1,5 @@
+---
+"nextra-theme-docs": patch
+---
+
+add `Navbar.className` prop

docs/app/docs/docs-theme/built-ins/navbar/page.mdx

@@ -15,6 +15,7 @@ import { ToggleVisibilitySection } from 'components/toggle-visibility-section'
 | `chatLink`    | `string{:ts}`            |                                         | URL of the chat link.                                                                  |
 | `chatIcon`    | `ReactNode{:ts}`         | `<DiscordIcon width="24" />{:ts}`       | Icon of the chat link.                                                                 |
 | `children`    | `ReactNode{:ts}`         |                                         | Extra content after last icon.                                                         |
+| `className`   | `string{:ts}`            |                                         | CSS class name.                                                                        |
 
 ## Logo
 

packages/nextra-theme-docs/src/components/navbar/index.tsx

@@ -16,7 +16,8 @@ const propsSchema = z.strictObject({
   projectLink: z.string().optional(),
   projectIcon: element.default(<GitHubIcon height="24" />),
   chatLink: z.string().optional(),
-  chatIcon: element.default(<DiscordIcon width="24" />)
+  chatIcon: element.default(<DiscordIcon width="24" />),
+  className: z.string().optional()
 })
 
 type NavbarProps = z.input<typeof propsSchema>
@@ -33,7 +34,8 @@ export const Navbar: FC<NavbarProps> = props => {
     projectLink,
     projectIcon,
     chatLink,
-    chatIcon
+    chatIcon,
+    className
   } = data
   return (
     <header
@@ -52,7 +54,10 @@ export const Navbar: FC<NavbarProps> = props => {
       />
       <nav
         style={{ height: 'var(--nextra-navbar-height)' }}
-        className="x:mx-auto x:flex x:max-w-(--nextra-content-width) x:items-center x:justify-end x:gap-4 x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)]"
+        className={cn(
+          'x:mx-auto x:flex x:max-w-(--nextra-content-width) x:items-center x:justify-end x:gap-4 x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)]',
+          className
+        )}
       >
         {logoLink ? (
           <NextLink