leumas-private-shared/src/SideBar/Sidebar.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useTheme } from '../Theme/ThemeContext';
import { MdMenu, MdClose } from 'react-icons/md'; // Ensure you have these icons imported

const Sidebar = ({ links }) => {
  const [isOpen, setIsOpen] = useState(true); // Initially open for desktop view
  const [openDropdown, setOpenDropdown] = useState(null);
  const { theme } = useTheme();

  const sidebarBgClass = theme === 'dark' ? 'bg-gray-900' : 'bg-white';
  const buttonBaseClass = 'flex items-center p-2 space-x-3 rounded-md w-full justify-between transition-colors duration-300';
  const buttonLightClass = 'bg-blue-500 hover:bg-red-500 text-white';
  const buttonDarkClass = 'bg-blue-500 hover:bg-red-500 text-black';

  const toggleSidebar = () => setIsOpen(!isOpen);

  return (
    <div className="flex h-full min-h-[600px] border border-black">
      {/* Mobile view toggle button */}
      <button className="p-4 md:hidden z-30" onClick={toggleSidebar}>
        {isOpen ? <MdClose className="text-4xl" /> : <MdMenu className="text-4xl" />}
      </button>
      {/* Sidebar */}
      <aside className={`${isOpen ? 'block' : 'hidden'} md:block ${sidebarBgClass} w-64 h-screen fixed md:static z-20`}>
        {/* Desktop view close button inside the sidebar */}
        <div className="flex justify-end md:visible invisible p-4">
          <button onClick={()=>toggleSidebar}>
            <MdClose className="text-2xl" /> {/* Smaller icon size for desktop */}
          </button>
        </div>
        <div className="px-3 py-4 overflow-y-auto w-full">
          <ul className="space-y-2">
            {links?.map((link, index) => (
              <li key={index} className={link.dropdown ? "dropdown" : ""}>
                <button 
                  onClick={() => setOpenDropdown(openDropdown === index ? null : index)}
                  className={`${buttonBaseClass} ${theme === 'dark' ? buttonDarkClass : buttonLightClass} text-center hover:border hover:border-white`}
                >
                  {link.icon && React.createElement(link.icon, { className: "w-5 h-5" })}
                  <span className={`text-center`}>{link.name}</span>
                  {link.dropdown && <span>&gt;</span>}
                </button>
                {link.dropdown && openDropdown === index && (
                  <ul className="pl-4">
                    {link.dropdown.map((sublink, subIndex) => (
                      <li key={subIndex}>
                        <Link 
                          to={sublink.href} 
                          className="flex items-center p-2 hover:bg-red-500 dark:hover:bg-red-600 rounded-lg mt-2 hover:border hover:border-white"
                        >
                          {sublink.icon && React.createElement(sublink.icon, { className: "w-4 h-4 mr-2" })}
                          {sublink.name}
                        </Link>
                      </li>
                    ))}
                  </ul>
                )}
              </li>
            ))}
          </ul>
        </div>
      </aside>
      {/* Optional overlay for mobile */}
      {isOpen && <div className="fixed inset-0 z-10 bg-black bg-opacity-50 md:hidden" onClick={toggleSidebar}></div>}
    </div>
  );
};

export default Sidebar;