Fix settings sidebar to not disappear, fix style of nav-item icon to be the same in case of Children and not

Author: Gianmarco Manni

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

@@ -9,13 +9,15 @@ export interface PanelLinkRendererProps<T> {
 export type MenuItemToggleFn<TMenuItem> = (menuItem: PanelMenuItem<TMenuItem>) => void;
 
 export interface PanelSideBarContextProps<TPanelItem, TMenuItem> {
+  activePanelId: string;
   /**
    * The global panel items.
    */
   globalItems: PanelItem<TPanelItem, TMenuItem>[];
   /**
    * The component used to render the menu item links.
    */
+  setActivePanel: (panelId: string) => void;
   LinkRenderer: ComponentType<PanelLinkRendererProps<TMenuItem>>;
   toggledMenuItemIds: string[];
   toggleMenuItem: MenuItemToggleFn<TMenuItem>;
@@ -34,8 +36,13 @@ export interface PanelSideBarMenuProviderProps<TPanelItem, TMenuItem>
 export const PanelSideBarProvider = <TPanelItem, TMenuItem>(props: PanelSideBarMenuProviderProps<TPanelItem, TMenuItem>) => {
   const { children, globalItems, LinkRenderer } = props;
 
+  const getFirstPanelId = () => globalItems.find((x) => x.id)?.id ?? "";
+  const [activePanelId, setActivePanelId] = useState(getFirstPanelId());
+
   const [toggledMenuItemIds, setToggledMenuItemIds] = useState<string[]>([]);
 
+  const setActivePanel = (panelId: string) => setActivePanelId(panelId);
+
   const toggleMenuItem: MenuItemToggleFn<TMenuItem> = (menuItem) => {
     setToggledMenuItemIds((prev) => {
       const idExists = !!prev.find((id) => id == menuItem.id);
@@ -51,8 +58,10 @@ export const PanelSideBarProvider = <TPanelItem, TMenuItem>(props: PanelSideBarM
   return (
     <PanelSideBarContext.Provider
       value={{
+        activePanelId,
         globalItems,
         LinkRenderer,
+        setActivePanel,
         toggledMenuItemIds,
         toggleMenuItem,
       }}

src/Layout/PanelSideBarLayout/PanelSideBar/PanelSideBarItem.tsx

@@ -35,7 +35,7 @@ const PanelSideBarItem = (props: PanelSideBarItemProps) => {
         {hasChildren ? (
           <div className={classNames({ dropend: !isOpen })}>
             <a role="button" className={classNames("nav-link", { "dropdown-toggle": hasChildren })}>
-              {item.icon && <FontAwesomeIcon icon={item.icon as IconProp} fixedWidth />}
+              {item.icon && <FontAwesomeIcon className="me-2" icon={item.icon as IconProp} />}
               <div className="text-justify">{item.title}</div>
             </a>
           </div>

src/Layout/PanelSideBarLayout/PanelSideBar/PanelSidebar.tsx

@@ -12,29 +12,32 @@ interface PanelSideBarProps {
 export const PanelSideBar = (props: PanelSideBarProps) => {
   const { localItems = [] } = props;
 
-  const { globalItems, LinkRenderer, toggledMenuItemIds, toggleMenuItem } = usePanelSideBarContext();
+  let localMenuId: string | null = null;
 
-  let initialActivePanel: string;
   if (localItems?.length > 0) {
     const [firstLocalItem] = localItems;
-    initialActivePanel = firstLocalItem.id;
-  } else {
-    initialActivePanel = globalItems.find((x) => x.id)?.id ?? "";
+    localMenuId = firstLocalItem.id;
   }
 
-  const [activePanelId, setActivePanelId] = useState<string>(initialActivePanel);
+  const [localItemId, setLocalItemId] = useState<string | null>(localMenuId);
 
-  const activePanel: PanelItem = globalItems.find((x) => x.id === activePanelId);
-  const localActivePanel: PanelItem | undefined = localItems?.find((x) => x.id === activePanelId);
+  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 panelItemsRenderer = (items: PanelItem[]) =>
     items?.map(({ disabled, icon, id, title }) => (
       <Button
         key={id}
         color="primary"
         outline
-        className={classNames("tile", { active: activePanelId === id })}
-        onClick={() => setActivePanelId(id)}
+        className={classNames("tile", { active: localActivePanelId === id })}
+        onClick={() => {
+          setLocalItemId(null);
+          setActivePanel(id);
+        }}
         title={title}
         disabled={disabled}
       >