Skip to main content

Documentation Index

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

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

Navigation provides the primary wayfinding for Fortune Seeker. It consists of a fixed gold hamburger icon (Lucide Menu, 32px) in the top-right corner of the viewport that, when clicked, slides in a full-height drawer from the right side of the screen. The drawer lists all nine portfolio routes with divination-themed labels. The active route is highlighted in gold and enlarged. Clicking any link closes the drawer immediately. The drawer’s enter and exit animations are governed by Framer Motion spring physics and AnimatePresence.

​
Props

This component accepts no props. Route matching, open/close state, and all animations are self-contained.

​
Usage Example

import Navigation from "@/components/Navigation";

// Navigation is already composed into Layout.
// Only use it directly in a custom shell.
export default function CustomShell({ children }) {
  return (
    <div>
      <Navigation />
      <main>{children}</main>
    </div>
  );
}

​
Route List

The drawer renders the following nine links in order:
PathLabel
/The Reading
/aboutThe Reader
/projectsMajor Arcana
/skillsCast Spells
/workPendulum Swing
/case-studiesDeep Reading
/blogScribe’s Pages
/testimonialsChanneled Reviews
/contactSend a Sigil

​
Behavior & Animation

​
Hamburger Trigger

A Lucide Menu icon (size={32}) is rendered as a fixed element at top: 1.5rem, right: 1.5rem at a high z-index so it always floats above page content. It is styled in gold and opens the drawer when clicked.

​
Drawer Enter / Exit

The drawer panel is wrapped in Framer Motion AnimatePresence, so it mounts and unmounts cleanly. When opening, the drawer animates from:
  • x: "100%" (fully off-screen right) → x: 0
using a spring transition with high stiffness and low damping for a snappy, elastic feel. When closing, it reverses back to x: "100%" before unmounting.

​
Active Route Highlighting

On each render, the current pathname (obtained via React Router’s useLocation) is compared against each link’s path. The matching link receives:
  • Gold text color instead of the default muted gray.
  • scale: 1.1 via a Framer Motion whileHover-equivalent layout animation, making the active item visually prominent.

​
Close on Navigation

Each drawer link fires a setIsOpen(false) callback in its onClick handler, immediately triggering the AnimatePresence exit animation before React Router completes the route transition. This ensures the drawer is never left open on the new page.
The Navigation component imports useLocation from React Router. Fortune Seeker must be rendered inside a React Router <BrowserRouter> (or equivalent) context for active-route detection to work. This is already configured in the application entry point.
To add a new route to the navigation drawer, append an object to the navLinks array inside Navigation.js following the { path: string, label: string } shape. The drawer will automatically render the new link and apply active-state styling.

Build docs developers (and LLMs) love

Get started for freeTalk to us