martinms

Untitled

Oct 5th, 2025
165
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.21 KB | None | 0 0
  1. import { createContext, useContext, useState, useEffect } from "react";
  2.  
  3. type SidebarContextType = {
  4.   isExpanded: boolean;
  5.   isMobileOpen: boolean;
  6.   isHovered: boolean;
  7.   activeItem: string | null;
  8.   openSubmenu: string | null;
  9.   toggleSidebar: () => void;
  10.   toggleMobileSidebar: () => void;
  11.   setIsHovered: (isHovered: boolean) => void;
  12.   setActiveItem: (item: string | null) => void;
  13.   toggleSubmenu: (item: string) => void;
  14. };
  15.  
  16. const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
  17.  
  18. export const useSidebar = () => {
  19.   const context = useContext(SidebarContext);
  20.   if (!context) {
  21.     throw new Error("useSidebar must be used within a SidebarProvider");
  22.   }
  23.   return context;
  24. };
  25.  
  26. export const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({
  27.   children,
  28. }) => {
  29.   const [isExpanded, setIsExpanded] = useState(true);
  30.   const [isMobileOpen, setIsMobileOpen] = useState(false);
  31.   const [isMobile, setIsMobile] = useState(false);
  32.   const [isHovered, setIsHovered] = useState(false);
  33.   const [activeItem, setActiveItem] = useState<string | null>(null);
  34.   const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
  35.  
  36.   useEffect(() => {
  37.     const handleResize = () => {
  38.       const mobile = window.innerWidth < 768;
  39.       setIsMobile(mobile);
  40.       if (!mobile) {
  41.         setIsMobileOpen(false);
  42.       }
  43.     };
  44.  
  45.     handleResize();
  46.     window.addEventListener("resize", handleResize);
  47.  
  48.     return () => {
  49.       window.removeEventListener("resize", handleResize);
  50.     };
  51.   }, []);
  52.  
  53.   const toggleSidebar = () => {
  54.     setIsExpanded((prev) => !prev);
  55.   };
  56.  
  57.   const toggleMobileSidebar = () => {
  58.     setIsMobileOpen((prev) => !prev);
  59.   };
  60.  
  61.   const toggleSubmenu = (item: string) => {
  62.     setOpenSubmenu((prev) => (prev === item ? null : item));
  63.   };
  64.  
  65.   return (
  66.     <SidebarContext.Provider
  67.       value={{
  68.         isExpanded: isMobile ? false : isExpanded,
  69.         isMobileOpen,
  70.         isHovered,
  71.         activeItem,
  72.         openSubmenu,
  73.         toggleSidebar,
  74.         toggleMobileSidebar,
  75.         setIsHovered,
  76.         setActiveItem,
  77.         toggleSubmenu,
  78.       }}
  79.     >
  80.       {children}
  81.     </SidebarContext.Provider>
  82.   );
  83. };
  84.  
Advertisement
Add Comment
Please, Sign In to add comment