Navigation System
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Navigation System in the AVP Supercars project provides a unified interface for users to traverse the application's luxury car rental and sourcing services. It is composed of a persistent header with a responsive navigation bar, a comprehensive footer with deep links, and contextual call-to-action (CTA) elements distributed across various pages.
The system ensures consistent access to the primary sections of the site: the vehicle fleet, service offerings, company information, delivery locations, and contact channels. Sources: app/layout.tsx:13-100, components/Navbar.tsx:11-15
Core Components
Main Navbar
The Navbar component serves as the primary navigation hub. It defines a static array of navigation objects used to generate links for both desktop and mobile views.
| Label | Href | Description |
|---|---|---|
| Fleet | /fleet | Browse available luxury vehicles |
| Services | /services | View rental, sourcing, and event services |
| About | /about | Company background and values |
| Delivery | /locations | Geographic coverage and drop-off info |
| Contact | /contact | Lead generation and support |
Sources: components/Navbar.tsx:11-17
Responsive Header Logic
The header implements dynamic styling based on user interaction. It uses a scroll listener to toggle between a transparent background and a blurred, semi-opaque background when the user scrolls beyond 12 pixels. Sources: components/Navbar.tsx:24-30
The diagram above illustrates the conditional styling logic applied to the header based on scroll position. Sources: components/Navbar.tsx:24-43
Mobile Navigation
For mobile devices, the system uses a hamburger menu that triggers a full-screen overlay managed by framer-motion for animations. When open, the system prevents background scrolling by setting document.body.style.overflow to hidden. Sources: components/Navbar.tsx:32-34, components/Navbar.tsx:103-146
Footer System
The footer provides secondary navigation and organizational information. It is structured into three main columns and a bottom utility bar. Sources: app/layout.tsx:18-100
| Section | Content Type | Sources |
|---|---|---|
| Navigation | Internal links to main routes (Fleet, Services, etc.) | app/layout.tsx:41-49 |
| Locations | Static list of service cities (Monaco, Milan, etc.) | app/layout.tsx:52-60 |
| Request | CTA for availability requests | app/layout.tsx:63-76 |
| Utility | Privacy policy, FAQ, and copyright | app/layout.tsx:81-95 |
Page-Level Navigation & CTAs
The application uses contextual navigation through "Hero" sections and "CTA" blocks to guide users toward the fleet or contact pages. Sources: app/page.tsx:80-92, app/about/page.tsx:40-52
This sequence shows the typical user flow encouraged by the contextual navigation buttons found in page heroes. Sources: app/page.tsx:80-92, app/fleet/page.tsx:65-78
Navigation Hooks and Logic
The system utilizes Next.js hooks to manage active states and routing:
usePathname: Used to identify the current route.useMemo: Calculates if a navigation item is "active" by checking if the current pathname starts with the link's href.Link: The standard Next.js component for client-side navigation.
Sources: components/Navbar.tsx:21-40
Implementation Snippet
The following snippet demonstrates how the navigation links are dynamically rendered with active state styling in the Navbar.
{NAV.map((item) => {
const isActive = pathname?.startsWith(item.href);
return (
<Link
key={item.href}
href={item.href}
className={`relative transition ${
isActive ? "text-white" : "text-white/70 hover:text-white"
}`}
>
{item.label}
<span
className={`absolute -bottom-2 left-0 h-[2px] w-full transition-transform duration-300 ${
isActive ? "bg-white scale-x-100" : "bg-white/40 scale-x-0"
}`}
/>
</Link>
);
})}
Sources: components/Navbar.tsx:63-87
Conclusion
The Navigation System is a robust, responsive framework that ensures the AVP Supercars application is easy to navigate across all device types. By combining a dynamic header, a detailed footer, and strategic internal linking, the system effectively facilitates user movement from information gathering to service requests.