Rollback SideBarLayoutContext.tsx and its implementation

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- `PanelSidebar` is new sidebar with custom side panels and a new `PanelSideBarLayoutContext`, also for older sidebar
+- `PanelSidebar` is new sidebar with custom side panels and a new `PanelSideBarLayoutContext`
 - `collapseIconOnly` to `PanelItem` in order to collapse `PanelSideBarItem` only by clicking on chevron icon and label can work as link
 
 ### Removed

src/index.ts

@@ -8,6 +8,7 @@ export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelIte
 
 // Sidebar layout
 export * from "./lib/Layout/SideBarLayout/SideBarLayout";
+export * from "./lib/Layout/SideBarLayout/SideBarLayoutContext";
 export * from "./lib/SideBar/SideBarMenuContext";
 export * from "./lib/Paging/Paging";
 export * from "./lib/SideBar/ISideBarMenuItem";

src/lib/Layout/SideBarLayout/SideBarLayout.tsx

@@ -4,9 +4,9 @@ import classNames from "classnames";
 import { PropsWithChildren, ReactNode, useState } from "react";
 import { DropdownMenu, DropdownToggle, Nav, NavItem, UncontrolledDropdown } from "reactstrap";
 import SideBarMenu from "src/lib/SideBar/SideBarMenu";
-import "./../../../../styles/Layout/SideBarLayout.scss";
+import "../../../../styles/Layout/SideBarLayout.scss";
 import { SideBarLayoutContent } from "./SideBarLayoutContent";
-import { usePanelSideBarContext } from "src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext";
+import { useSideBarLayoutContext } from "./SideBarLayoutContext";
 
 interface SideBarLayoutProps extends PropsWithChildren {
   brand?: ReactNode;
@@ -20,7 +20,7 @@ const SideBarLayout = (props: SideBarLayoutProps) => {
   const [isOpen, setIsOpen] = useState(true);
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
-  const { brand: contextBrand, theme: contextTheme, userDropDownMenu, userDropDownMenuToggle } = usePanelSideBarContext();
+  const { brand: contextBrand, theme: contextTheme, userDropDownMenu, userDropDownMenuToggle } = useSideBarLayoutContext();
   const chosenTheme = theme ?? contextTheme;
 
   return (
@@ -29,7 +29,7 @@ const SideBarLayout = (props: SideBarLayoutProps) => {
         {/* Navbar Brand*/}
         <div className="navbar-brand">{brand ?? contextBrand}</div>
 
-        {/* Sidebar Toggle */}
+        {/* Sidebar Toggle*/}
         <button id="sidebar-toggle" className="btn btn-link btn-sm order-0 me-lg-0" onClick={() => toggleSidebar()}>
           <FontAwesomeIcon icon={faBars} size="2x" />
         </button>

src/lib/Layout/SideBarLayout/SideBarLayoutContent.tsx

@@ -1,12 +1,12 @@
 import { FC, PropsWithChildren, ReactNode } from "react";
-import { usePanelSideBarContext } from "src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext";
+import { useSideBarLayoutContext } from "./SideBarLayoutContext";
 
 interface SideBarLayoutContentProps {
   footer?: ReactNode;
 }
 
 const SideBarLayoutContent: FC<PropsWithChildren<SideBarLayoutContentProps>> = ({ children, footer }) => {
-  const { footer: contextFooter } = usePanelSideBarContext();
+  const { footer: contextFooter } = useSideBarLayoutContext();
 
   return (
     <article id="layout-sidenav__content">

src/lib/Layout/SideBarLayout/SideBarLayoutContext.tsx

@@ -0,0 +1,34 @@
+import { createContext, PropsWithChildren, ReactNode, useContext } from "react";
+
+interface SideBarLayoutProviderProps {
+  theme?: "dark" | "light";
+  footer?: ReactNode;
+  brand?: ReactNode;
+  userDropDownMenuToggle?: ReactNode;
+  userDropDownMenu?: ReactNode;
+}
+
+interface SideBarLayoutContextProps extends SideBarLayoutProviderProps {
+  theme: "dark" | "light";
+}
+
+const SideBarLayoutContext = createContext<SideBarLayoutContextProps | null>(null);
+
+const SideBarLayoutProvider = (props: PropsWithChildren<SideBarLayoutProviderProps>) => {
+  const { brand = null, children, footer = null, theme = "dark", userDropDownMenu, userDropDownMenuToggle } = props;
+  return (
+    <SideBarLayoutContext.Provider value={{ brand, footer, theme, userDropDownMenu, userDropDownMenuToggle }}>
+      {children}
+    </SideBarLayoutContext.Provider>
+  );
+};
+
+const useSideBarLayoutContext = () => {
+  const context = useContext(SideBarLayoutContext);
+  if (context === null) {
+    throw new Error("useSideBarLayoutContext must be used within a SideBarLayoutProvider");
+  }
+  return context;
+};
+
+export { SideBarLayoutProvider, useSideBarLayoutContext, SideBarLayoutProviderProps };