feat(create-bestax): add controlled-Burger Navbar to the landing archetype

create-bestax/src/constants.ts

@@ -139,6 +139,9 @@ ${setupLines.join('\n')}
   take a \`gap\` prop, so prefer that there).
 - Compose existing components before writing custom CSS; theme via \`Theme\` and \`--bulma-*\`
   variables, never hardcoded colors.
+- \`Navbar.Burger\`/\`Navbar.Menu\` are controlled — wire \`active\` via state on both, and pair
+  \`Navbar fixed="top"\` with the \`has-navbar-fixed-top\` class on \`<html>\` (never an inline
+  padding offset).
 - There is no test runner or Storybook in this app — don't assume one.
 
 ## AI skills

skills/bestax-layout-scaffold/SKILL.md

@@ -45,8 +45,12 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
   `height: 100%` on the card doesn't help — the column's height is auto).
 - Rely on Bulma's responsive defaults: `Columns` sit side by side on tablet and up and stack on
   mobile. Add responsive `size*` props only to tune the breakpoints.
-- For a `fixed="top"` `Navbar`, add the `has-navbar-fixed-top` class to `<html>` so content is not
-  hidden behind it — the library does not do this automatically.
+- `Navbar.Burger`/`Navbar.Menu` are **controlled** — wire the same `active` state to both:
+  `active` on `Navbar.Menu` shows/hides the mobile menu, while `active` + `onClick` on
+  `Navbar.Burger` make the burger toggle it and animate. Left unwired, clicking the burger
+  does nothing (no error, silent failure). For a `fixed="top"` `Navbar`, add the
+  `has-navbar-fixed-top` class to `<html>` so content is not hidden behind it — the library
+  does not do this automatically, and an inline padding offset is not a substitute.
 - **Style with helper props, not inline `style`.** Use `m`/`p` spacing (`mt="4"` = 1rem),
   `textAlign="centered"`, and `textColor`/`bgColor` instead of `style={{ marginTop, textAlign,
 color }}`. Set the app-wide icon library once with `<ConfigProvider iconLibrary="…">` at the root
@@ -69,7 +73,7 @@ color }}`. Set the app-wide icon library once with `<ConfigProvider iconLibrary=
 ## Examples
 
 - `examples/app-shell.tsx` — fixed `Navbar` + sidebar `Menu` + content (dashboard).
-- `examples/landing.tsx` — `Hero` + `Section`s + `Footer`.
+- `examples/landing.tsx` — fixed `Navbar` (controlled burger) + `Hero` + `Section`s + `Footer`.
 - `examples/centered.tsx` — centered single column (auth/settings).
 - `examples/card-grid.tsx` — multiline `Columns` of `Card`s (catalog).
 - `examples/content-page.tsx` — hero + feature cards + CTA styled with helper props (no inline
@@ -82,6 +86,7 @@ color }}`. Set the app-wide icon library once with `<ConfigProvider iconLibrary=
 - [ ] Use `Grid`/`Cell` for uniform grids (equal heights per row, free); `Columns`/`Column`
       for proportional or per-breakpoint side-by-side layout — with the flex recipe when its
       cards must match height.
+- [ ] Wire `active` state to **both** `Navbar.Burger` and `Navbar.Menu` (they are controlled).
 - [ ] For a fixed navbar, add `has-navbar-fixed-top` to `<html>`.
 - [ ] Do not use `Tile` — it is not shipped.
 - [ ] Style with helper props (`mt`/`p`, `textAlign`, `textColor`), not inline `style`.

skills/bestax-layout-scaffold/examples/landing.tsx

@@ -1,8 +1,18 @@
-// Marketing / landing page — Hero + stacked Sections + Footer.
+// Marketing / landing page — fixed top Navbar + Hero + stacked Sections + Footer.
 // Each Section stacks vertically; the feature Columns collapse to one per row on
 // mobile (Bulma columns stack below the tablet breakpoint).
-import React from 'react';
+//
+// The Navbar's burger/menu is CONTROLLED: `active` on Navbar.Menu shows/hides
+// the mobile menu, while `active` + `onClick` on Navbar.Burger make the burger
+// toggle it and animate. Wire the same state to both — left unwired, clicking
+// the burger does nothing; desktop looks fine and nothing errors, so the
+// failure is silent. A fixed-top navbar
+// also needs the `has-navbar-fixed-top` class on <html> so the page is padded
+// below it (never an inline padding offset) — Bulma requires this and the
+// library does NOT add it for you.
+import React, { useEffect, useState } from 'react';
 import {
+  Navbar,
   Hero,
   Section,
   Container,
@@ -24,8 +34,38 @@ const FEATURES = [
 ];
 
 export default function LandingPage() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    document.documentElement.classList.add('has-navbar-fixed-top');
+    return () => {
+      document.documentElement.classList.remove('has-navbar-fixed-top');
+    };
+  }, []);
+
   return (
     <>
+      <Navbar fixed="top">
+        <Navbar.Brand>
+          <Navbar.Item href="#">Acme</Navbar.Item>
+          <Navbar.Burger
+            active={menuOpen}
+            onClick={() => setMenuOpen(open => !open)}
+            aria-label="menu"
+            aria-expanded={menuOpen}
+          />
+        </Navbar.Brand>
+        <Navbar.Menu active={menuOpen}>
+          <Navbar.Start>
+            <Navbar.Item href="#">Features</Navbar.Item>
+            <Navbar.Item href="#">Pricing</Navbar.Item>
+          </Navbar.Start>
+          <Navbar.End>
+            <Navbar.Item href="#">Sign in</Navbar.Item>
+          </Navbar.End>
+        </Navbar.Menu>
+      </Navbar>
+
       <Hero color="primary" size="medium">
         <Hero.Body>
           <Container textAlign="centered">

skills/bestax-layout-scaffold/references/archetypes.md

@@ -19,6 +19,8 @@ app".
 **Skeleton:**
 
 ```tsx
+const [open, setOpen] = useState(false); // controls the burger + mobile menu
+
 <>
   <Navbar fixed="top" color="dark">
     <Navbar.Brand>
@@ -54,7 +56,7 @@ app".
       </Column>
     </Columns>
   </Container>
-</>
+</>;
 ```
 
 **Required:** add `has-navbar-fixed-top` to `<html>` (see `examples/app-shell.tsx`) so content is
@@ -74,7 +76,29 @@ pricing page. The default for "build me a site/page".
 **Skeleton:**
 
 ```tsx
+const [open, setOpen] = useState(false); // controls the burger + mobile menu
+
 <>
+  <Navbar fixed="top">
+    <Navbar.Brand>
+      <Navbar.Item href="#">Brand</Navbar.Item>
+      <Navbar.Burger
+        active={open}
+        onClick={() => setOpen(o => !o)}
+        aria-label="menu"
+      />
+    </Navbar.Brand>
+    <Navbar.Menu active={open}>
+      <Navbar.Start>
+        <Navbar.Item href="#">Features</Navbar.Item>
+        <Navbar.Item href="#">Pricing</Navbar.Item>
+      </Navbar.Start>
+      <Navbar.End>
+        <Navbar.Item href="#">Sign in</Navbar.Item>
+      </Navbar.End>
+    </Navbar.Menu>
+  </Navbar>
+
   <Hero color="primary" size="medium">
     <Hero.Body>
       <Container textAlign="centered">
@@ -110,10 +134,18 @@ pricing page. The default for "build me a site/page".
       <Content textAlign="centered">{/* footer */}</Content>
     </Container>
   </Footer>
-</>
+</>;
 ```
 
-**Responsive:** `Section`s already stack vertically. The feature `Columns` collapse to one feature
+**Required:** `Navbar.Burger`/`Navbar.Menu` are **controlled** — wire the same `active` state to
+both: `active` on `Navbar.Menu` shows/hides the mobile menu, and `active` + `onClick` on
+`Navbar.Burger` make the burger toggle it and animate (a bare `<Navbar.Burger />` does nothing
+when clicked, with no error). And add
+`has-navbar-fixed-top` to `<html>` (see `examples/landing.tsx`) so content is not hidden behind
+the fixed navbar — never an inline padding offset.
+
+**Responsive:** the navbar collapses to a burger on mobile (`Navbar.Burger` + `Navbar.Menu active`).
+`Section`s already stack vertically. The feature `Columns` collapse to one feature
 per row on mobile. Use `Hero size="large"` / `"fullheight"` for a taller hero.
 
 **Hero CTAs:** on a colored hero use **filled** buttons only — `color="light"` for the primary