Untitled

import React, { useState, useEffect } from 'react';
import { FaBars, FaTimes, FaNewspaper, FaGlobe, FaLandmark, FaBusinessTime, FaFootballBall, FaMusic, FaFilm } from 'react-icons/fa';

const Sidebar = () => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [activeLevel1, setActiveLevel1] = useState(null);
  const [activeLevel2, setActiveLevel2] = useState(null);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const menuItems = [
    {
      icon: <FaNewspaper />,
      text: 'Top Stories',
      subItems: [
        { text: 'Breaking News', subItems: ['Local', 'National', 'International'] },
        { text: 'Editor\'s Picks', subItems: ['Daily Digest', 'Weekly Roundup'] },
      ],
    },
    {
      icon: <FaGlobe />,
      text: 'World',
      subItems: [
        { text: 'Europe', subItems: ['EU', 'Brexit', 'Eastern Europe'] },
        { text: 'Asia', subItems: ['China', 'India', 'Japan'] },
        { text: 'Americas', subItems: ['North America', 'Latin America'] },
      ],
    },
    {
      icon: <FaLandmark />,
      text: 'Politics',
      subItems: [
        { text: 'Domestic', subItems: ['Elections', 'Legislation', 'Government'] },
        { text: 'International', subItems: ['Diplomacy', 'Trade', 'Conflicts'] },
      ],
    },
    {
      icon: <FaBusinessTime />,
      text: 'Business',
      subItems: [
        { text: 'Markets', subItems: ['Stocks', 'Bonds', 'Commodities'] },
        { text: 'Economy', subItems: ['GDP', 'Inflation', 'Jobs'] },
        { text: 'Companies', subItems: ['Earnings', 'Mergers', 'IPOs'] },
      ],
    },
    {
      icon: <FaFootballBall />,
      text: 'Sports',
      subItems: [
        { text: 'Football', subItems: ['Premier League', 'La Liga', 'Champions League'] },
        { text: 'Basketball', subItems: ['NBA', 'EuroLeague'] },
        { text: 'Tennis', subItems: ['Grand Slams', 'ATP Tour'] },
      ],
    },
    {
      icon: <FaMusic />,
      text: 'Entertainment',
      subItems: [
        { text: 'Music', subItems: ['Pop', 'Rock', 'Hip Hop'] },
        { text: 'Celebrity', subItems: ['Gossip', 'Interviews'] },
      ],
    },
    {
      icon: <FaFilm />,
      text: 'Culture',
      subItems: [
        { text: 'Film', subItems: ['Reviews', 'Festivals', 'Industry News'] },
        { text: 'Art', subItems: ['Exhibitions', 'Artists', 'Market'] },
        { text: 'Books', subItems: ['Best Sellers', 'Authors', 'Reviews'] },
      ],
    },
  ];

  const toggleSidebar = () => setIsCollapsed(!isCollapsed);

  const handleLevel1Click = (index) => {
    if (isCollapsed) {
      setActiveLevel1(activeLevel1 === index ? null : index);
      setActiveLevel2(null);
    } else {
      setActiveLevel1(activeLevel1 === index ? null : index);
    }
  };

  const handleLevel2Click = (index) => {
    setActiveLevel2(activeLevel2 === index ? null : index);
  };

  return (
    <div
      className={`fixed left-0 top-0 h-full bg-gray-800 text-white transition-all duration-300 ease-in-out ${
        isCollapsed ? 'w-16' : 'w-64'
      } ${isMobile ? 'z-50' : ''}`}
    >
      <button
        onClick={toggleSidebar}
        className="absolute top-2 right-2 p-2 rounded-full bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400"
        aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
      >
        {isCollapsed ? <FaBars /> : <FaTimes />}
      </button>
      <nav className="mt-16">
        <ul>
          {menuItems.map((item, index) => (
            <li key={index} className="relative">
              <button
                onClick={() => handleLevel1Click(index)}
                className={`w-full text-left p-4 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 flex items-center ${
                  activeLevel1 === index ? 'bg-gray-700' : ''
                }`}
                aria-expanded={activeLevel1 === index}
                aria-haspopup="true"
              >
                <span className="text-xl mr-4">{item.icon}</span>
                {!isCollapsed && <span>{item.text}</span>}
              </button>
              {activeLevel1 === index && (
                <ul
                  className={`bg-gray-700 ${
                    isCollapsed ? 'absolute left-full top-0 w-48' : ''
                  }`}
                >
                  {item.subItems.map((subItem, subIndex) => (
                    <li key={subIndex}>
                      <button
                        onClick={() => handleLevel2Click(subIndex)}
                        className={`w-full text-left p-3 pl-8 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 ${
                          activeLevel2 === subIndex ? 'bg-gray-600' : ''
                        }`}
                        aria-expanded={activeLevel2 === subIndex}
                        aria-haspopup="true"
                      >
                        {subItem.text}
                      </button>
                      {activeLevel2 === subIndex && (
                        <ul className="bg-gray-600">
                          {subItem.subItems.map((level3Item, level3Index) => (
                            <li key={level3Index}>
                              <a
                                href="#"
                                className="block p-2 pl-12 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400"
                              >
                                {level3Item}
                              </a>
                            </li>
                          ))}
                        </ul>
                      )}
                    </li>
                  ))}
                </ul>
              )}
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default Sidebar;