Navbar Module

Overview

The Navbar module is a customizable navigation bar that supports both desktop and mobile layouts. It includes features such as a collapsible mobile menu, a dark mode toggle, and a user account dropdown. The component is fully responsive, adapting to various screen sizes to provide a mobile-friendly experience.

Location

The source code for the Navbar module can be found in the /modules/native/Navbar.js file.

Usage

The Navbar module can be customized using props. Most props have default values, which can be modified directly within the module itself.

Props

1. `sectionColors`

Default Value:

const defaultSectionColors = {
    background: "bg-background",
    foreground: "text-foreground",
    mobileMenuBackground: "bg-accent",
    mobileMenuForeground: "text-accent-foreground"
};

Description: Customize the background and foreground colors for different sections of the navbar. Use the sectionColors prop to override the default color values.
Property Descriptions:
- background: Defines the background color of the Navbar. You can customize it to match your design needs.
- foreground: Sets the text/foreground color of the Navbar. This can also be customized as needed.
- mobileMenuBackground: Specifies the background color for the dropdown menu on smaller screens. You can modify this to suit your preferences.
- mobileMenuForeground: Determines the text/foreground color for the dropdown menu on smaller screens. Customize it to align with your design.
Additional Notes:
- bg-background, text-foreground, etc., are theme colors. For more information, refer to the documentation: Theming.
- You can easily swap main and accent colors. Just apply accent colors by setting background: "bg-accent" and foreground: "text-accent-foreground".
- If you want to use your own colors and maintain dark mode support, you can specify classes like bg-white dark:bg-black to ensure the color changes appropriately based on the theme.
- The sectionColors object can be partially updated with props. For example, if you only want to change the background color while keeping other defaults, you can do it like this:
```
<Navbar 
    sectionColors={{ 
        background: "bg-blue-200 dark:bg-blue-700" 
    }}
/>
```

2. `navigation`

Default Value:

const defaultNavigation = [
    { name: 'Home', href: '/' },
    { name: 'Pricing', href: '#pricing' },
    { name: 'Contact Us', href: '#contact' },
];

Description: An array of objects representing the navigation items. Each object should include a name (string) for the label and a href (string) for the link. Customize the navigation items by modifying the navigation prop.

3. `cta`

Default Value: <LoginButton buttonLarge={false} />
Description: A call-to-action element, typically used for actions like login or sign-up. If not provided, the default LoginButton is used. Replace the cta prop to use a different call-to-action element.
Additional Notes:
- If you need more information about LoginButton module, please refer to the documentation: LoginButton Module.

4. `darkModeButton`

Default Value: true
Description: Determines whether to display the dark mode toggle button. Set this prop to false to hide the dark mode toggle.

5. `accountDropdownButton`

Default Value: true
Description: Determines whether to display the account dropdown button. Set this prop to false to hide the account dropdown.

Usage Example without Props

If you want to use the Navbar module with all the default settings, you can simply include it without passing any props:

import Navbar from "@/modules/native/Navbar";
 
const MyPage = () => {
  return (
    <Navbar />
  );
}
 
export default MyPage;

Usage Example with Props

Here’s an example of how to use the Navbar module in your project, fully customized with props:

import Navbar from "@/modules/native/Navbar";
 
const MyPage = () => {
  return (
    <Navbar
      sectionColors={{
        background: "bg-white",
        foreground: "text-black",
        mobileMenuBackground: "bg-gray-100",
        mobileMenuForeground: "text-gray-800"
      }}
      navigation={[
        { name: 'Home', href: '/' },
        { name: 'Features', href: '#features' },
        { name: 'Pricing', href: '#pricing' },
      ]}
      cta={<button className="btn-primary">Sign Up</button>}
      darkModeButton={true}
      accountDropdownButton={false}
    />
  );
}
 
export default MyPage;

In this example:

The sectionColors prop customizes the colors for different sections of the navbar.
The navigation prop is used to define the navigation items.
The cta prop is replaced with a custom sign-up button.
The darkModeButton is enabled, while the accountDropdownButton is disabled.

Conclusion

The Navbar module is a responsive navigation bar that can be easily customized to fit your project’s needs. By adjusting the provided props, you can tailor the navbar to match your site's design and functionality requirements.

LoginButton PayButton