x

Author: Gianmarco Manni

rollup.config.mjs

@@ -21,9 +21,9 @@ const plugins = [
   }),
   nodeResolve(),
   terser({
-    output: { comments: false },
+    output: { comments: true },
     compress: {
-      drop_console: true,
+      drop_console: false,
     },
   }),
 ];

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext.tsx

@@ -1,4 +1,4 @@
-import React, { Context, createContext, useCallback, useContext, useEffect, useState } from "react";
+import React, { Context, createContext, useCallback, useContext, useState } from "react";
 import { getActivePanel } from "../Utils/getActivePanel";
 import { PanelSideBarContextProps } from "./PanelSideBarContextProps";
 
@@ -22,8 +22,10 @@ export interface PanelSideBarMenuProviderProps<TPanelItemId extends string, TPan
 export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
   props: PanelSideBarMenuProviderProps<TPanelItemId, TPanelItem>,
 ) => {
-  const { children, defaultActivePanelId, sidebarOpenByDefault = true } = props;
-  const [menuItems, setMenuItems] = useState(props.menuItems);
+  const { children, defaultActivePanelId, sidebarOpenByDefault = true, menuItems: defaultMenuItems } = props;
+  console.log(defaultMenuItems);
+  const [menuItems, setMenuItems] = useState(defaultMenuItems);
+  console.log(menuItems);
   const [isSidebarOpen, setIsSidebarOpen] = useState(sidebarOpenByDefault);
   const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
 
@@ -53,8 +55,6 @@ export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
     }
   }, []);
 
-  useEffect(() => recomputeActivePanel(), [menuItems]);
-
   return (
     <PanelSideBarContext.Provider
       value={{

src/lib/Layout/PanelSideBarLayout/PanelSideBar/PanelSidebar.tsx

@@ -19,11 +19,12 @@ export const PanelSideBar = <TPanelItemId extends string, TPanelItem>(props: Pan
   >();
 
   if (renderFirstItemsLevelAsTiles) {
-    if (menuItems.find((x) => !x.icon)) {
+    console.log(menuItems);
+    if (menuItems?.find((x) => !x.icon)) {
       throw new Error("Outer panel icon is required");
     }
 
-    const activePanel: PanelItem<TPanelItemId, TPanelItem> | undefined = menuItems.find((x) => x.id === activePanelId);
+    const activePanel: PanelItem<TPanelItemId, TPanelItem> | undefined = menuItems?.find((x) => x.id === activePanelId);
     const ButtonIcon = (props: { item: PanelItem<TPanelItemId, TPanelItem> }) => {
       const {
         item: { disabled, icon, onClick, id, title },

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Utils/getActivePanel.ts

@@ -1,9 +1,10 @@
 import { PanelItem } from "../Definitions/PanelItem";
 
 export const getActivePanel = <TPanelItemId extends string, TPanelItem>(items: PanelItem<TPanelItemId, TPanelItem>[], defaultActivePanelId?: TPanelItemId) => {
-  const activePanel = items.find((x) =>
+  console.log(items);
+  const activePanel = items?.find((x) =>
     x.children ? x.children.find((y) => (y.children ? y.children.find((s) => s.active) : y.active)) : x.active,
   );
 
-  return activePanel ?? items.find((x) => (defaultActivePanelId ? x.id === defaultActivePanelId : x.id));
+  return activePanel ?? items?.find((x) => (defaultActivePanelId ? x.id === defaultActivePanelId : x.id));
 };