react-infinity-sidebar/src/context/CounterContext.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 { createContext, useContext, useEffect, useState } from "react";

// 1️⃣ create Context 
const Context = createContext(null);

// 2️⃣ create Context Provider component
export const SidebarProvider = ({ children }) => {
    const [sidebarColor, setSidebarColor] = useState(null);
    const [menuColor, setMenuColor] = useState(null);
    const [navbarColor, setNavbarColor] = useState(null);
    const [sidebarImage, setSidebarImage] = useState(null);
    const [enabled, setEnabled] = useState(false);
    const [sidebarOpen, setSidebarOpen] = useState(false);

    // ✅ Retrieving data from localStorage via `useEffect`
    useEffect(() => {
        const safeParse = (key) => {
            try {
                return JSON.parse(localStorage.getItem(key));
            } catch {
                return localStorage.getItem(key);
            }
        };

        setSidebarColor(safeParse("sidebar_color") || null);
        setMenuColor(safeParse("menu_color") || null);
        setNavbarColor(safeParse("navbar_color") || null);
        setSidebarImage(safeParse("sidebar_image") || null);
        setEnabled(safeParse("darkMode") || false);
    }, []);

    // delete all local storage
    const deleteColor = () => {
        localStorage.removeItem("sidebar_color");
        localStorage.removeItem("menu_color");
        localStorage.removeItem("navbar_color");
        localStorage.removeItem("sidebar_image");
        setSidebarColor(null);
        setMenuColor(null);
        setNavbarColor(null);
        setSidebarImage(null);
    };

    // switch on/off
    const onSwitchHandler = newValue => {
        localStorage.setItem("darkMode", newValue);
        setEnabled(newValue);
    }

    // set color sidebar
    const setColorSidebarHandler = (newValue) => {
        localStorage.setItem("sidebar_color", newValue);
        setSidebarColor(JSON.parse(newValue));
    };
    // set color menu
    const setColorMenuHandler = (newValue) => {
        localStorage.setItem("menu_color", newValue);
        setMenuColor(JSON.parse(newValue));
    };
    // set color navbar
    const setColorNavbarHandler = (newValue) => {
        localStorage.setItem("navbar_color", newValue);
        setNavbarColor(JSON.parse(newValue));
    };
    // set sidebar image
    const setSidebarImageHandler = (newValue) => {
        localStorage.setItem("sidebar_image", newValue);
        setSidebarImage(JSON.parse(newValue));
    };

    // open sidebar (desktop)
    const openSidebarHandler = () => {
        setSidebarOpen(true);
    };

    // close sidebar (desktop)
    const closeSidebarHandler = () => {
        setSidebarOpen(false);
    };

    return (
        <Context.Provider value={{ sidebarColor, menuColor, navbarColor, sidebarImage, deleteColor, enabled, onSwitchHandler, setColorSidebarHandler, setColorMenuHandler, setColorNavbarHandler, setSidebarImageHandler, openSidebarHandler, closeSidebarHandler, sidebarOpen }}>
            {children}
        </Context.Provider>
    );
};

// 3️⃣ create Custom hook 
export const useColor = () => {
    const context = useContext(Context);
    if (context === null || context === undefined) {
        // console.error("❌ Error: useColor used but not wrapped with SidebarProvider!");
        throw new Error("useColor must be used within a SidebarProvider");
    }
    return context;
};