Skip to main content

Documentation Index

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

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

LeftNav is the persistent navigation sidebar that links all seven pages of the portfolio. It uses React Router’s NavLink for active-state detection and Framer Motion for icon animations — spinning the active route’s icon in a continuous 360° loop to reinforce the Y2K aesthetic.

​
Navigation Routes

The sidebar is driven by a hardcoded array of route objects. All seven entries are listed below:
PathDisplay LabelIcon
/Home.exeSparkles
/aboutAbout_MeUser
/projectsOpen_ProjectsFolderOpen
/skillsCharms_&_AbilitiesZap
/writingArchive.logBookOpen
/case-studiesCase_FilesFileText
/contactSign_GuestbookMessageSquare
All icons are sourced from lucide-react.

​
Active State Styles

React Router’s NavLink component provides the isActive boolean used to switch between active and inactive class sets. Active route:
  • Text color: text-y2k-lime
  • Background: bg-y2k-violet/50
  • Border: marching-ants-border CSS animation (animated dashed outline)
Inactive route:
  • Text color: text-y2k-lavender
  • Hover text: hover:text-y2k-cyan
  • Hover background: hover:bg-y2k-violet/30

​
Icon Animation

When a route is active, its icon continuously rotates 360° using Framer Motion. The animation configuration is: 
animate={{ rotate: 360 }}
transition={{
  duration: 2,
  repeat: Infinity,
  ease: 'linear'
}}
Inactive route icons animate to rotate: 0 — returning to their resting position if the route was previously active.

​
Customizing Nav Items

Navigation entries are defined in the internal Pd array inside LeftNav.js. To add, remove, or reorder routes, modify that array. Each entry follows this shape: 
{
  path: '/about',
  label: 'About_Me',
  icon: UserIcon  // lucide-react component
}
The label value is rendered verbatim as the link text, so underscores and dots are intentional — they are part of the Y2K filename aesthetic (e.g. Archive.log, Home.exe).

​
Container

The outer <nav> element uses w-full lg:w-64 shrink-0 flex flex-col gap-4 — full-width below the lg breakpoint and a fixed 64 unit column on large screens. The inner panel applies border-chunky-magenta bg-y2k-black/80 p-4 to give the navigation its bordered, semi-transparent look.

​
No Props

LeftNav takes no props. It reads the current route internally via React Router’s useLocation hook and derives active state from NavLink’s built-in isActive callback. All data is self-contained within the component.

Build docs developers (and LLMs) love

Get started for freeTalk to us