Paradise Mud Navbar 🌟

A customizable React component for creating a responsive navbar. Perfect for adding a sleek, modern navigation bar to your React applications with options for logos, links, and buttons.

Features 🚀

• Customizable Logos: Display text or image logos.
• Flexible Links: Add navigation links with custom click handlers.
• Interactive Buttons: Include buttons with actions.
• Responsive Design: Mobile-friendly with a hamburger menu for small screens.
• Customizable Positions: Control the positioning of logos, links, and buttons.

Installation 🛠️

To install paradise-mud-navbar, use npm or yarn:

npm install paradise-mud-navbar
# or
yarn add paradise-mud-navbar

Usage 🖥️

Import the ParadiseMudNavbar component into your React application and configure it as needed:

import React from 'react';
import ParadiseMudNavbar from 'paradise-mud-navbar';
import "paradise-mud-navbar/src/components/ParadiseMudNavbar.css";

const App = () => {
  return (
    <ParadiseMudNavbar
      navbarLogos={['https://example.com/logo.png']}
      navbarLinks={[
        { link: '/', title: 'Home' },
        { link: '/about', title: 'About' },
      ]}
      navbarButtons={[
        { title: 'Click Me', onClick: () => alert('Button clicked!') },
      ]}
    />
  );
};

export default App;

Props 🛠️

navbarClassNames (optional) 🎨

• Type: array of strings
• Description: Custom CSS class names for styling the navbar. This allows you to apply additional styles or override default styles.

navbarLogos (optional) 🖼️

• Type: array of strings
• Description: List of logo URLs or texts. If an item is a URL, it will be rendered as an image; otherwise, it will be rendered as text.

navbarLinks (optional) 🔗

• Type: array of objects
• Description: List of navigation links to display in the navbar.
  • link (string): The URL for the link.
  • title (string): The text to display for the link.
  • className (string, optional): Additional CSS classes for styling the link.
  • onClick (function, optional): Click event handler for the link.

navbarButtons (optional) 🔘

• Type: array of objects
• Description: List of buttons to be displayed in the navbar.
  • title (string): The text to display on the button.
  • onClick (function): Click event handler for the button.

logoPosition (optional) 📍

• Type: string
• Default: "left"
• Description: Position of the logo in the navbar. Can be "left", "center", or "right".

linksPosition (optional) 📍

• Type: string
• Default: "center"
• Description: Position of the navigation links in the navbar. Can be "left", "center", or "right".

buttonsPosition (optional) 📍

• Type: string
• Default: "right"
• Description: Position of the buttons in the navbar. Can be "left", "center", or "right".

CSS Customization 🎨

To customize the appearance of the navbar, create a ParadiseMudNavbar.css file in your project and override the default styles. Here are some CSS classes you can target:

• .paradise-mud-navbar: The main container for the navbar.
• .paradise-mud-navbar-logo-container: The container for logo images or texts.
• .paradise-mud-navbar-logo-img: The class for logo images.
• .paradise-mud-navbar-logo-text: The class for logo text.
• .paradise-mud-navbar-link-container: The container for navigation links.
• .paradise-mud-navbar-link: The class for navigation links.
• .paradise-mud-navbar-button-container: The container for buttons.
• .paradise-mud-navbar-button: The class for buttons.
• .paradise-mud-mobile-navbar: The container for the mobile navbar.
• .paradise-mud-mobile-navbar-hamburger: The class for the hamburger icon.
• .paradise-mud-mobile-navbar-modal: The modal container for mobile navigation.

License 📜

This project is licensed under the MIT License. See the License file for details.

Contributing 🤝

Contributions are welcome! Please follow the contributing guidelines and submit a pull request.

Contact 📧

For any questions or feedback, please reach out to [email protected].

Feel free to adjust any sections as needed to better fit your project's specifics or your contact information.