final

Author: Gianmarco Manni

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

@@ -6,10 +6,17 @@ import { PanelItem } from "./Definitions/PanelItem";
 import { PanelSideBarItem } from "./PanelSideBarItem";
 
 export const PanelSideBar = <TPanelItemId extends string, TPanelItem>() => {
-  const { activePanelId, menuItems, setActivePanel, toggledMenuItemIds, toggleMenuItem,  renderFirstItemsLevelAsTiles, renderTilesAsLinks, LinkRenderer, theme } = usePanelSideBarContext<
-    TPanelItemId,
-    TPanelItem
-  >();
+  const {
+    activePanelId,
+    menuItems,
+    setActivePanel,
+    toggledMenuItemIds,
+    toggleMenuItem,
+    renderFirstItemsLevelAsTiles,
+    renderTilesAsLinks,
+    LinkRenderer,
+    theme,
+  } = usePanelSideBarContext<TPanelItemId, TPanelItem>();
 
   const className = classNames(
     "panel-layout",

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

@@ -1,10 +1,13 @@
 import { PanelItem } from "../Definitions/PanelItem";
 
+const getActivePanelInternal = <TPanelItemId extends string, TPanelItem>(
+  items: PanelItem<TPanelItemId, TPanelItem>[],
+): PanelItem<TPanelItemId, TPanelItem> | undefined => items.find((x) => (x.children ? getActivePanelInternal(x.children) : x.active));
 
-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);
+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);

src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx

@@ -34,7 +34,6 @@ export interface PanelSideBarLayoutProps extends PropsWithChildren {
    */
   useToggleButton?: boolean;
 
-
   useResponsiveLayout?: boolean;
 }
 
@@ -47,23 +46,27 @@ export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(prop
     footer = undefined,
     collapsible = true,
     useToggleButton = false,
-    useResponsiveLayout = false,  
+    useResponsiveLayout = false,
   } = props;
 
-  
   const { isSidebarOpen, toggleSidebar, renderFirstItemsLevelAsTiles } = usePanelSideBarContext<TPanelItemId, TPanelItem>();
 
   if (useResponsiveLayout && !useToggleButton) {
-    throw new Error("Responsive layout can be used only with toggle button in the navbar!")
+    throw new Error("Responsive layout can be used only with toggle button in the navbar!");
   }
   return (
     <>
-      <PanelSidebarNavbar useToggleButton={useToggleButton} brand={brand} navbarRightItems={navbarRightItems} navbarLeftItems={navbarLeftItems} />
+      <PanelSidebarNavbar
+        useToggleButton={useToggleButton}
+        brand={brand}
+        navbarRightItems={navbarRightItems}
+        navbarLeftItems={navbarLeftItems}
+      />
       <section
         id="main-section"
         className={classNames(
           { toggled: !isSidebarOpen },
-          { "responsive-layout" : useResponsiveLayout},
+          { "responsive-layout": useResponsiveLayout },
           { "section-no-tiles": !renderFirstItemsLevelAsTiles },
           { "section-tiles": renderFirstItemsLevelAsTiles },
         )}

styles/Layout/_PanelSideBarLayout.scss

@@ -121,7 +121,9 @@ section.content:first-of-type {
     .side-nav {
       &__tiles {
         .tile {
+          color: $sidenav-light-link-color;
           background-color: $sidenav-light-bg;
+          border: 0px;
 
           &:hover,
           &.active {
@@ -214,12 +216,19 @@ section.content:first-of-type {
     .side-nav {
       &__tiles {
         .tile {
+          color: $sidenav-dark-active-bg-color;
+
           background-color: $sidenav-dark-bg;
+          border:0px;
+
+          &.active {
+            border: 1px solid  $sidenav-dark-active-bg-color;
+          }
 
           &:hover {
-            color: $sidenav-dark-active-color;
             background-color: $sidenav-dark-active-bg-color;
             border-color: $sidenav-dark-active-bg-color;
+            color:  $sidenav-dark-bg;
           }
         }
       }
@@ -252,16 +261,6 @@ section.content:first-of-type {
           &.active {
             position: relative;
 
-            &:before {
-              content: " ";
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 3px;
-              height: 100%;
-              background-color: $sidenav-dark-active-color;
-            }
-
             .nav-link {
               color: $sidenav-dark-link-active-color;
               font-weight: 600;
@@ -406,7 +405,16 @@ section.content:first-of-type {
   .section-tiles.toggled {
     > #side-nav {
       transition: $sidebar-transition;
-      width: #{$tile-size + $slim-scrollbar-base-width};
+      width: $tile-size;
+      display: none;
+
+      li.nav-item {
+        &.active {
+          &:before {
+            display: none;
+          }
+        }
+      }
     }
 
     > #side-nav-toggle {
@@ -427,7 +435,15 @@ section.content:first-of-type {
   .section-no-tiles.toggled {
     > #side-nav {
       transition: $sidebar-transition;
-      width: #{$slim-scrollbar-base-width};
+      width: 0px;
+      
+      li.nav-item {
+        &.active {
+          &:before {
+            display: none;
+          }
+        }
+      }
     }
 
     > #side-nav-toggle {

styles/Layout/index.scss

@@ -1,3 +1,3 @@
 @import "./variables";
 @import "./PanelSideBarNavbar";
-@import "./PanelSideBarLayout";
+@import "./PanelSideBarLayout";

styles/Layout/variables.scss

@@ -33,9 +33,9 @@ $sidenav-dark-heading-color: fade-out($white, 0.75);
 $sidenav-dark-link-color: fade-out($white, 0.5);
 $sidenav-dark-icon-color: fade-out($white, 0.75);
 $sidenav-dark-footer-bg: $gray-800;
-$sidenav-dark-active-color: $white; //TODO: define different
-$sidenav-dark-active-bg-color: $primary-hover; // TODO: define different
-$sidenav-dark-active-border-color: $primary; // TODO: define different
+$sidenav-dark-active-color: $gray-900;
+$sidenav-dark-active-bg-color:  $white;
+$sidenav-dark-active-border-color:  $white;
 $svg-dark-attributes: "fill='white' strike='white'";
 
 // Sidenav-blue
@@ -63,9 +63,8 @@ $sidenav-light-link-color: $gray-600;
 $sidenav-light-link-active-color: $black;
 $sidenav-light-icon-color: $gray-500;
 $sidenav-light-footer-bg: $gray-200;
-$sidenav-light-active-color: $white; //TODO: define different
-$sidenav-light-active-bg-color: $primary-hover; // TODO: define different
-$sidenav-light-active-border-color: $primary; // TODO: define different
+$sidenav-light-active-color: $primary;
+$sidenav-light-active-bg-color:  $gray-100;
 $svg-light-attributes: "fill='dark' strike='dark'";
 
 // Color variables for the topnav