# Floating nav, blog search bar & crescent dark toggle

**Date:** 2026-06-19
**Branch:** `feature/floating-nav-blog-search` (off `dev`)

## Goal

Three coordinated UI changes, driven by the reference screenshot (a top bar with a
brand, a centered pill search showing a `⌘K` hint, right-side links + a primary
"Dashboard" button, and a crescent-moon dark toggle):

1. **Main nav → floating pill** on marketing pages, styled after
   `docs/assets/navbar.tsx`.
2. **Blog → visible search bar** (centered pill with `⌘K`) below a normal nav.
3. **Dark toggle → crescent moon**, applied everywhere.

## Scope decisions (confirmed with user)

- Floating nav applies to **all marketing pages except `/blog` and `/docs`**.
  - `/docs` already has its own separate layout (`DocsTopBar` + sidebar) — untouched
    except the shared toggle restyle.
  - `/blog` keeps a **normal (non-floating) nav** with our existing items unchanged,
    **plus** a visible search pill in the blog hero.
- Nav items **do not change** — same destinations on every variant (Logo, Services
  mega-menu, Blog/Docs/Pricing, search, language switcher, toggle, Login, Signup).
- The crescent toggle is a restyle of the shared component, so it propagates to the
  nav, blog bar, docs top bar, footer, and mobile menu automatically.

## Architecture

### A. Floating main nav — `components/layout/navbar.tsx`

`Navbar` is already a client component. Add `usePathname()` and branch the desktop
presentation:

- **Blog routes** (`/{lang}/blog` and subpaths): render the **current full-width
  fixed bar** (today's styling) — items unchanged.
- **All other marketing routes**: render the **floating pill** variant.

Floating pill styling (adapted from `docs/assets/navbar.tsx`, applied to *our* markup —
not a rewrite of the dropdowns):

- Container: `sticky top-4 z-50 mx-auto max-w-6xl rounded-full bg-background/80
  backdrop-blur-xl ring-1 ring-hairline shadow-lg` with horizontal padding.
- A spacer offsets the floating bar's height so page content isn't hidden.
- **Keep Headless-UI `Popover` dropdowns** (Services mega-menu) for accessibility;
  only the outer container adopts the pill look. Do **not** port the example's raw
  `motion` `MenuItem`/`Menu` dropdown implementation.
- Mobile bar also becomes a rounded floating pill; the existing Dialog drawer is kept.

The branch keeps a **single mount point** in `app/[lang]/(marketing)/layout.tsx` — no
route-group restructuring.

### B. Blog search bar — visible pill

Extend `components/shared/site-search.tsx` with a `variant` prop:

- `variant="icon"` (default): today's icon-only trigger button.
- `variant="bar"`: a visible pill trigger — rounded-full, full-width-ish, magnifier
  icon + placeholder text ("Search…") + a right-aligned `⌘K` `<kbd>` chip. Clicking it
  (or pressing `⌘K`) opens the **same** existing dialog. No duplicate search logic.

Place the `variant="bar"` search in the **blog index hero**
(`app/[lang]/(marketing)/blog/page.tsx`), centered, matching the screenshot. The blog
keeps its normal nav above it (which retains its own icon search trigger — acceptable
minor redundancy; the hero pill is the prominent, blog-scoped search).

Scope: blog **index** page hero. Category/slug pages are out of scope for this change.

### C. Crescent dark toggle — `components/shared/mode-toggle.tsx`

Restyle to the screenshot's thin crescent-moon icon while keeping the functional
light/dark swap (uses the existing `useTheme` from `providers/theme-provider.tsx`; no
`next-themes`). Because the component is shared, the restyle propagates everywhere it's
used: `navbar.tsx`, `footer.tsx`, `docs-top-bar.tsx`, and the mobile menu.

## Files touched

| File | Change |
|------|--------|
| `components/layout/navbar.tsx` | Floating-pill desktop variant + `usePathname()` branch keeping the full-width bar on `/blog`. |
| `components/shared/site-search.tsx` | Add `variant` prop (`"icon"` default, `"bar"` visible pill). |
| `app/[lang]/(marketing)/blog/page.tsx` | Render `SiteSearch variant="bar"` in the hero. |
| `components/shared/mode-toggle.tsx` | Crescent-moon restyle. |

No dictionary changes expected (reuse `searchLabel` / `searchPlaceholder`). Confirm
during implementation.

## Dependencies

All present: `motion@^12`, `@tabler/icons-react`, `@headlessui/react`, `fuse.js`,
custom `theme-provider`. No new installs.

## Out of scope

- Rewriting dropdowns to the example's `motion` implementation.
- Touching the docs nav/layout beyond the shared toggle restyle.
- Blog category/slug page search bars.
- The pre-existing unrelated working-tree changes (deleted `next-best-practices`
  skills, modified `docs/assets/navbar.tsx`) — left untouched, not committed here.

## Testing / verification

- Visual check via d3k `agent-browser` on `localhost`: marketing page (floating pill),
  `/blog` (normal nav + visible search pill), `/docs` (toggle restyle), light/dark
  swap on each.
- Confirm `⌘K` opens search from both the icon and bar variants.
- Confirm no content is hidden behind the floating bar (spacer height correct).