react-infinity-sidebar/src/components/Theme.jsx

A fully customizable and responsive sidebar component for React applications, built with TailwindCSS and Headless UI. Easily integrate dynamic navigation menus, dark mode, and various styling options. Designed for dashboards, admin panels, and modern web

import React, { memo } from 'react';
import { BiSolidCheckCircle, BiTrash } from 'react-icons/bi';
import Switch from './sidebarLayouts/components/Switch';
import { useColor } from '../context/CounterContext';
import { menuColors, navbarColors, sidebarBgImages, sidebarColors } from '../utils/options';

function Theme() {
    const { deleteColor, sidebarColor, menuColor, navbarColor, setColorSidebarHandler, setColorMenuHandler, setColorNavbarHandler, setSidebarImageHandler, sidebarImage } = useColor();

    // change sidebar color
    const changeSidebarColorsHandler = value => {
        setColorSidebarHandler(JSON.stringify(value));
    };

    // change menu color
    const changeMenuColorsHandler = value => {
        setColorMenuHandler(JSON.stringify(value));
    };

    // change navbar color
    const changeNavbarColorsHandler = value => {
        setColorNavbarHandler(JSON.stringify(value));
    };

    // change sidebar image
    const changeSidebarImageHandler = value => {
        setSidebarImageHandler(JSON.stringify(value));
    };

    // delete color
    const deleteItemHandler = () => {
        deleteColor();
    };

    return (
        <>
            <div className=''>
                <div className='flex items-center justify-between px-4 py-2'>
                    <div className='flex flex-col'>
                        <h6 className='font-inter_medium text-[13px] lg:text-[15px]'>Dark Mode</h6>
                        <span className='text-[12px] font-inter_regular text-gray-500'>Switch theme to dark mode</span>
                    </div>
                    {/* switch */}
                    <Switch />
                </div>
                <div className=''>
                    <div className='bg-[#F5F7FA] px-4 font-sans text-[13px] py-1 font-normal'>Sidebar Colors:</div>
                    <ul className='flex items-center gap-3 px-4 py-3 flex-wrap'>
                        {sidebarColors?.length > 0 && sidebarColors.map(item => (
                            <li key={item.id} className='w-[32px] h-[32px] rounded-full flex items-center justify-center cursor-pointer shadow-md'
                                style={{ backgroundColor: item?.sidebarBgColor }}
                                onClick={() => changeSidebarColorsHandler(item)}
                            >
                                {sidebarColor && sidebarColor.hasOwnProperty("id") && item.id == sidebarColor?.id && item.sidebarBgColor == sidebarColor?.sidebarBgColor && (
                                    <BiSolidCheckCircle className='text-green-700' size={20} />
                                )}
                            </li>
                        ))}
                    </ul>
                </div>
                <div className=''>
                    <div className='bg-[#F5F7FA] px-4 font-sans text-[13px] py-1 font-normal'>Menu Colors</div>
                    <ul className='flex items-center gap-3 px-4 py-3 flex-wrap'>
                        {menuColors?.length > 0 && menuColors.map(item => (
                            <li key={item.id} className='w-[32px] h-[32px] rounded-full flex items-center justify-center cursor-pointer shadow-md'
                                style={{ backgroundColor: item?.sidebarItemBgColor }}
                                onClick={() => changeMenuColorsHandler(item)}
                            >
                                {menuColor && menuColor.hasOwnProperty("id") && item.id == menuColor?.id && item.sidebarItemBgColor == menuColor?.sidebarItemBgColor && (
                                    <BiSolidCheckCircle className='text-green-700' size={20} />
                                )}
                            </li>
                        ))}
                    </ul>
                </div>
                <div className=''>
                    <div className='bg-[#F5F7FA] px-4 font-sans text-[13px] py-1 font-normal'>Navbar Colors</div>
                    <ul className='flex items-center gap-3 px-4 py-3 flex-wrap'>
                        {navbarColors?.length > 0 && navbarColors.map(item => (
                            <li key={item.id} className='w-[32px] h-[32px] rounded-full flex items-center justify-center cursor-pointer border shadow-md'
                                style={{ backgroundColor: item?.navbarBgColor }}
                                onClick={() => changeNavbarColorsHandler(item)}
                            >
                                {navbarColor && navbarColor.hasOwnProperty("id") && item.id == navbarColor?.id && item.navbarBgColor == navbarColor?.navbarBgColor && (
                                    <BiSolidCheckCircle className='text-green-700' size={20} />
                                )}
                            </li>
                        ))}
                    </ul>
                </div>
                <div className=''>
                    <div className='bg-[#F5F7FA] px-4 font-sans text-[13px] py-1 font-normal'>Sidebar With Background Image:</div>
                    <ul className='flex items-center gap-4 px-4 py-3 flex-wrap'>
                        {sidebarBgImages?.length > 0 && sidebarBgImages.map(item => (
                            <li key={item.id} className='w-[56px] h-[90px] rounded-[4px] flex items-center justify-center cursor-pointer border shadow-md relative bg-black/90'
                                onClick={() => changeSidebarImageHandler(item)}
                            >
                                <img src={item?.sidebarImage} alt="" className='absolute top-0 left-0 w-full h-full' />
                                {sidebarImage && sidebarImage.hasOwnProperty("id") && item.id == sidebarImage?.id && item.sidebarImage == sidebarImage?.sidebarImage && (
                                    <BiSolidCheckCircle className='text-green-700 absolute inset-0 m-auto' size={20} />
                                )}
                            </li>
                        ))}
                    </ul>
                </div>
            </div>

            <div className='flex items-center p-3 gap-1 cursor-pointer' onClick={deleteItemHandler}>
                <BiTrash color='red' />
                <span className='text-red-700 text-[12px]'>Clear all selections</span>
            </div>
        </>
    )
}

export default memo(Theme);