Skip to main content

Documentation Index

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

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

The Navbar is a sticky top navigation bar that anchors itself to the top of the viewport as you scroll (sticky top-0 z-50). It uses the bg-win-gray background and a border-b-2 border-black shadow-md underline to mimic the look of a classic Windows 98 title bar row. Each navigation link is rendered as a raised button using Tailwind utility classes, and the active link flips to a sunken/inset appearance — exactly like a depressed toolbar button in Win98.

​
Nav Link Visual States

Every link in the navbar cycles through four distinct visual states driven by Tailwind classes and React Router’s active-route detection:
StateClasses AppliedEffect
Active (current route)bg-white shadow-win-in text-blackAppears pressed/inset — the classic Win98 “button held down” look
Inactivebg-win-gray shadow-win-out text-blackRaised button appearance with an outset shadow
Hoverhover:bg-gray-200Subtle background lightening on mouse-over
Active pressactive:shadow-win-inInset shadow while the mouse button is held, giving tactile click feedback
All links share font-pixel text-[10px] uppercase tracking-wider for the chunky retro pixel-font label style.

​
Navigation Items

The nav links are declared as a static array of { path, label } objects. To add, remove, or rename a link, edit this array directly in the Navbar component: 
const navItems = [
  { path: '/', label: 'Home' },
  { path: '/about', label: 'About Me' },
  { path: '/projects', label: 'Projects' },
  { path: '/work', label: 'Resume' },
  { path: '/case-studies', label: 'Case Studies' },
  { path: '/blog', label: 'Blog' },
  { path: '/testimonials', label: 'Testimonials' },
  { path: '/contact', label: 'Contact' },
];
The array is mapped over at render time, so adding a new entry automatically adds a new button to the bar — no additional wiring required.

​
Active State Detection

The Navbar uses useLocation() from React Router to read the current pathname on every render. Each item’s path is compared against the current pathname; when they match, the active classes (bg-white shadow-win-in) are applied instead of the inactive defaults: 
const { pathname } = useLocation();

navItems.map(({ path, label }) => (
  <NavLink
    to={path}
    className={
      pathname === path
        ? 'bg-white shadow-win-in text-black ...'
        : 'bg-win-gray shadow-win-out text-black hover:bg-gray-200 active:shadow-win-in ...'
    }
  >
    {label}
  </NavLink>
))
Because <NavLink> from React Router also exposes its own isActive prop in its className callback, you can alternatively use that directly if you prefer to keep the active logic inside the component API rather than comparing pathname manually.
If you’re targeting smaller screens, be aware that the nav row uses flex-wrap, so links automatically wrap onto a second line rather than overflowing or truncating. Still, fewer items mean a cleaner layout on mobile — consider pruning lower-priority links (e.g. Blog or Testimonials) or hiding them behind a hamburger menu for viewports below sm:.

Build docs developers (and LLMs) love

Get started for freeTalk to us