Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/magical/llms.txt

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

The Navigation component is the persistent top-level header of the Magical Portfolio. It mounts once at the root of the app layout and handles route-linking, active-state indication, and a scroll-triggered visual transition — all animated with Framer Motion.

​
Scroll Behaviour

On mount, the header is fully transparent with generous vertical padding (py-6). Once the user scrolls past 50px, the header transitions into a frosted glass bar:
StateClasses applied
At top (scrollY ≤ 50)py-6 (transparent background)
Scrolled (scrollY > 50)bg-mystic-950/80 backdrop-blur-md border-b border-mystic-800/50 py-3
The header itself slides down from above on first render via a Framer Motion animation (initial: { y: -100 } → animate: { y: 0 }, duration 0.8 s, easeOut easing).

​
Nav Items

Seven routes are defined in the component’s navItems array, each paired with a label and a Lucide React icon:
PathLabelIcon
/PortalSparkles
/aboutChronicleBook
/projectsGrimoireCodeXml
/skillsAffinitiesHexagon
/writingTomesScrollText
/case-studiesRitualsFlaskConical
/contactSummonSend
Each item renders its icon alongside the label text, providing recognisable visual anchors even at a glance.

​
Active State & Spring Indicator

Active and inactive nav items are styled differently through Tailwind utility classes:
  • Active: text-mystic-mint
  • Inactive: text-slate-400 hover:text-mystic-teal
Beneath the active item, a shared Framer Motion element (layoutId="nav-indicator") renders an underline marker. When the active route changes, Framer Motion’s layout animation smoothly springs the underline across to the new item — no manual transition code required.

​
Mobile Behaviour

On viewports narrower than the md breakpoint, the full navigation list is hidden (hidden md:flex). A hamburger button rendered with the Hexagon icon from Lucide React is displayed in its place. Expanding the mobile menu is handled by toggling a local open/closed state in the component.

​
Usage

Place <Navigation /> once at the root of your app layout, above all page content: 
import { Navigation } from './components/Navigation';

// Place at the top of your app layout
<Navigation />
The component is self-contained — it reads the current route internally (via React Router’s useLocation) and manages its own scroll listener, so no props are required.

Build docs developers (and LLMs) love

Get started for freeTalk to us