fix recursive selection

Author: Gianmarco Manni

CHANGELOG.md

@@ -11,24 +11,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Possibility to dinamically open or close `sidebar`
 - Possibility to dinamically toggle `menu items`
+- Added support for `light`, `dark` and `blue` theme in PanelSideBarLayout.
 
 ### Changed
 
 - `menuItems properties` are not locked by any states during the render process anymore. Changing externally the menu items will provide the correct menu
-- `topBarLeftCustomItems` and `topBarRigthCustomItems` renamed to `navbarLeftItems` and `navbarRightItems`
-- `UI elements` are now parameter of `SidebarLayout` and not of the context anymore
+- :boom:  `topBarLeftCustomItems` and `topBarRigthCustomItems` renamed to `navbarLeftItems` and `navbarRightItems`
+- `navbarLeftItems` and `navbarRightItems` have not default margin by default
+- default sidebar `width` to `14rem`
+- :boom:  `UI elements` are now parameter of `SidebarLayout` and not of the context anymore
 - PanelItem Id type changed from `string` to being strongly typed
 
 ### Fixed
 
 - When `footer` is null, the whole section will not be rendered
 - Unique key prop in a list warning
+- menu items provided with `expanded` to true are correctly displayed in `PanelSideBarLayout`
+- Active panel is now recognized recursively and not until the third deep level anymore
 
 ### Removed
 
-- `DeleteAction` component.
-- Built-in support for `userDropdown`. It should provided in the `navbarRightItems` items.
-- `localItems` property as menuItems can be fully controlled by the consumer.
+- :boom: `DeleteAction` component.
+- :boom: Built-in support for `userDropdown`. It should provided in the `navbarRightItems` items and define your style in your solution.
+- :boom: `localItems` property as menuItems can be fully controlled by the consumer.
+- :boom: removed `PanelSideBar` component and its relative contexts and should be replaced with `PanelSideBarLayout`. In order to migrate:
+  - assign `items` to `menuItems` in the `PanelSideBarProvider`
+  - set `renderFirstItemsLevelAsTiles` to false
+  - set `useToggleButton` in `PanelSideBarLayout` to true
+  - set `useResponsiveLayout` in `PanelSideBarLayout` to true
+  - move `brand` to `PanelSideBarLayout`
+  - move `footer` to `PanelSideBarLayout`
 
 ## [3.4.0] - 2024-03-12
 

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

@@ -4,6 +4,7 @@ import { useState, useRef, useEffect } from "react";
 import { Collapse, NavItem } from "reactstrap";
 import { PanelItem } from "./../PanelSideBar/Definitions/PanelItem";
 import { usePanelSideBarContext } from "./Context/PanelSideBarContext";
+import { hasActiveChildren } from "./Utils/getActivePanel";
 
 export interface PanelSideBarItemProps<TPanelItemId extends string, TPanelItem> {
   children: PanelItem<TPanelItemId, TPanelItem>;
@@ -13,12 +14,13 @@ export interface PanelSideBarItemProps<TPanelItemId extends string, TPanelItem>
   toggledItemIds: string[];
 }
 
+// eslint-disable-next-line complexity
 const PanelSideBarItem = <TPanelItemId extends string, TPanelItem>(props: PanelSideBarItemProps<TPanelItemId, TPanelItem>) => {
   const { depth = 0, children: item, onClick, toggledItemIds = [] } = props;
   const { LinkRenderer } = usePanelSideBarContext<TPanelItemId, TPanelItem>();
   const hasitem = !!item.children?.length;
-  const isActive = item.children?.find((s) => s.active) || item.active;
-  const [isOpen, setIsOpen] = useState(toggledItemIds?.includes(item.id) || item.expanded);
+  const isActive = (hasitem && item.children && hasActiveChildren(item.children)) || item.active;
+  const [isOpen, setIsOpen] = useState(isActive || toggledItemIds?.includes(item.id) || item.expanded);
   if (item.display === false) {
     return null;
   }

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) =>
-    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);
-};
+
+const getActivePanelInternal = <TPanelItemId extends string, TPanelItem>(items: PanelItem<TPanelItemId, TPanelItem>[])
+  : PanelItem<TPanelItemId, TPanelItem> | undefined => items.find((x) => x.children ? getActivePanelInternal(x.children) : x.active);  
+
+export const getActivePanel = <TPanelItemId extends string, TPanelItem>(items: PanelItem<TPanelItemId, TPanelItem>[], defaultActivePanelId?: TPanelItemId) =>  getActivePanelInternal(items) ?? items.find((x) => defaultActivePanelId ? x.id === defaultActivePanelId : x.id);
+
+export const hasActiveChildren = <TPanelItemId extends string, TPanelItem>(items: PanelItem<TPanelItemId, TPanelItem>[]) => !!getActivePanelInternal(items);
+

styles/Layout/_PanelSideBarLayout.scss

@@ -113,6 +113,11 @@ section.content:first-of-type {
 
   &.sidenav-light {
     background-color: $sidenav-light-bg;
+
+    @include media-breakpoint-up(lg) {
+      box-shadow: 0 0 0.5rem 0.125rem rgba($color: $gray-500, $alpha: 0.75);
+    }
+
     .side-nav {
       &__tiles {
         .tile {
@@ -195,7 +200,7 @@ section.content:first-of-type {
             }
           }
 
-          &.dropdown-toggle::after {
+          .nav-link.dropdown-toggle::after {
             @include chevron-light-right();
           }
         }
@@ -328,7 +333,7 @@ section.content:first-of-type {
           &.menu-open .nav-link.dropdown-toggle::after {
             @include chevron-blue-down();
           }
-          &.dropdown-toggle::after {
+          .nav-link.dropdown-toggle::after {
             @include chevron-blue-right();
           }
         }
@@ -500,20 +505,4 @@ $zindex-topnav: 1039 !default;
       }
     }
   }
-
-  // Behavior for the sidenav collapse on screens larger than the med breakpoint
-  #layout-sidenav.toggled {
-    #layout-sidenav__nav {
-      transform: translateX(-$sidenav-base-width);
-    }
-
-    #layout-sidenav__content {
-      margin-left: 0;
-
-      // Removes the sidenav overlay on screens larger than the med breakpoint
-      &:before {
-        display: none;
-      }
-    }
-  }
 }