Skip to main content

Documentation Index

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

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

PortalNav renders the site’s navigation bar, featuring a Sigil icon and text label for each route. On mobile it collapses into a hamburger drawer; on desktop it expands to a horizontal flex row with backdrop blur. It sits at z-40 with a bg-surface/80 backdrop-blur-md background on desktop, keeping the nav readable over both the ParticleField and any page content that scrolls beneath it.

​
Navigation Items

Each route in the template is represented by a nav item with its own Sigil glyph and neon accent color. The table below lists the full set of built-in items as defined in the navItems array inside PortalNav.js:
RouteLabelSigil IDColor
/Portalhomepurple
/aboutOriginaboutcyan
/projectsConjured Worksprojectsmagenta
/skillsArcanaskillslime
/writingTomeswritingpurple
/case-studiesRitual Reportscase-studiescyan
/contactCast Messagecontactmagenta

​
Active State

PortalNav uses React Router’s <NavLink> component for each route. NavLink automatically applies an active class to the link that matches the current route. Sys.Witch V2’s styles use this class to trigger the neon highlight — the label and Sigil glow in the item’s assigned color when the route is active, providing clear visual feedback about the current location.

​
Mobile Behavior

On small screens, the horizontal nav row is hidden and replaced with a hamburger menu button (fixed top-4 right-4 z-50). Tapping the button toggles a fullscreen overlay. When closed, the nav is translated off the top of the viewport using -translate-y-full; when open, it snaps back to translate-y-0 and expands to cover the full screen (inset-0) with a bg-base/95 backdrop-blur-xl background. Inside the open drawer, each nav item renders as a full-width row with the Sigil icon on the left and the label text on the right, making tap targets comfortable on touch devices.

​
Customizing Nav Items

To add or remove a route from the navigation, edit the navItems array inside PortalNav.js: 
// Inside PortalNav.js — add a new nav item to the navItems array
const navItems = [
  { path: '/', label: 'Portal', sigilId: 'home', color: 'purple' },
  { path: '/about', label: 'Origin', sigilId: 'about', color: 'cyan' },
  // Add your new route:
  { path: '/gallery', label: 'Gallery', sigilId: 'rune-5', color: 'lime' },
  // ...
];
Remember to also add the corresponding route to your React Router config in main.jsx (or wherever your router is defined), and create the page component it points to.
Pick a sigilId from the 18 available glyphs in data/sigils.js. Assign a color (purple, magenta, cyan, lime) that complements the existing palette without clashing with adjacent nav items.

Build docs developers (and LLMs) love

Get started for freeTalk to us