Navbar Widget
Relevant source files
The following files were used as context for generating this wiki page:
The Navbar widget is a core UI component that provides persistent, responsive, and accessible navigation across the application. It is fixed to the top of the viewport and adapts its presentation for desktop and mobile devices. Key features include a blurred background effect, a "Skip to Main Content" accessibility button, conditional display of a "Back to Home" link, and a distinct, animated menu for mobile viewports.
The component is integrated directly into the main application shell, ensuring it remains visible and functional as users navigate between different lazy-loaded pages. Its content is centrally managed, promoting consistency and ease of maintenance.
Sources: src/widgets/Navbar/Navbar.tsx, src/app/App.tsx:29
Component Architecture & Composition
The Navbar is a functional React component that orchestrates several shared UI components to build its interface. It is structured as a <nav> element with a fixed position and a high z-index to ensure it stays on top of other page content.
The main architectural decision is the separation of concerns between desktop and mobile navigation, using CSS media queries to toggle the visibility of the respective implementations.
Sources: src/widgets/Navbar/Navbar.tsx:35, src/widgets/Navbar/Navbar.tsx:94, src/widgets/Navbar/Navbar.tsx:112
The following diagram illustrates the composition of the Navbar widget and its primary dependencies.
Responsive Design
The Navbar implements a responsive strategy that presents two distinct user experiences based on the viewport width. The breakpoint is at 1024px (the lg breakpoint in Tailwind CSS).
Sources: src/widgets/Navbar/Navbar.tsx:94, src/widgets/Navbar/Navbar.tsx:112
Desktop Navigation (>= 1024px)
On larger screens, the navigation is displayed as a traditional horizontal list of text links.
- Implementation: A
divwith the classlg:flexcontains a series ofNavLinkcomponents mapped from themenuItemsarray. - Active State: The active link is styled using the
isActiveproperty provided byNavLink. An underline effect is achieved by scaling an::afterpseudo-element on the active link. - Styling: The links use
text-fg-tertiaryfor inactive state andtext-primaryfor active/hover states.
Sources: src/widgets/Navbar/Navbar.tsx:94-110
Mobile Navigation (< 1024px)
On smaller screens, the desktop links are hidden, and a dedicated mobile menu component, BubbleMenu, is rendered.
- Implementation: A
divwith the classlg:hiddenwraps theBubbleMenucomponent. - Functionality: The
BubbleMenuprovides a hamburger-style toggle button. When activated, it displays a full-screen overlay with animated, "bubble"-like links for navigation. This component manages its own state for being open or closed. - Configuration: The
Navbarpasses the navigation links and setsuseFixedPosition={true}to ensure the menu operates correctly within the fixed navbar context.
Sources: src/widgets/Navbar/Navbar.tsx:112-121, src/shared/ui/BubbleMenu/BubbleMenu.tsx
Key Features & Logic
Dynamic Content Configuration
All user-facing text in the Navbar is sourced from a centralized configuration object, homeContent, located in src/shared/config/content.ts. This decouples content from the component logic, making it easy to update text without modifying the component's code.
The menuItems array is constructed using this configuration.
Sources: src/widgets/Navbar/Navbar.tsx:13-18, src/shared/config/content.ts:79-86
| Key | Value | Description |
|---|---|---|
links.home | "Home" | Label for the Home page link. |
links.about | "About" | Label for the About page link. |
links.projects | "Projects" | Label for the Projects page link. |
cta | "Contact" | Label for the Contact page link/button. |
skipToMain | "Skip to Main" | Accessibility text for the skip link. |
backToHome | "Back to Home" | Text for the conditional back button. |
Sources: src/shared/config/content.ts:79-86
Conditional "Back to Home" Button
The Navbar displays a "Back to Home" button only on "special" pages, which are defined as any route that is not a primary navigation path.
- Logic: The
useLocationhook fromreact-router-domgets the current path. - Condition: The
isSpecialPagevariable istrueif the currentlocation.pathnameis not in themainPathsarray (/,/about,/projects,/contact). - Rendering: The button, wrapped in a
NavLink, is conditionally rendered based onisSpecialPage.
// src/widgets/Navbar/Navbar.tsx:9-11
const location = useLocation();
const mainPaths = ["/", "/about", "/projects", "/contact"];
const isSpecialPage = !mainPaths.includes(location.pathname);
Sources: src/widgets/Navbar/Navbar.tsx:9-11, src/widgets/Navbar/Navbar.tsx:77-92
"Skip to Main" Accessibility Feature
For improved accessibility, a "Skip to Main" button is provided. This allows keyboard users to bypass the navigation links and jump directly to the main content of the page.
- Visibility: The button is initially transparent and positioned off-screen (
opacity-0,-translate-y-[200%]). It becomes visible and interactive only when it receives focus. - Functionality: The
handleSkipToMainfunction is triggered on click. It finds the element withid="main-content", sets itstabIndexto -1 to make it focusable, focuses it, and scrolls it smoothly into view.
This flow diagram shows the user interaction for the "Skip to Main" feature.
Integration and Loading State
The Navbar is a top-level layout component rendered within App.tsx. It is placed outside the <Routes> component, ensuring it persists across all page navigations without being re-mounted.
// src/app/App.tsx:27-31
const App = () => {
// ...
return (
<ThemeProvider>
<ScrollToTop />
<div className="min-h-screen ...">
<Navbar />
{/* ... Routes ... */}
</div>
</ThemeProvider>
);
};
Sources: src/app/App.tsx:27-31
Navbar Skeleton
A dedicated skeleton component, NavbarSkeleton, exists to provide a loading state placeholder that mimics the Navbar's layout. It uses pulsing animations (animate-pulse) to indicate that content is loading. The skeleton includes placeholders for the logo, desktop navigation links, and the mobile menu icon.
While App.tsx renders the Navbar outside the Suspense boundary for pages, this skeleton component is available for use in a higher-level suspense context if the entire application shell needs a loading state.
Sources: src/shared/ui/skeletons/NavbarSkeleton.tsx
Conclusion
The Navbar widget is a well-architected, responsive, and accessible navigation system. Its clear separation of desktop and mobile concerns, use of a centralized content source, and inclusion of key accessibility features make it a robust and maintainable component. Its fixed placement and persistence across page loads provide a consistent and reliable user experience throughout the portfolio application.