Add routes and navigation

Routes decide what renders. Navigation decides how people find it. Update both deliberately rather than treating a menu item as a route definition.

Create a small page

Create src/routes/pages/WorkspaceNotes.tsx in your application copy:

import { Card } from "react-bootstrap";
import PageHeader from "../../components/page/PageHeader";

export default function WorkspaceNotes() {
  return (
    <>
      <PageHeader
        title="Workspace notes"
        description="A place for team guidance."
      />
      <Card>
        <Card.Body>Add your workspace content here.</Card.Body>
      </Card>
    </>
  );
}

This is a new example you add, not a file already shipped by Totems. PageHeader supplies the page-level heading. Keep the surrounding layout in the existing application shell.

Register the route

In src/App.tsx, add a lazy import alongside the existing lazy pages:

const WorkspaceNotes = lazy(() => import("./routes/pages/WorkspaceNotes"));

Add this element inside the existing Routes block:

<Route path="/workspace-notes" element={<WorkspaceNotes />} />

The existing Suspense boundary provides loading feedback. Start the demo and visit /workspace-notes directly before adding a menu link.

Add a navigation entry

In src/components/navigation/appNav.data.tsx, add an item to the appropriate section's items array:

{
  key: "workspace-notes",
  label: "Workspace notes",
  to: "/workspace-notes",
  icon: <i className="material-symbols-outlined" aria-hidden="true">description</i>,
},

Use a unique key. This shared data feeds the navigation variants; avoid hard-coding another copy of the link into each renderer.

For grouped links, follow the existing sub entries. A submenu's end: true requests an exact match. activePath can match a parameterized detail route, as the Projects overview entry does. Check list, create, and detail states separately so a broad detail pattern does not highlight the wrong destination.

Verify the page journey

Check the link in horizontal, vertical, and mobile navigation. Open the URL in a new tab, use Back and Forward, and reload it. A reload failure on your production host often means the host is missing its SPA fallback; it does not necessarily mean the React route is wrong.

For detail-page back buttons, give PageHeader an explicit back={{ to: "/workspace-notes" }} destination when appropriate. back={true} follows browser history and can leave your app when the page was opened directly.

The current PageHeader back button is hidden below 768px. If your mobile flow needs an in-app back action, provide another visible navigation control and test its destination and focus behavior.

Remove unused menu items and their routes together when adapting the template. Hiding a menu entry is not access control; your application must enforce permissions independently.