top-overlay-navbar/README.md

This is a modern, customizable overlay navbar built with React and Framer Motion.

Here's an updated version of your README file with a corrected image and improved formatting:

---


# **Top Overlay Navbar Component**

A **customizable**, **animated**, and **responsive** React component for building a modern overlay navigation bar. Featuring smooth animations, a dynamic menu, and an optional cart button, this component leverages **React**, **Framer Motion**, and **React Router DOM** for a sleek and interactive experience.

---


## **Preview**

![OverlayNavbar Preview](/src/demo.gif)

---


## **Features**

✨ **Responsive Design**: Fully adaptable to various screen sizes.

💡 **Dynamic Menu**: Easily configure menu links via props for flexibility.

🎨 **Smooth Animations**: Powered by **Framer Motion**, offering captivating visuals.

🛒 **Cart Button**: Includes a cart button with a dynamically updated item count.

🔧 **Customizable Styling**: Modify colors, animations, and layouts with props.

---


## **Installation**

### **Step 1**: Install Required Dependencies

```bash
npm install framer-motion react-icons react-router-dom
```

### **Step 2**: Add the Component

Copy the `OverlayNavbar` component to your project or import it as part of your package.

---


## **Usage**

Here’s how you can use the `OverlayNavbar` component in your project:

### **Basic Example**

```tsx
import React from "react";
import OverlayNavbar from "./OverlayNavbar";

const App = () => {
  return (
    <div>
      <OverlayNavbar
        brandName="MyBrand"
        menuLinks={[
          { label: "Home", route: "/" },
          { label: "About", route: "/about" },
          { label: "Services", route: "/services" },
          { label: "Contact", route: "/contact" },
        ]}
        cartCount={5}
        backgroundColor="#1F2937"
      />
    </div>
  );
};

export default App;
```

---


## **Props**

| Prop Name                | Type                         | Default       | Description                              |
| ------------------------ | ---------------------------- | ------------- | ---------------------------------------- |
| `brandName`              | `string`                     | `"BrandName"` | Name displayed on the navigation bar.    |
| `menuLinks`              | `{label: string, route: string}[]` | See Example   | Array of menu links and their routes.    |
| `cartCount`              | `number`                     | `3`           | Number displayed in the cart badge.      |
| `backgroundColor`        | `string`                     | `"#1F2937"`   | Background color of the animated slices. |
| `onMenuItemClick`        | `(itemName: string) => void` | `() => {}`    | Callback when a menu item is clicked.    |
| `sliceVariants`          | `Variants`                  | Predefined    | Variants for slice animations.           |
| `contentVariants`        | `Variants`                  | Predefined    | Variants for content animations.         |
| `toggleButtonClassName`  | `string`                     | Predefined    | Custom class for the toggle button.      |
| `menuContainerClassName` | `string`                     | Predefined    | Custom class for the menu container.     |
| `menuItemClassName`      | `string`                     | Predefined    | Custom class for menu items.             |
| `cartButtonClassName`    | `string`                     | Predefined    | Custom class for the cart button.        |

---


## **Customization**

### **Custom Animations**

You can customize animations using the `sliceVariants` and `contentVariants` props.

#### **Example: Custom Slice Animation**

```tsx
const customSliceVariants = {
  hidden: { x: "-100%" },
  visible: { x: 0, transition: { duration: 0.8, ease: "easeOut" } },
  exit: { x: "-100%", transition: { duration: 0.6, ease: "easeIn" } },
};

<OverlayNavbar sliceVariants={customSliceVariants} />;
```

---


### **Customizing Styles**

Pass custom classes to style specific parts of the component.

#### **Example: Menu Item Styles**

```tsx
<OverlayNavbar menuItemClassName="text-lg text-blue-500 hover:text-blue-700" />;
```

---


## **Example Styling**

Here’s an example of CSS for additional customization:

```css
/* Example slice animation */
@keyframes sliceAnimation {
  0% {
    background-color: #ff0000;
  }
  50% {
    background-color: #00ff00;
  }
  100% {
    background-color: #0000ff;
  }
}

.slice-custom {
  animation: sliceAnimation 3s infinite;
}
```

---


## **Dependencies**

This component requires the following packages:

- **React**: Component-based UI library.
- **Framer Motion**: For animation.
- **React Router DOM**: For routing and navigation.
- **React Icons**: For icon integration.

---


## **License**

Licensed under the **MIT License**. Feel free to use and customize this component in your projects.

---


## **Contributions**

We welcome contributions to improve this component! Submit issues, suggestions, or pull requests to help enhance the `OverlayNavbar`.

---