HamburgerIcon

'use client';

import { useState } from 'react';

import { HamburgerIcon } from '@/ui/HamburgerIcon';

export function HamburgerIconDemo() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      onClick={() => setIsActive(!isActive)}
      className="p-4 rounded hover:bg-gray-100"
      aria-label={isActive ? 'Close menu' : 'Open menu'}
    >
      <HamburgerIcon isActive={isActive} />
    </button>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/hamburger-icon.json
Copy

Usage

Copyimport { useState } from 'react';
import { HamburgerIcon } from '@/docs/lib/ui/hamburger-icon';
 
export function Component() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
  return (
    <button
      onClick={() => setIsMenuOpen(!isMenuOpen)}
      aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
    >
      <HamburgerIcon isActive={isMenuOpen} />
    </button>
  );
}

API Reference

HamburgerIcon

Notes

• Animated Transitions: The icon smoothly animates between hamburger and X states with a 500ms transition duration using CSS transforms
• Color Control: Uses currentColor for the icon color, so it inherits the text color from its parent element
• Fixed Size: The icon has a fixed size of 24px × 24px (w-24 h-24 in Tailwind) with three lines that are 2px thick
• Cursor Pointer: The icon has cursor-pointer class applied by default, indicating it's meant to be clickable
• Data Attributes: Sets data-name="HamburgerIcon" and data-testid based on the isActive state for testing purposes
• CSS-Only Animation: The animation is purely CSS-based using pseudo-elements (::before, ::after) and the middle line, providing smooth performance
• Accessibility: Should be wrapped in a button element with appropriate aria-label that describes the current state (e.g., "Open menu" or "Close menu")