Fix panel hide feature (#57)

Co-authored-by: SeverinoAmmirati <severino.ammirati@oncode.it>

Author: severinoAmmirati

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Fixed hide feature for tiles menu items
+
 ## [4.1.0] - 2024-05-27
 
 ### Added

cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx

@@ -1,8 +1,8 @@
 import React, { PropsWithChildren, ReactNode } from "react";
 import { PanelSideBarProvider, PanelSideBarLayout, PanelItem, PanelLinkRendererProps, usePanelSideBarContext } from "react-pattern-ui";
-import { faBars, faCogs } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faCogs, faInfo } from "@fortawesome/free-solid-svg-icons";
 
-type AppRoutes = "home" | "settings" | "dropdownTest" | "dropdown-test1" | "dropdown-test2";
+type AppRoutes = "home" | "settings" | "dropdownTest" | "dropdown-test1" | "dropdown-test2" | "info";
 type TSideBarMenuItem = PanelItem<AppRoutes>;
 
 // Configuration object for avoiding duplicated code
@@ -80,6 +80,19 @@ const getSidebarItems = (active?: boolean, disabled?: boolean, expanded?: boolea
       },
     ],
   },
+  {
+    id: "info",
+    title: "Info",
+    icon: faInfo,
+    display: false,
+    children: [
+      {
+        title: "Info",
+        id: "info",
+        active,
+      },
+    ],
+  },
 ];
 
 interface PanelSideBarProps extends PropsWithChildren {
@@ -246,4 +259,12 @@ describe("PanelSidebar.cy.tsx", () => {
     cy.get("#test-close-item").click();
     cy.get("li:has(.dropdown-toggle)").should("be.visible").should("not.have.class", "menu-open");
   });
+
+  it("check hidden panel", () => {
+    cy.mount(<PanelSideBarWithTiles />);
+
+    cy.get("button[title=Settings]").should("be.visible");
+    cy.get("button[title=Home]").should("be.visible");
+    cy.get("button[title=Info]").should("not.exist");
+  });
 });

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

@@ -6,8 +6,16 @@ import { PanelItem } from "./Definitions/PanelItem";
 import { PanelSideBarItem } from "./PanelSideBarItem";
 
 export const PanelSideBar = <TPanelItemId extends string, TPanelItem>() => {
-  const { activePanelId, menuItems, setActivePanel, renderFirstItemsLevelAsTiles, renderTilesAsLinks, LinkRenderer, theme } =
-    usePanelSideBarContext<TPanelItemId, TPanelItem>();
+  const {
+    activePanelId,
+    menuItems,
+    setActivePanel,
+    renderFirstItemsLevelAsTiles,
+    renderTilesAsLinks,
+    LinkRenderer,
+    theme,
+    hiddenMenuItemIds,
+  } = usePanelSideBarContext<TPanelItemId, TPanelItem>();
 
   const className = classNames(
     "panel-layout",
@@ -52,15 +60,17 @@ export const PanelSideBar = <TPanelItemId extends string, TPanelItem>() => {
 
     const PanelItemsRenderer = (props: { items: PanelItem<TPanelItemId, TPanelItem>[] }) => {
       const { items } = props;
-      return items?.map((item, index) =>
-        renderTilesAsLinks ? (
-          <LinkRenderer key={index} item={item}>
-            <ButtonIcon item={item} />
-          </LinkRenderer>
-        ) : (
-          <ButtonIcon key={index} item={item} />
-        ),
-      );
+      return items
+        ?.filter((x) => !hiddenMenuItemIds.includes(x.id))
+        .map((item, index) =>
+          renderTilesAsLinks ? (
+            <LinkRenderer key={index} item={item}>
+              <ButtonIcon item={item} />
+            </LinkRenderer>
+          ) : (
+            <ButtonIcon key={index} item={item} />
+          ),
+        );
     };
 
     return (