Merged SideBarLayoutContext and PaneMenulItem (#37)

- Removed `SideBarLayoutContext` as can be replaced by
`PanelSideBarLayoutContext`
- Merged `PaneMenulItem` into `PanelItem`

Author: severinoAmmirati

CHANGELOG.md

@@ -11,9 +11,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - PanelSidebar cypress test and toggle it on any screen size
 
+### Merged
+
+- Merged `PaneMenulItem` into `PanelItem`
+
 ### Removed
 
 - `DateHandler` utils as it belongs to another package and will be replaced in the future
+- Removed `SideBarLayoutContext` as can be replaced by `PanelSideBarLayoutContext`
 
 ### Fixed
 

src/index.ts

@@ -3,13 +3,11 @@ export * from "./lib/Layout/AuthenticationLayout";
 
 // Panel sidebar layout
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBarLayout";
-export * from "./lib/Layout/PanelSideBarLayout/Context/PanelSideBarLayoutContext";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelSideBarMenuItem";
 
 // 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/PanelSideBarLayout/Context/PanelSideBarLayoutContext.tsx

@@ -1,48 +1,74 @@
 import React, { ComponentType, createContext, ReactNode, useContext, useState } from "react";
-import { PanelItem, PanelMenuItem } from "../Definitions/PanelSideBarMenuItem";
+import { PanelItem } from "../Definitions/PanelSideBarMenuItem";
 
 export interface PanelLinkRendererProps<T> {
-  item: PanelMenuItem<T>;
+  item: PanelItem<T>;
   children: ReactNode;
 }
 
-export type MenuItemToggleFn<TMenuItem> = (menuItem: PanelMenuItem<TMenuItem>) => void;
+export type MenuItemToggleFn<TMenuItem> = (menuItem: PanelItem<TMenuItem>) => void;
 
 export interface PanelSideBarContextProps<TPanelItem, TMenuItem> {
   activePanelId: string;
   /**
    * The global panel items.
    */
   globalItems: PanelItem<TPanelItem, TMenuItem>[];
+  /**
+   * The local panel items.
+   */
+  localItems: PanelItem[];
   /**
    * The component used to render the menu item links.
    */
   setActivePanel: (panelId: string) => void;
   LinkRenderer: ComponentType<PanelLinkRendererProps<TMenuItem>>;
   toggledMenuItemIds: string[];
   toggleMenuItem: MenuItemToggleFn<TMenuItem>;
+  /**
+   * The footer content.
+   */
+  footer?: ReactNode;
+  /**
+   * The brand content shown on the top navigation bar.
+   */
+  brand?: ReactNode;
+  /**
+   * The user dropdown toggle content.
+   */
+  userDropDownMenuToggle?: ReactNode;
+  /**
+   * The user dropdown menu content.
+   */
+  userDropDownMenu?: ReactNode;
+  /**
+   * The other menu content.
+   */
+  topBarCustomItems?: ReactNode[];
 }
 
 export const PanelSideBarContext = createContext<PanelSideBarContextProps<any, any> | null>(null);
 
 export interface PanelSideBarMenuProviderProps<TPanelItem, TMenuItem>
-  extends Pick<PanelSideBarContextProps<TPanelItem, TMenuItem>, "globalItems" | "LinkRenderer"> {
+  extends Pick<PanelSideBarContextProps<TPanelItem, TMenuItem>, "globalItems" | "LinkRenderer" | "brand" | "footer" | "userDropDownMenu" | "userDropDownMenuToggle" | "topBarCustomItems" | "localItems"> {
   /**
    * The children elements.
    */
   children: React.ReactNode;
 }
 
 export const PanelSideBarProvider = <TPanelItem, TMenuItem>(props: PanelSideBarMenuProviderProps<TPanelItem, TMenuItem>) => {
-  const { children, globalItems, LinkRenderer } = props;
+  const { children, globalItems, localItems, LinkRenderer, brand = null, footer = null, userDropDownMenu, userDropDownMenuToggle, topBarCustomItems } = props;
 
-  const firstActivePanel = globalItems.find((x) => x.items?.find((y) => y.active)) ?? globalItems.find((x) => x.id);
+  const firstActivePanel = globalItems.find(x => x.children
+      ?.find(y => y.children ? y.children.find(s => s.active) : y.active));
 
   const getActivePanelId = () => firstActivePanel?.id ?? "";
 
   const [activePanelId, setActivePanelId] = useState(getActivePanelId());
 
-  const [toggledMenuItemIds, setToggledMenuItemIds] = useState<string[]>([firstActivePanel?.items?.find((x) => x.active)?.id ?? ""]);
+  const [toggledMenuItemIds, setToggledMenuItemIds] = useState<string[]>([(firstActivePanel?.children ?
+      firstActivePanel.children?.find((x) => x.children?.find(s => s.active)) : firstActivePanel?.children?.find((x) => x.active))?.id ?? ""]);
 
   const setActivePanel = (panelId: string) => setActivePanelId(panelId);
 
@@ -63,10 +89,16 @@ export const PanelSideBarProvider = <TPanelItem, TMenuItem>(props: PanelSideBarM
       value={{
         activePanelId,
         globalItems,
+        localItems,
         LinkRenderer,
         setActivePanel,
         toggledMenuItemIds,
         toggleMenuItem,
+        footer,
+        userDropDownMenu,
+        userDropDownMenuToggle,
+        topBarCustomItems,
+        brand
       }}
     >
       {children}

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

@@ -1,11 +1,11 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { ReactNode } from "react";
+import {ReactNode} from "react";
 
 export type PanelItem<TPanelItem = Record<string, unknown>, TMenuItem = Record<string, unknown>> = TPanelItem & {
   /**
    * The panel icon.
    */
-  icon: IconProp;
+  icon?: IconProp;
   /**
    * The panel item identifier.
    */
@@ -19,34 +19,15 @@ export type PanelItem<TPanelItem = Record<string, unknown>, TMenuItem = Record<s
   /**
    * The panel menu items.
    */
-  items: PanelMenuItem<TMenuItem>[];
+  children?: PanelItem<TMenuItem>[];
   /**
    * Whether the panel is disabled.
    */
   disabled?: boolean;
   /**
    * The panel title.
    */
-  title?: string;
-};
-
-export type PanelMenuItem<T = Record<string, unknown>> = T & {
-  /**
-   * The menu item identifier.
-   */
-  id: string;
-  /**
-   * The menu item title.
-   */
   title: ReactNode;
-  /**
-   * Whether the item is active.
-   */
-  active?: boolean;
-  /**
-   * The menu item children items.
-   */
-  children?: Omit<PanelMenuItem<T>, "children">[];
   /**
    * Whether the item should be displayed.
    */
@@ -56,7 +37,7 @@ export type PanelMenuItem<T = Record<string, unknown>> = T & {
    */
   expanded?: boolean;
   /**
-   * The menu item icon.
+   * Whether the item is active.
    */
-  icon?: IconProp;
+  active?: boolean;
 };

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelSideBarMenuItem.ts

@@ -1,26 +1,24 @@
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
-import { ComponentType } from "react";
+import {ComponentType, useState} from "react";
 import { Collapse, NavItem } from "reactstrap";
 import { LinkRendererProps } from "src/lib/SideBar/SideBarMenuContext";
-import { PanelMenuItem } from "./Definitions/PanelSideBarMenuItem";
+import {PanelItem} from "src/lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelSideBarMenuItem";
 
 export interface PanelSideBarItemProps {
-  item: PanelMenuItem<unknown>;
+  children: PanelItem<unknown>;
   LinkRenderer: ComponentType<LinkRendererProps>;
-  onClick?: (menuItem: PanelMenuItem<unknown>) => void;
+  onClick?: (menuItem: PanelItem<unknown>) => void;
   depth?: number;
   active?: boolean;
   toggledItemIds: string[];
 }
 
 const PanelSideBarItem = (props: PanelSideBarItemProps) => {
-  const { depth = 0, item, LinkRenderer, onClick, toggledItemIds = [] } = props;
-
-  const hasChildren = !!item.children?.length;
-  const isOpen = toggledItemIds?.includes(item.id) || item.expanded;
+  const { depth = 0, children: item, LinkRenderer, onClick, toggledItemIds = [] } = props;
 
+  const hasitem = !!item.children?.length;
+  const [isOpen, setIsOpen] = useState(toggledItemIds?.includes(item.id) || item.expanded);
   if (item.display === false) {
     return null;
   }
@@ -29,34 +27,34 @@ const PanelSideBarItem = (props: PanelSideBarItemProps) => {
     <>
       <NavItem
         onClick={() => onClick && onClick(item)}
-        className={classNames({ "menu-open": isOpen, active: item.active })}
+        className={classNames({ "menu-open": isOpen, active: item?.children ? item.children?.find(s => s.active) : item.active })}
         style={{ paddingLeft: depth ? `${depth + 1}rem` : undefined }}
       >
-        {hasChildren ? (
-          <div className={classNames({ dropend: !isOpen })}>
-            <a role="button" className={classNames("nav-link", { "dropdown-toggle": hasChildren })}>
-              {item.icon && <FontAwesomeIcon className="me-2" icon={item.icon as IconProp} />}
+        {hasitem ? (
+          <div>
+            <a role="button" className={classNames("nav-link", { "dropdown-toggle": hasitem })} onClick={() => setIsOpen(!isOpen)}>
+              {item.icon && <FontAwesomeIcon className="me-2" icon={item.icon} />}
               <div className="text-justify">{item.title}</div>
             </a>
           </div>
         ) : (
           <>
             <LinkRenderer item={item}>
               <span className="nav-link">
-                {item.icon && <FontAwesomeIcon icon={item.icon as IconProp} className="me-2" />}
+                {item.icon && <FontAwesomeIcon icon={item.icon} className="me-2" />}
                 {item.title}
               </span>
             </LinkRenderer>
           </>
         )}
       </NavItem>
 
-      {hasChildren && (
-        <Collapse isOpen={isOpen} navbar className={classNames("items-menu", { "mb-1": isOpen })}>
+      {hasitem && (
+        <Collapse isOpen={isOpen} navbar className={classNames("item-menu", { "mb-1": isOpen })}>
           {item.children?.map((childItem) => (
             <PanelSideBarItem
               key={childItem.id}
-              item={childItem}
+              children={childItem}
               LinkRenderer={LinkRenderer}
               onClick={() => onClick && onClick(childItem)}
               depth={depth + 1}

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

@@ -5,12 +5,14 @@ import { usePanelSideBarContext } from "./Context/PanelSideBarContext";
 import { PanelItem } from "./Definitions/PanelSideBarMenuItem";
 import { PanelSideBarItem } from "./PanelSideBarItem";
 import { useState } from "react";
-interface PanelSideBarProps {
-  localItems?: PanelItem[];
-}
 
-export const PanelSideBar = (props: PanelSideBarProps) => {
-  const { localItems = [] } = props;
+export const PanelSideBar = () => {
+  const { activePanelId, globalItems, localItems, LinkRenderer, setActivePanel, toggledMenuItemIds, toggleMenuItem } = usePanelSideBarContext();
+  const panelItems = localItems.concat(globalItems);
+
+  if (globalItems.find(x => !x.icon) || localItems.find(x => !x.icon)) {
+      throw new Error("Outer panel icon is required");
+  }
 
   let localMenuId: string | null = null;
 
@@ -21,11 +23,8 @@ export const PanelSideBar = (props: PanelSideBarProps) => {
 
   const [localItemId, setLocalItemId] = useState<string | null>(localMenuId);
 
-  const { activePanelId, globalItems, LinkRenderer, setActivePanel, toggledMenuItemIds, toggleMenuItem } = usePanelSideBarContext();
-
   const localActivePanelId = localItemId ?? activePanelId;
-  const activePanel: PanelItem = globalItems.find((x) => x.id === localActivePanelId);
-  const localActivePanel: PanelItem | undefined = localItems?.find((x) => x.id === localActivePanelId);
+  const activePanel: PanelItem | undefined = panelItems.find((x) => x.id === localActivePanelId);
 
   const panelItemsRenderer = (items: PanelItem[]) =>
     items?.map(({ disabled, icon, onClick, id, title }) => (
@@ -42,10 +41,10 @@ export const PanelSideBar = (props: PanelSideBarProps) => {
             setActivePanel(id);
           }
         }}
-        title={title}
+        title={typeof title == "string" ? String(title) : ""}
         disabled={disabled}
       >
-        <FontAwesomeIcon icon={icon} size="lg" fixedWidth />
+          {icon && <FontAwesomeIcon icon={icon} size="lg" fixedWidth />}
       </Button>
     ));
 
@@ -57,19 +56,15 @@ export const PanelSideBar = (props: PanelSideBarProps) => {
       </div>
 
       <div className="side-nav__items">
-        {activePanel?.items?.map((item) => (
+        {activePanel?.children?.map((item) => (
           <PanelSideBarItem
             key={item.id}
-            item={item}
+            children={item}
             LinkRenderer={LinkRenderer}
             onClick={(menuItem) => toggleMenuItem(menuItem)}
             toggledItemIds={toggledMenuItemIds}
           />
         ))}
-
-        {localActivePanel?.items?.map((item) => (
-          <PanelSideBarItem key={item.id} item={item} LinkRenderer={LinkRenderer} toggledItemIds={toggledMenuItemIds} />
-        ))}
       </div>
     </nav>
   );