Navbar Component
Relevant source files
The following files were used as context for generating this wiki page:The Navbar is a core UI component responsible for the primary navigation of the OptiFlow application. It is designed to be responsive, adapting its layout for both desktop and mobile viewports. The component is fixed to the top of the screen and features a transparent background that becomes blurred and semi-opaque upon scrolling. It provides navigation links to various sections of the single-page application, call-to-action buttons, and the application logo.
The component is implemented in src/App.jsx as the first element within the main application div, ensuring it is always present and visible at the top of the page. Animations are handled by framer-motion to provide a smooth user experience, such as the initial slide-in of the navbar and the appearance of the mobile menu.
Sources: src/components/Navbar.jsx, src/App.jsx:16
Architecture and Core Logic
The Navbar component's logic is self-contained. It manages its own state for UI changes and responds to user interactions like scrolling and clicking the mobile menu toggle.
Sources: src/components/Navbar.jsx
State Management
The component utilizes two React state variables to control its appearance and behavior.
| State Variable | Type | Description |
|---|---|---|
scrolled | Boolean | Tracks if the user has scrolled more than 20 pixels down the page. Toggles the navbar's background style. |
mobileMenuOpen | Boolean | Toggles the visibility of the full-screen mobile navigation menu. |
Sources: src/components/Navbar.jsx:6-7
A useEffect hook is responsible for updating the scrolled state. It adds a scroll event listener to the window object when the component mounts and removes it on unmount to prevent memory leaks.
// src/components/Navbar.jsx:9-13
useEffect(() => {
const updateScroll = () => setScrolled(window.scrollY > 20);
window.addEventListener('scroll', updateScroll);
return () => window.removeEventListener('scroll', updateScroll);
}, []);
The following diagram illustrates the state flow:
This diagram shows how user actions and component lifecycle events trigger state updates, which in turn alter the component's UI.
Sources: src/components/Navbar.jsx:9-13, 79-82
Dynamic Styling
The navbar's background style is dynamically applied based on the scrolled and mobileMenuOpen states. When either is true, the navbar gets a bg-black/50, backdrop-blur-xl, and a bottom border, creating a "glassmorphism" effect. Otherwise, it remains transparent.
// src/components/Navbar.jsx:22-24
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
scrolled || mobileMenuOpen ? 'bg-black/50 backdrop-blur-xl border-b border-white/5' : 'bg-transparent'
}`}
Sources: src/components/Navbar.jsx:22-24
Component Structure
The Navbar is divided into distinct sections for desktop and mobile views.
Desktop Layout
The desktop view consists of three main parts arranged horizontally using Flexbox:
- Logo: A link with the "O" icon and "OptiFlow" text.
- Navigation Links: A centrally aligned list of links generated from the
navLinksarray. - Call-to-Action (CTA) Buttons: "Log in" and "Get Started" buttons on the right.
The following diagram shows the rendering logic for desktop vs. mobile.
Sources: src/components/Navbar.jsx:29-76
Mobile Layout
On smaller screens (< md), the desktop links and CTAs are hidden. A hamburger menu icon is displayed, which toggles the mobileMenuOpen state.
When mobileMenuOpen is true, a full-screen overlay menu is rendered using framer-motion's AnimatePresence for smooth entry and exit animations. This menu contains the same navigation links as the desktop view, styled for mobile, along with mobile-specific "Log in" and "Get Started" buttons. Clicking any link in the mobile menu closes it by setting mobileMenuOpen to false.
The sequence diagram below shows the user flow for the mobile menu.
Sources: src/components/Navbar.jsx:78-124
Navigation Links
The navigation links are defined in a constant array within the component. Each link is an object with a name for display and an href that points to an anchor ID on the page, enabling smooth scrolling in the single-page application.
| Name | Href | Target Section Component |
|---|---|---|
| Solutions | #solutions | Solutions.jsx |
| Features | #features | Features.jsx |
| Integrations | #integrations | Integrations.jsx |
| Pricing | #pricing | Pricing.jsx |
Sources: src/components/Navbar.jsx:15-20, src/components/Solutions.jsx:39, src/components/Features.jsx:287, src/components/Integrations.jsx:17
Dependencies
The Navbar component relies on several external libraries to achieve its functionality and appearance.
| Dependency | Version | Usage |
|---|---|---|
react | ^19.2.0 | Core library for building the component, including useState and useEffect. |
framer-motion | ^12.23.24 | Handles all animations, including the initial navbar entrance and mobile menu transitions. |
lucide-react | ^0.554.0 | Provides the Menu, X, and ChevronRight SVG icons. |
tailwindcss | ^3.4.17 | Provides utility classes for all styling. |
Sources: package.json:13-16, 23, src/components/Navbar.jsx:2-4