HamburgerIcon Component

The HamburgerIcon component in React is a customizable button that toggles between a hamburger icon and a close (X) icon. It's commonly used for mobile navigation menus.

Features

• Toggles between hamburger and close (X) icon based on the isActive state.
• Customizable through props and CSS.
• Ideal for mobile-responsive navigation bars and menus.

Props

Prop	Type	Description
isActive	boolean	Determines the current state of the icon.
setIsActive	React.Dispatch<React.SetStateAction<boolean>>	Function to toggle the state of the icon.

Component

import React from "react";

const HamburgerIcon: React.FC<Props> = ({ isActive, setIsActive }) => {
  const toggleIsActive = () => {
    setIsActive((isActive) => !isActive);
  };

  return (
    <button className="w-8 h-5 block" onClick={() => toggleIsActive()}>
      {/* Icon bars */}
    </button>
  );
};

export default HamburgerIcon;

Usage

This component is particularly useful in responsive layouts where a navigation menu needs to be shown or hidden based on user interaction.

Example Usage

import HamburgerIcon from "./path/to/HamburgerIcon";

const Navbar = () => {
  const [isActive, setIsActive] = React.useState(false);

  return (
    <nav>
      <HamburgerIcon isActive={isActive} setIsActive={setIsActive} />
      {/* Navigation items */}
    </nav>
  );
};

Styling

• The icon uses CSS classes for styling, which can be customized for different looks.
• Transition effects are applied for a smooth transformation between states.

Notes

• The isActive prop should be managed by the parent component to control the icon's state.
• Ensure that the component's functionality aligns with accessibility standards, such as providing appropriate ARIA labels.

---

This documentation provides an overview of the HamburgerIcon component, detailing its features, usage, and styling options. Adapt the component as needed for your specific project requirements.