Skip to main content

Documentation Index

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

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

The NavBar component is the site-wide fixed navigation bar that sits at the top of every page in Dev Nexus. It renders the DEV_NEXUS brand mark on the left (a hexagon icon paired with logotype text) and seven thematic route links on the right. The active route is highlighted with neon-lime bracket notation ([ LABEL ]) while inactive links carry a moonlight tint and animate to an electric-violet glow on hover. Route detection is powered by React Router’s useLocation() hook so the active indicator updates automatically on every navigation.

​
Props

NavBar accepts no props — it is a self-contained component that reads the current route from the router context.
Because NavBar relies on useLocation(), it must be rendered inside a React Router <Router> provider. In the Dev Nexus SPA this is satisfied by the top-level BrowserRouter in main.jsx.

​
Route Configuration

Navigation destinations are defined in a static array inside the component. Each entry maps a URL path to a fantasy-themed label: 
const navLinks = [
  { path: '/',             label: 'PORTAL'  },
  { path: '/about',        label: 'ORIGIN'  },
  { path: '/projects',     label: 'SPELLS'  },
  { path: '/skills',       label: 'ARSENAL' },
  { path: '/writing',      label: 'SCROLLS' },
  { path: '/case-studies', label: 'RITUALS' },
  { path: '/contact',      label: 'SUMMON'  },
];
To add or rename a route, edit this array directly in components/NavBar.js.

​
Usage

Drop <NavBar /> once at the application shell level so it persists across all routes without remounting: 
import NavBar from './components/NavBar';
import { Outlet } from 'react-router-dom';

export default function AppShell() {
  return (
    <>
      <NavBar />
      <main className="pt-16"> {/* offset for fixed bar height */}
        <Outlet />
      </main>
    </>
  );
}

​
Visual Behavior

StateAppearance
Brand / logoHexagon icon + DEV_NEXUS logotype in moonlight white, left-aligned
Inactive linkmoonlight/70 opacity text, no decoration
Hover (inactive)Transitions to electric-violet with a soft glow halo
Active routeWrapped in [ ] brackets, rendered in neon-lime with a lime glow
Nav containerGlassmorphism panel — dark translucent background with backdrop blur
MobileNav links are hidden on small viewports; no hamburger menu exists in the current build
The bar is position: fixed at top: 0 and spans the full viewport width, so page content must be padded at the top (typically pt-16) to avoid being hidden beneath it.

​
Customization Tips

Add a new route link: Append an object to the navLinks array with a path and label: 
{ path: '/grimoire', label: 'GRIMOIRE' },
Change the active-link color: The neon-lime active style is applied via the glow-lime and text-neon-lime Tailwind utilities. Swap these in the NavBar.js class string for any theme color defined in your tailwind.config.js. Add a mobile hamburger menu: The current build intentionally omits a mobile drawer. To add one, introduce a useState boolean toggle for menu-open state and conditionally render a full-screen overlay or slide-in drawer beneath the bar. Adjust glassmorphism intensity: The backdrop blur and background opacity are set via Tailwind’s backdrop-blur-* and bg-opacity-* utilities on the nav container. Increase backdrop-blur-xl or decrease the background alpha for a more or less frosted appearance.
Keep labels short (≤ 8 characters) so the seven-link row fits on a 1280 px desktop viewport without wrapping. The current fantasy-label set (PORTAL, ARSENAL, etc.) is intentionally compact for this reason.

Build docs developers (and LLMs) love

Get started for freeTalk to us