Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/sys-witch/llms.txt

Use this file to discover all available pages before exploring further.

Navigation in Sys.Witch V2 is managed by a single component: components/layout/PortalNav.js. This file renders the site-wide navigation bar that appears on every page, providing both the desktop horizontal link row and the mobile full-screen overlay. Because the theme is a React single-page application powered by React Router v6, all navigation uses client-side routing — there are no separate .html files per page. Each nav item maps to a route path, and React Router handles the page transition without a full browser reload.

​
How Navigation Works

PortalNav.js reads its link configuration from a static array named Nd (the nav items array) defined at the top of the component. Each entry in that array describes one nav item: the route path, the display label, the decorative sigil ID, and the neon accent color. The component maps over this array to render a <NavLink> for each entry using React Router’s NavLink component, which automatically applies an active class when the current route matches the link’s path. The nav is included in the top-level layout wrapper that wraps every route, so it appears consistently across the entire application without needing to be imported on a per-page basis.

​
Default Navigation Items

The Nd array in PortalNav.js defines these seven routes in order:
LabelPathSigil IDAccent Color
Portal/homepurple
Origin/aboutaboutcyan
Conjured Works/projectsprojectsmagenta
Arcana/skillsskillslime
Tomes/writingwritingpurple
Ritual Reports/case-studiescase-studiescyan
Cast Message/contactcontactmagenta
The nav labels are thematic — “Portal” for the home route, “Origin” for about, “Conjured Works” for projects, “Arcana” for skills, “Tomes” for writing, “Ritual Reports” for case studies, and “Cast Message” for contact. Update the label field in the Nd array if you want to use different display names.

​
Nav Item Structure

Each object in the Nd array follows this shape: 
// components/layout/PortalNav.js — nav item shape
{
  path: "/projects",
  label: "Conjured Works",
  sigilId: "projects",
  color: "magenta"
}
FieldDescription
pathThe React Router route path — must match a <Route path> in the app’s router config
labelThe display text rendered in the nav bar
sigilIdReferences a sigil in data/sigils.js — controls the decorative SVG icon beside the label
colorOne of "purple", "cyan", "magenta", or "lime" — controls the active-state neon accent

​
Adding a New Page

To add a new section to the portfolio — for example, a Work History or Testimonials page — follow these steps:
1

Create the new route component

Create a new page component in the pages/ directory (or whichever directory your page components live in), following the structure of an existing page like About.js or Projects.js.
2

Register the route in the router config

Open the file where your React Router routes are defined and add a new <Route> entry for the new page path:
<Route path="/work" element={<WorkHistory />} />
The path value must exactly match what you will use in the Nd nav item array.
3

Add the nav item to PortalNav.js

Open components/layout/PortalNav.js and add a new object to the Nd array, using the same shape as the existing entries:
{
  path: "/work",
  label: "Work History",
  sigilId: "work",
  color: "lime"
}
Place the new object at the position in the array where you want the link to appear in the nav bar. The desktop nav renders links in the order they appear in the array.
4

Add content and test the route

Populate the new page component with your content. Then run the app locally and confirm the new nav link navigates to the correct page, and that the active-state styling applies correctly when the route is current.

​
Removing a Page

To remove a page from the navigation, delete its object from the Nd array in PortalNav.js. The route itself can remain registered in the router — an unlinked route is still accessible at its direct URL but simply will not appear in the nav. 
// Remove the object for the route you no longer want in the nav
// Before:
{ path: "/work", label: "Work History", sigilId: "work", color: "lime" }

// After: delete the entry entirely from the Nd array

​
Mobile Navigation Behavior

On mobile viewports, PortalNav.js renders the nav links as a full-screen overlay that slides in from above the viewport. The overlay is toggled by a hamburger-style button fixed in the top-right corner at z-index: 50. The nav panel itself sits at z-index: 40. Visibility is controlled by toggling between two Tailwind translate classes driven by a React state boolean: 
/* Visible state — overlay slides into the viewport */
.translate-y-0     { transform: translateY(0); }

/* Hidden state — overlay is pushed above the viewport */
.-translate-y-full { transform: translateY(-100%); }
When the overlay is open, it uses backdrop-blur-xl to blur the page content behind it. On desktop breakpoints (md: and above), the nav switches to a fixed horizontal bar with md:backdrop-blur-md, and the translate class is permanently overridden to md:translate-y-0 so the bar is always visible regardless of the mobile toggle state. Clicking any nav link calls the toggle state setter to close the mobile overlay, so the user is not left staring at a full-screen nav after navigating.
If you add many new pages to the nav, test the mobile overlay carefully. A large number of links can cause the overlay content to overflow the viewport height on very small screens. Consider grouping secondary pages under a separate section if the nav grows significantly.

​
Renaming a Route

If you rename a route — for example, changing /case-studies to /deep-dives — you must update it in three places to keep everything consistent:
1

Update the route definition

Change the path attribute on the <Route> in your router config to the new path string.
2

Update PortalNav.js

Update the path field in the matching object in the Nd array to the new path string.
3

Search for other references

Search the entire project for the old path string and update any remaining references — for example, in <Link to> or <NavLink to> components within page content, or in any programmatic navigate() calls.
4

Test navigation

Run the app locally and confirm the renamed route resolves correctly, the nav active state applies on that route, and no other links are broken.

​
Testing Navigation

After any change to the navigation — adding a route, removing a link, or renaming a path — run through this checklist before publishing:

Check every nav link

Click every link in both the desktop nav and the mobile overlay. Confirm each one loads the correct page with no blank screen or routing error.

Test on mobile

Open the site on a mobile-width viewport or use browser DevTools to simulate a small screen. Confirm the mobile overlay opens, closes, and that all links are tappable.

Verify active states

Navigate to each route and confirm the correct nav item lights up in its assigned neon accent color. The NavLink active class is applied automatically when the current path matches.

Test the home route

The home route uses path="/" — confirm it only activates the Portal link when on the root path, not on every route, since all paths start with /.
Do not remove or rename the root route (path="/"). It is the application entry point. If the root route is missing, React Router will not match any URL and the app will render a blank page or a 404 for the root URL.

Build docs developers (and LLMs) love

Get started for freeTalk to us