boltdocs 2.6.2 → 2.7.0

package/src/client/components/ui-base/breadcrumbs.tsx

@@ -2,37 +2,43 @@ import { useBreadcrumbs } from '../../hooks/use-breadcrumbs'
 import { Home } from 'lucide-react'
 import { Breadcrumbs as BreadcrumbsRoot } from '../primitives/breadcrumbs'
 import { cn } from '../../utils/cn'
-import { useConfig } from '../../app/config-context'
 
 export function Breadcrumbs() {
   const { crumbs, activeRoute } = useBreadcrumbs()
-  const config = useConfig()
-  const themeConfig = config.theme || {}
-
   if (crumbs.length === 0) return null
 
-  if (!themeConfig?.breadcrumbs) return null
-
   return (
-    <BreadcrumbsRoot.Root>
+    <BreadcrumbsRoot.Root className="gap-2 text-xs sm:text-sm font-medium">
       <BreadcrumbsRoot.Item>
-        <BreadcrumbsRoot.Link href="/">
+        <BreadcrumbsRoot.Link
+          href="/"
+          className="text-muted hover:text-body transition-colors flex items-center"
+        >
           <Home size={14} />
         </BreadcrumbsRoot.Link>
       </BreadcrumbsRoot.Item>
-      {crumbs.map((crumb, i) => (
-        <BreadcrumbsRoot.Item key={`crumb-${crumb.href}-${crumb.label}-${i}`}>
-          <BreadcrumbsRoot.Separator />
-          <BreadcrumbsRoot.Link
-            href={crumb.href}
-            className={cn({
-              'font-medium text-text-main': crumb.href === activeRoute?.path,
-            })}
+      {crumbs.map((crumb, i) => {
+        const isActive = crumb.href === activeRoute?.path
+        return (
+          <BreadcrumbsRoot.Item
+            key={`crumb-${crumb.href}-${crumb.label}-${i}`}
+            className="gap-2"
           >
-            {crumb.label}
-          </BreadcrumbsRoot.Link>
-        </BreadcrumbsRoot.Item>
-      ))}
+            <BreadcrumbsRoot.Separator className="text-muted/40" />
+            <BreadcrumbsRoot.Link
+              href={crumb.href}
+              className={cn(
+                'transition-colors',
+                isActive
+                  ? 'text-body font-semibold cursor-default pointer-events-none'
+                  : 'text-muted hover:text-body',
+              )}
+            >
+              {crumb.label}
+            </BreadcrumbsRoot.Link>
+          </BreadcrumbsRoot.Item>
+        )
+      })}
     </BreadcrumbsRoot.Root>
   )
 }

package/src/client/components/ui-base/copy-markdown.tsx

@@ -1,14 +1,15 @@
 import { useState } from 'react'
 import { Copy, Check, ExternalLink, ChevronDown } from 'lucide-react'
-import { Button, ButtonGroup, Menu, cn } from '../../components/primitives'
-
+import { Button } from '../primitives/button'
+import { ButtonGroup } from '../primitives/button-group'
+import { Menu } from '../primitives/menu'
+import { cn } from '../../utils/cn'
 import type { ComponentRoute } from '../../types'
 
 export interface CopyMarkdownProps {
   content?: string
   mdxRaw?: string
   route?: ComponentRoute
-  config?: boolean | { text?: string; icon?: string }
 }
 
 const useCopyMarkdown = (content: string) => {
@@ -33,63 +34,70 @@ const useCopyMarkdown = (content: string) => {
   }
 }
 
-export function CopyMarkdown({ content, mdxRaw, config }: CopyMarkdownProps) {
+export function CopyMarkdown({ content, mdxRaw }: CopyMarkdownProps) {
   const displayContent = mdxRaw || content || ''
   const { copied, handleCopy, handleOpenRaw } = useCopyMarkdown(displayContent)
 
-  const isEnabled = config !== false
-  const buttonText =
-    typeof config === 'object'
-      ? config.text || 'Copy Markdown'
-      : 'Copy Markdown'
-
-  if (!isEnabled || !displayContent) return null
+  if (!displayContent) return null
 
   return (
-    <div className="relative inline-flex z-100 flex-shrink-0 w-max translate-y-0 active:translate-y-px transition-transform duration-200">
-      <ButtonGroup className="rounded-xl border border-border-subtle bg-bg-surface/40 backdrop-blur-md transition-all duration-300 hover:border-primary-500/50 hover:shadow-lg hover:shadow-primary-500/5 group overflow-hidden">
+    <div className="relative inline-flex z-100 shrink-0 w-max">
+      <ButtonGroup className="rounded-xl border border-subtle bg-surface transition-all duration-300 hover:border-primary-500/50 group overflow-hidden">
+        {/* Mobile: icon-only copy button */}
+        <Button
+          onPress={handleCopy}
+          className={cn(
+            'md:hidden flex items-center justify-center w-8 h-8 bg-transparent outline-none select-none cursor-pointer border-none',
+            'text-muted transition-all duration-300 hover:bg-primary-500/5 hover:text-body',
+            copied && 'text-emerald-500 hover:bg-emerald-500/5',
+          )}
+          aria-label={copied ? 'Copied!' : 'Copy Markdown'}
+        >
+          {copied ? <Check size={14} /> : <Copy size={14} />}
+        </Button>
+
+        {/* Desktop: full copy button with label */}
         <Button
-          variant="ghost"
           onPress={handleCopy}
-          icon={copied ? <Check size={16} /> : <Copy size={16} />}
-          iconPosition="left"
           className={cn(
-            'px-5 py-2 bg-transparent text-[0.8125rem] font-semibold h-9 border-none shrink-0',
-            'text-text-main transition-all duration-300 hover:bg-primary-500/5',
+            'hidden md:flex items-center gap-2 px-5 py-2 bg-transparent text-[0.8125rem] font-semibold h-9 shrink-0 outline-none select-none cursor-pointer border-none',
+            'text-body transition-all duration-300 hover:bg-primary-500/5',
             copied && 'text-emerald-500 hover:bg-emerald-500/5',
           )}
         >
-          {copied ? 'Copied!' : buttonText}
+          {copied ? <Check size={16} /> : <Copy size={16} />}
+          {copied ? 'Copied!' : 'Copy Markdown'}
         </Button>
 
         <Menu.Trigger placement="bottom end">
           <Button
-            variant="ghost"
-            isIconOnly
-            icon={<ChevronDown size={14} />}
             className={cn(
-              'px-3.5 h-9 border-l border-border-subtle/50 text-text-muted rounded-none bg-transparent shrink-0',
+              'flex items-center justify-center px-2.5 md:px-3.5 h-8 md:h-9 border-none border-l border-subtle/50 text-muted rounded-none bg-transparent shrink-0 outline-none select-none cursor-pointer',
               'transition-all duration-300 hover:bg-primary-500/5 hover:text-primary-500',
             )}
-          />
-          <Menu.Root className="w-52">
-            <Menu.Item onAction={handleCopy}>
+          >
+            <ChevronDown size={14} />
+          </Button>
+          <Menu.Root className="w-52 bg-main border border-subtle rounded-xl p-1.5 shadow-md outline-none flex flex-col gap-0.5 animate-fade-in z-100">
+            <Menu.Item
+              onAction={handleCopy}
+              className="flex items-center px-3 py-2 rounded-lg text-xs font-medium text-body dark:hover:bg-primary-300/50 hover:bg-primary-200/50 transition-colors duration-100 cursor-pointer select-none outline-none group"
+            >
               <Copy
                 size={16}
-                className="size-4 mt-0.5 text-text-muted group-hover:text-primary-500"
+                className="size-4 text-muted dark:group-hover:text-primary-500 group-hover:text-primary-400"
               />
-              <span className="font-medium text-[0.8125rem]">
-                Copy Markdown
-              </span>
+              <span className="ml-2">Copy Markdown</span>
             </Menu.Item>
-            <Menu.Item onAction={handleOpenRaw}>
+            <Menu.Item
+              onAction={handleOpenRaw}
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-body dark:hover:bg-primary-300/50 hover:bg-primary-200/50 transition-colors duration-100 cursor-pointer select-none outline-none group"
+            >
               <ExternalLink
                 size={16}
-                className="size-4 mt-0.5 text-text-muted group-hover:text-primary-500"
+                className="size-4 text-muted dark:group-hover:text-primary-500 group-hover:text-primary-400"
               />
-              <span className="font-medium text-[0.8125rem]">
-                View as Markdown
-              </span>
+              <span className="ml-2">View as Markdown</span>
             </Menu.Item>
           </Menu.Root>
         </Menu.Trigger>

package/src/client/components/ui-base/error-boundary.tsx

@@ -1,52 +1,15 @@
-import type { ErrorInfo, ReactNode } from 'react'
-import { Component } from 'react'
+import { ErrorBoundary as PrimitiveErrorBoundary } from '../primitives/error-boundary'
+import type { ReactNode } from 'react'
 
-import { Button } from '../primitives'
-
-interface Props {
+interface ErrorBoundaryProps {
   children?: ReactNode
   fallback?: ReactNode
 }
 
-interface State {
-  hasError: boolean
-  error?: Error
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  public state: State = { hasError: false }
-
-  public static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error }
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('Uncaught error in Boltdocs Layout:', error, errorInfo)
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return (
-        this.props.fallback || (
-          <div className="flex flex-col items-center justify-center min-h-[40vh] text-center gap-4 px-4">
-            <div className="text-lg font-bold text-red-400">
-              Something went wrong
-            </div>
-            <p className="text-sm text-text-muted max-w-md">
-              {this.state.error?.message ||
-                'An unexpected error occurred while rendering this page.'}
-            </p>
-            <Button
-              className="rounded-lg border border-border-subtle bg-bg-surface px-5 py-2 text-sm font-medium text-text-main transition-colors hover:bg-bg-muted cursor-pointer"
-              onPress={() => this.setState({ hasError: false })}
-            >
-              Try again
-            </Button>
-          </div>
-        )
-      )
-    }
-
-    return this.props.children
-  }
+export function ErrorBoundary({ children, fallback }: ErrorBoundaryProps) {
+  return (
+    <PrimitiveErrorBoundary fallback={fallback}>
+      {children}
+    </PrimitiveErrorBoundary>
+  )
 }

package/src/client/components/ui-base/github-stars.tsx

@@ -18,10 +18,12 @@ export function GithubStars({ repo }: { repo: string }) {
       href={`https://github.com/${repo}`}
       target="_blank"
       rel="noopener noreferrer"
-      className="inline-flex items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-2.5 py-1.5 text-xs font-medium text-text-muted transition-all hover:bg-bg-main hover:border-border-strong hover:text-text-main"
+      className="inline-flex items-center gap-2 rounded-xl border border-subtle bg-surface px-3 py-1.5 text-xs font-semibold text-muted dark:hover:bg-primary-300/50 hover:bg-primary-200/50 transition-colors duration-100 hover:border-primary-500/50 hover:text-body select-none outline-none"
     >
-      <Github className="h-4 w-4" />
-      {stars && <span className="tabular-nums">{stars}</span>}
+      <Github className="h-4 w-4 text-body" />
+      {stars !== null && (
+        <span className="tabular-nums font-medium">{stars} stars</span>
+      )}
     </a>
   )
 }

package/src/client/components/ui-base/index.ts

@@ -3,14 +3,14 @@ export { CopyMarkdown } from './copy-markdown'
 export type { CopyMarkdownProps } from './copy-markdown'
 export { ErrorBoundary } from './error-boundary'
 export { GithubStars } from './github-stars'
-export { Head } from './head'
-export { Loading } from './loading'
 export { Navbar } from './navbar'
 export { NotFound } from './not-found'
 export { OnThisPage } from './on-this-page'
 export { PageNav } from './page-nav'
-export { PoweredBy } from './powered-by'
 export { SearchDialog } from './search-dialog'
 export { Sidebar } from './sidebar'
 export { Tabs } from './tabs'
+export { Banner } from './banner'
 export { ThemeToggle } from './theme-toggle'
+export { LastUpdated } from './last-updated'
+export { Callout } from '../mdx/callout'

package/src/client/components/ui-base/last-updated.tsx

@@ -0,0 +1,27 @@
+interface LastUpdatedProps {
+  date?: string | number | Date
+}
+
+/**
+ * A subtle display for when the page was last updated.
+ * Small, opaque, and positioned at the bottom of the content with a thin top border divider.
+ */
+export function LastUpdated({ date }: LastUpdatedProps) {
+  if (!date) return null
+
+  const d = new Date(date)
+  if (isNaN(d.getTime())) return null
+
+  const formattedDate = d.toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+
+  return (
+    <div className="mt-16 pt-6 border-t border-subtle flex items-center justify-between text-xs text-muted select-none">
+      <span></span>
+      <span className="italic">Last updated on {formattedDate}</span>
+    </div>
+  )
+}

package/src/client/components/ui-base/navbar.tsx

@@ -1,7 +1,6 @@
-import { Suspense, lazy } from 'react'
+import { Suspense, lazy, useState } from 'react'
+import { cn } from '../../utils/cn'
 import { useNavbar } from '../../hooks/use-navbar'
-import { useVersion } from '../../hooks/use-version'
-import { useI18n } from '../../hooks/use-i18n'
 import { useRoutes } from '../../hooks/use-routes'
 import NavbarPrimitive from '../primitives/navbar'
 import { ThemeToggle } from './theme-toggle'
@@ -9,11 +8,12 @@ import { GithubStars } from './github-stars'
 import { Tabs } from './tabs'
 import { useLocation } from 'react-router-dom'
 import type { BoltdocsSocialLink } from '../../../shared/types'
-import { Menu } from '../primitives/menu'
 import { Button } from '../primitives/button'
-import { ChevronDown, Languages } from 'lucide-react'
+import { Menu as MenuIcon, X } from 'lucide-react'
 import { useLocalizedTo } from '../../hooks/use-localized-to'
 import type { NavbarLink as NavbarLinkType } from '../../types'
+import { useUI } from '../../app/ui-context'
+import { VersionSelector, I18nSelector } from './version-i18n'
 
 const SearchDialog = lazy(() =>
   import('./search-dialog').then((m) => ({
@@ -23,63 +23,146 @@ const SearchDialog = lazy(() =>
 
 export function Navbar() {
   const { links, title, logo, logoProps, github, social, config } = useNavbar()
-  const { routes, allRoutes, currentVersion, currentLocale } = useRoutes()
+  const { routes, allRoutes, currentRoute, currentVersion, currentLocale } = useRoutes()
   const { pathname } = useLocation()
+  const { isSidebarOpen, toggleSidebar } = useUI()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
   const themeConfig = config.theme || {}
-  const isDocs = pathname.startsWith('/docs')
+  const isDocs = !!currentRoute?.filePath
   const hasTabs = themeConfig?.tabs && themeConfig.tabs.length > 0
 
   return (
-    <NavbarPrimitive.Root className={hasTabs ? 'border-b-0' : ''}>
+    <NavbarPrimitive.Root
+      className={cn(
+        'border-b border-subtle bg-main/80 backdrop-blur-md',
+        hasTabs && 'border-b-0',
+      )}
+    >
       <NavbarPrimitive.Content>
         <NavbarPrimitive.Left>
+          {isDocs && (
+            <Button
+              onPress={toggleSidebar}
+              className="mr-2 lg:hidden p-1.5 h-8 w-8 flex items-center justify-center bg-transparent border-none outline-none select-none cursor-pointer rounded-xl hover:bg-primary-50/50 transition-colors"
+              aria-label={isSidebarOpen ? 'Close sidebar' : 'Open sidebar'}
+            >
+              {isSidebarOpen ? (
+                <X className="w-5 h-5 text-body" />
+              ) : (
+                <MenuIcon className="w-5 h-5 text-body" />
+              )}
+            </Button>
+          )}
           {logo && (
             <NavbarPrimitive.Logo
               src={logo}
               alt={logoProps?.alt || title}
               width={logoProps?.width ?? 24}
               height={logoProps?.height ?? 24}
+              href="site:/"
             />
           )}
-          <NavbarPrimitive.Title>{title}</NavbarPrimitive.Title>
+          <NavbarPrimitive.Title href="site:/">{title}</NavbarPrimitive.Title>
 
-          {config.versions && currentVersion && <NavbarVersion />}
+          <div className="hidden sm:block">
+            {config.versions && currentVersion && <VersionSelector />}
+          </div>
         </NavbarPrimitive.Left>
         <NavbarPrimitive.Center>
           <Suspense
             fallback={
-              <div className="h-9 w-32 animate-pulse rounded-md bg-bg-surface" />
+              <div className="h-9 w-32 animate-pulse rounded-md bg-surface" />
             }
           >
             <SearchDialog routes={routes || []} />
           </Suspense>
         </NavbarPrimitive.Center>
         <NavbarPrimitive.Right>
+          <Suspense fallback={null}>
+            <div className="lg:hidden">
+              <SearchDialog routes={routes || []} />
+            </div>
+          </Suspense>
           <NavbarPrimitive.Links>
             {links.map((link) => (
               <NavbarLinkItem key={link.href} link={link} />
             ))}
           </NavbarPrimitive.Links>
-          {config.i18n && currentLocale && <NavbarI18n />}
-          <NavbarPrimitive.Split />
-          <ThemeToggle />
-          {github && <GithubStars repo={themeConfig?.githubRepo ?? ''} />}
-          {social.length > 0 && <NavbarPrimitive.Split />}
-          <div className="flex items-center gap-1">
+
+          <div className="hidden sm:flex items-center gap-2">
+            {config.i18n && currentLocale && <I18nSelector />}
+            <NavbarPrimitive.Split className="bg-subtle" />
+          </div>
+
+          <div className="hidden md:block">
+            <ThemeToggle />
+          </div>
+
+          {github && (
+            <div className="hidden md:block">
+              <GithubStars repo={themeConfig?.githubRepo ?? ''} />
+            </div>
+          )}
+          {social.length > 0 && (
+            <div className="hidden md:block">
+              <NavbarPrimitive.Split className="bg-subtle" />
+            </div>
+          )}
+          <div className="hidden md:flex items-center gap-1">
             {social.map(({ icon, link }: BoltdocsSocialLink) => (
               <NavbarPrimitive.Socials
                 key={link}
                 icon={icon}
                 link={link}
-                className="p-1.5"
+                className="p-1.5 text-muted hover:text-body hover:bg-surface rounded-md transition-all focus-visible:ring-2 focus-visible:ring-primary-500/30"
               />
             ))}
           </div>
+
+          <NavbarPrimitive.More
+            onPress={() => setIsMobileMenuOpen(true)}
+            className="text-muted hover:text-body active:scale-90 transition-all focus-visible:ring-2 focus-visible:ring-primary-500/30"
+          />
         </NavbarPrimitive.Right>
       </NavbarPrimitive.Content>
 
+      <NavbarPrimitive.MobileMenu
+        isOpen={isMobileMenuOpen}
+        onClose={() => setIsMobileMenuOpen(false)}
+        className="bg-main/98 backdrop-blur-2xl"
+      >
+        <div className="flex flex-col gap-1">
+          {links.map((link) => (
+            <NavbarMobileLinkItem
+              key={link.href}
+              link={link}
+              onClose={() => setIsMobileMenuOpen(false)}
+            />
+          ))}
+        </div>
+
+        {social.length > 0 && (
+          <div className="mt-6">
+            <div className="px-4 mb-4 text-xs font-bold uppercase tracking-widest text-muted/50">
+              Connect
+            </div>
+            <div className="flex flex-wrap gap-2 px-2">
+              {social.map(({ icon, link }: BoltdocsSocialLink) => (
+                <NavbarPrimitive.Socials
+                  key={link}
+                  icon={icon}
+                  link={link}
+                  className="p-3 bg-surface border border-subtle rounded-xl flex-1 justify-center"
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </NavbarPrimitive.MobileMenu>
+
       {isDocs && hasTabs && themeConfig?.tabs && (
-        <div className="w-full border-b border-border-subtle bg-bg-main">
+        <div className="w-full border-b border-subtle bg-main">
           <Tabs tabs={themeConfig.tabs} routes={allRoutes || routes || []} />
         </div>
       )}
@@ -89,84 +172,95 @@ export function Navbar() {
 
 function NavbarLinkItem({ link }: { link: NavbarLinkType }) {
   const localizedHref = useLocalizedTo(link.href || '')
-  return <NavbarPrimitive.Link {...(link as any)} href={localizedHref} />
-}
-
-function NavbarVersion() {
-  const { currentVersionLabel, availableVersions, handleVersionChange } =
-    useVersion()
+  const { pathname } = useLocation()
+  const active =
+    pathname === localizedHref || pathname.startsWith(localizedHref + '/')
+  const hasItems = link.items && link.items.length > 0
 
-  if (availableVersions.length === 0) return null
+  if (hasItems) {
+    return (
+      <NavbarPrimitive.Dropdown
+        label={
+          <span
+            className={cn(
+              'transition-colors outline-none font-medium focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm px-2 py-1',
+              active ? 'text-primary-500' : 'text-muted hover:text-body',
+            )}
+          >
+            {link.label as any}
+          </span>
+        }
+      >
+        {link.items?.map((item) => (
+          <NavbarPrimitive.DropdownItem
+            key={item.href}
+            href={useLocalizedTo(item.href || '')}
+            label={item.label as any}
+          />
+        ))}
+      </NavbarPrimitive.Dropdown>
+    )
+  }
 
   return (
-    <Menu.Trigger>
-      <Button
-        variant={'outline'}
-        size="sm"
-        rounded="lg"
-        iconPosition="right"
-        icon={<ChevronDown className="w-3.5 h-3.5 text-text-muted/60" />}
-        className="h-8 border-border-subtle/60 bg-bg-surface/30 backdrop-blur-sm transition-all duration-200 hover:border-primary-500/50 hover:bg-primary-500/5"
-      >
-        <span className="font-semibold text-[0.8125rem]">
-          {currentVersionLabel}
-        </span>
-      </Button>
-      <Menu.Root>
-        <Menu.Section items={availableVersions}>
-          {(version) => (
-            <Menu.Item
-              key={`${version.value ?? ''}`}
-              onPress={() => handleVersionChange(version.value)}
-            >
-              {version.label as string}
-            </Menu.Item>
-          )}
-        </Menu.Section>
-      </Menu.Root>
-    </Menu.Trigger>
+    <NavbarPrimitive.Link
+      {...(link as any)}
+      href={localizedHref}
+      active={active}
+      className={cn(
+        'transition-colors outline-none font-medium focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm',
+        active ? 'text-primary-500' : 'text-muted hover:text-body',
+      )}
+    />
   )
 }
 
-function NavbarI18n() {
-  const { currentLocale, availableLocales, handleLocaleChange } = useI18n()
+function NavbarMobileLinkItem({
+  link,
+  onClose,
+}: {
+  link: NavbarLinkType
+  onClose: () => void
+}) {
+  const localizedHref = useLocalizedTo(link.href || '')
+  const { pathname } = useLocation()
+  const active = pathname === localizedHref
+  const hasItems = link.items && link.items.length > 0
 
-  if (availableLocales.length === 0) return null
+  if (hasItems) {
+    return (
+      <div className="flex flex-col gap-1">
+        <div
+          className={cn(
+            'px-3 py-2 text-sm transition-all',
+            active ? 'text-body' : 'text-muted/80 hover:text-body',
+          )}
+        >
+          {link.label as any}
+        </div>
+        <div className="flex flex-col gap-1 pl-4">
+          {link.items?.map((item) => (
+            <NavbarMobileLinkItem
+              key={item.href}
+              link={item}
+              onClose={onClose}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
 
   return (
-    <Menu.Trigger>
-      <Button
-        variant={'outline'}
-        size="sm"
-        rounded="lg"
-        iconPosition="right"
-        icon={<ChevronDown className="w-3.5 h-3.5 text-text-muted/60" />}
-        className="h-8 border-border-subtle/60 bg-bg-surface/30 backdrop-blur-sm transition-all duration-200 hover:border-primary-500/50 hover:bg-primary-500/5 px-2.5"
-      >
-        <div className="flex items-center gap-1.5">
-          <Languages className="w-3.5 h-3.5 text-primary-500" />
-          <span className="font-bold text-[0.75rem] uppercase opacity-90">
-            {currentLocale || 'en'}
-          </span>
-        </div>
-      </Button>
-      <Menu.Root>
-        <Menu.Section items={availableLocales}>
-          {(locale) => (
-            <Menu.Item
-              key={`${locale.value ?? ''}`}
-              onPress={() => handleLocaleChange(locale.value)}
-            >
-              <div className="flex items-center justify-between w-full gap-4">
-                <span>{locale.label as string}</span>
-                <span className="text-[10px] font-bold opacity-40 uppercase tracking-tighter">
-                  {locale.value}
-                </span>
-              </div>
-            </Menu.Item>
-          )}
-        </Menu.Section>
-      </Menu.Root>
-    </Menu.Trigger>
+    <NavbarPrimitive.MobileLink
+      {...(link as any)}
+      href={localizedHref}
+      active={active}
+      onPress={onClose}
+      className={cn(
+        'transition-all',
+        active ? 'text-body' : 'text-muted/80 hover:text-body',
+      )}
+    />
   )
 }