Header & Footer
The Header and Footer components provides navigation, branding, and additional information. These components are designed to be responsive and customizable, ensuring a consistent experience across all pages.
Features
🔍 Dynamic Navigation: The Header includes navigation links, search, and user-related actions, dynamically rendered based on the user's authentication status. This functionality is powered by React for component-based architecture and Next.js for server-side rendering and routing.
🎨 Customizable Design: Both Header and Footer utilize SCSS (Sass) for styling, allowing for easy customization and theme consistency across the application. The clsx utility is used to conditionally apply classes based on component states.
🌐 Social Media Integration: The Footer includes links to various social media platforms and the company's GitHub, NPM, and Discord, enhancing the application's online presence.
🔒 Consent Management: The Footer integrates with a consent management system, allowing users to adjust their privacy preferences directly from the footer. This feature is managed by @start-base/react-consent-manager, providing a seamless user experience for privacy settings.
What's Included
< Header />
The Header component provides the top navigation bar of the website, including branding, navigation links, search functionality, cart access, notifications, and user account management. It adapts based on whether the user is authenticated.
Header Props
| Name | Type | Default | Description |
|---|---|---|---|
isAuthHeader | boolean | false | Determines if the header is for authenticated users or not. |
user | object | null | The user object containing user details, used to personalize the header. |
active | boolean | false | Indicates if the header should be rendered in its active state. |
< useScroll />
The useScroll hook is used within the Header component to detect the user's scroll position and adjust the header's styling once a specified scroll threshold is surpassed.
useScroll Parameters
| Name | Type | Description |
|---|---|---|
threshold | number | The scroll position (in pixels) after which the header's style changes. |
useScroll Return Value
| Name | Type | Description |
|---|---|---|
scrolled | boolean | A boolean value indicating whether the user has scrolled past the specified threshold. |
Header Subcomponents
Displays the company logo and links back to the homepage.
A button that opens the search interface on mobile devices.
A button that leads to the shopping cart.
A dropdown that shows the user's notifications.
A dropdown for user-related actions, such as accessing the user profile or logging out.
A button for toggling the navigation menu on mobile devices.
Navigation Links: Renders the navigation links based on the nav content array. Includes both standard links and dropdowns.
Navigation Structure
The Header component uses a predefined navigation structure, imported from the nav and mobileNav arrays. These arrays define the links and icons used in the header for both desktop and mobile views.
navArray: Defines the main navigation links displayed in the desktop version of the header. Each item includes a title, URL, and aheaderboolean indicating whether the link should be displayed in the header.mobileNavArray: Defines the navigation links displayed in the mobile version of the header. Each item includes a name, icon, and path, providing a streamlined user experience on smaller screens.
< Footer />
The Footer component provides the bottom section of the website, including branding, company information, legal links, and social media links. It also includes an option to toggle the privacy preference center.
Footer Props
| Name | Type | Default | Description |
|---|---|---|---|
wide | boolean | false | Determines if the footer should be displayed in a wide format. |
Footer Subcomponents
- < Logo />Displays the company logo in the footer.
- Company Info: Includes company name, address, and copyright information.
- Links: Displays various navigation links, including legal and career pages.
- Social Media Links: Includes icons and links to various social media platforms and developer communities.
- < ColorfulButton />A button that opens the privacy preference center using the consent management system.
- Discord Invite: A card with a link to join the company's Discord server.
Navigation Structure
Similar to the Header, the Footer component also uses the nav array to render navigation links. These links are categorized under different sections such as "Links" and "Legal" to provide easy access to various parts of the website.