skillup-navbar

Shared site navbar for every Base44 page served under skillup.global — login state, account menu, and the main/secondary/tertiary menus October's backend already manages, so adding a nav link in October doesn't require a separate Base44 deploy. Backed by Skillup.NavBridge (GET /api/v1/nav/session, GET /api/v1/nav/menu, POST /api/v1/nav/logout) — see 03-minor-launch-plan.md §2.2.

Install

npm install skillup-navbar

Peer dependencies (already present in every in-scope Base44 app, per §5 — not bundled into this package):

npm install react react-dom @radix-ui/react-dropdown-menu lucide-react

Tailwind: this package ships plain Tailwind utility classes in its compiled JS, not its own stylesheet. Add it to your app's tailwind.config.js content array or the classes won't be generated:

content: [
  "./src/**/*.{js,jsx,ts,tsx}",
  "./node_modules/skillup-navbar/dist/**/*.js",
],

Usage — a real, live app

import { ConnectedNavbar } from "skillup-navbar";

<ConnectedNavbar homeUrl="/" />

logoSrc defaults to October's own SkillUp logo (DEFAULT_LOGO_SRC, currently https://skillup.global/themes/skillup/assets/images/logo3x.png) — no need to source or pass your own. Override it only if a consuming app genuinely needs a different mark:

<ConnectedNavbar homeUrl="/" logoSrc="/my-custom-logo.svg" />

ConnectedNavbar fetches real session/menu data from /api/v1/nav/* on mount. This only produces a real logged-in state when the page is actually served same-site with October (i.e. under skillup.global via the Cloudflare Worker, §3.2) — on a bare *.base44.app preview URL it will correctly and harmlessly render logged-out, since there's no shared session cookie across origins.

Running a consuming app locally against Base44's own dev server

If you're running the consuming app with Base44's local dev tooling (base44 dev or similar, not a plain vite dev), don't proxy a shared /api prefix — Base44's own SDK routes its own traffic through that same origin under /api/apps/* (app auth/checkAppState, function invocation, analytics). A broad /api proxy rule is prefix-matched, so it silently swallows that traffic too and sends it to October instead of Base44's local backend — breaking auth and every Base44 function call in the app, not just the navbar (confirmed in practice: Base44Error: Network Error in AuthContext, course list breaking, everything under /api/* misrouted).

Fix: scope the proxy to the navbar's exact path, /api/v1/nav, and nothing broader:

// vite.config.js
server: {
  proxy: {
    "/api/v1/nav": {
      target: "https://staging.skillup.global",
      changeOrigin: true,
      secure: true,
    },
  },
},

No apiBase prop override needed for this — the navbar already calls exactly /api/v1/nav/* by default, so a proxy rule scoped to that same path coexists fine with Base44's own /api/apps/* traffic on the same origin. apiBase (below) exists for the rarer case where even /api/v1/nav isn't safe to claim in a given consuming app for some other reason — ask what else lives under /api/* in that app before reaching for a broad rule, or default to the narrowest possible scope.

Don't try a cross-origin absolute URL as the proxy target's alternative (e.g. fetching https://staging.skillup.global/api/v1/nav/session directly from the browser, no proxy) — October doesn't send CORS headers (correctly, by design: same-site requests never need them), so the browser blocks a direct cross-origin fetch regardless of the URL. This has to stay a server-side proxy either way.

Usage — fixture-driven preview (style guide, tests, Storybook-like pages)

Use the presentational Navbar directly with mock data instead — no network calls, works anywhere:

import { Navbar } from "skillup-navbar";

<Navbar
  homeUrl="/"
  session={{
    loggedIn: true,
    user: { name: "Jane Student", avatar_url: null },
    accountMenu: [{ key: "dashboard", title: "Dashboard", url: "/account/dashboard" }],
    logoutToken: "fixture",
  }}
  menus={{
    mainMenu: [{ title: "Courses", url: "/courses", icon: null, external: false, children: [] }],
    secondaryMenu: [],
    tertiaryMenu: [],
  }}
/>

This is exactly what the design system's preview/style-guide Base44 app (§5) should use to show every state (logged-in, logged-out, account-menu open, a menu item with children) without needing a real October session.

Versioning

Pinned exactly per consuming app, never a ^/~ range — see the repo README for the update workflow.