x

Author: Gianmarco Manni

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

@@ -42,7 +42,9 @@ export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
 
   const [activePanelId, setActivePanelId] = useState(getActivePanel(menuItems, defaultActivePanelId)?.id);
   const setActivePanel = (panelId: TPanelItemId) => setActivePanelId(panelId);
-  const [toggledMenuItemIds, setToggledMenuItemIds] = useState<TPanelItemId[]>(activePanelId ? [activePanelId] : []);
+
+  const preExpandedMenuItemIds = menuItems.filter((x) => x.expanded).map((x) => x.id);
+  const [toggledMenuItemIds, setToggledMenuItemIds] = useState<TPanelItemId[]>(activePanelId ? preExpandedMenuItemIds.concat(activePanelId) : preExpandedMenuItemIds);
   const toggleMenuItem: MenuItemToggleFn<TPanelItemId> = (menuItemId) => {
     setToggledMenuItemIds((prev) => {
       const idExists = !!prev.find((id) => id == menuItemId);

styles/Layout/_PanelSideBarLayout.scss

@@ -115,10 +115,9 @@ section.content:first-of-type {
     background-color: $sidenav-light-bg;
     .side-nav {
       &__tiles {
-  
         .tile {
           background-color: $sidenav-light-bg;
-  
+
           &:hover,
           &.active {
             color: $sidenav-light-active-color;
@@ -127,26 +126,26 @@ section.content:first-of-type {
           }
         }
       }
-  
+
       &__items {
         &::-webkit-scrollbar {
           width: 0.25rem;
         }
-    
+
         &::-webkit-scrollbar-thumb {
           background-color: $sidenav-light-color;
         }
-    
+
         &::-webkit-scrollbar-track-piece {
           background-color: $sidenav-light-bg;
         }
 
         li.nav-item {
-          color: $sidenav-light-color;   
+          color: $sidenav-light-color;
 
-          &.active{
+          &.active {
             position: relative;
-        
+
             &:before {
               content: " ";
               position: absolute;
@@ -156,7 +155,7 @@ section.content:first-of-type {
               height: 100%;
               background-color: $primary;
             }
-      
+
             .nav-link {
               color: $sidenav-light-link-active-color;
               font-weight: 600;
@@ -171,31 +170,31 @@ section.content:first-of-type {
           &.menu-open .nav-link.dropdown-toggle::after {
             @include chevron-light-down();
           }
-          
+
           .nav-link {
             color: $sidenav-light-link-color;
-      
+
             .sb-nav-link-icon {
               color: $sidenav-light-icon-color;
             }
-      
+
             .sb-sidenav-collapse-arrow {
               color: $sidenav-light-icon-color;
             }
-      
+
             &:hover {
               color: $sidenav-light-link-active-color;
             }
-      
+
             &.active {
               color: $sidenav-light-link-active-color;
-      
+
               .sb-nav-link-icon {
                 color: $sidenav-light-link-active-color;
               }
             }
           }
-          
+
           &.dropdown-toggle::after {
             @include chevron-light-right();
           }
@@ -211,24 +210,24 @@ section.content:first-of-type {
       &__tiles {
         .tile {
           background-color: $sidenav-dark-bg;
-  
-          &:hover{
+
+          &:hover {
             color: $sidenav-dark-active-color;
             background-color: $sidenav-dark-active-bg-color;
             border-color: $sidenav-dark-active-bg-color;
           }
         }
       }
-  
+
       &__items {
         &::-webkit-scrollbar {
           width: 0.25rem;
         }
-    
+
         &::-webkit-scrollbar-thumb {
           background-color: $sidenav-dark-color;
         }
-    
+
         &::-webkit-scrollbar-track-piece {
           background-color: $sidenav-dark-bg;
         }
@@ -239,15 +238,15 @@ section.content:first-of-type {
             div {
               color: $sidenav-dark-link-active-color;
             }
-          }  
+          }
         }
-        
+
         li.nav-item {
           color: $sidenav-dark-color;
-  
-          &.active{
+
+          &.active {
             position: relative;
-        
+
             &:before {
               content: " ";
               position: absolute;
@@ -257,7 +256,7 @@ section.content:first-of-type {
               height: 100%;
               background-color: $sidenav-dark-active-color;
             }
-      
+
             .nav-link {
               color: $sidenav-dark-link-active-color;
               font-weight: 600;
@@ -267,11 +266,11 @@ section.content:first-of-type {
             color: $sidenav-dark-active-color;
             background-color: $sidenav-dark-bg;
           }
-  
+
           &.menu-open .nav-link.dropdown-toggle::after {
             @include chevron-dark-down();
           }
-          &.dropdown-toggle::after {
+          .nav-link.dropdown-toggle::after {
             @include chevron-dark-right();
           }
         }
@@ -283,10 +282,9 @@ section.content:first-of-type {
     background-color: $sidenav-blue-bg;
     .side-nav {
       &__tiles {
-
         .tile {
           background-color: $sidenav-blue-bg;
-  
+
           &:hover,
           &.active {
             color: $sidenav-blue-active-color;
@@ -295,28 +293,28 @@ section.content:first-of-type {
           }
         }
       }
-  
+
       &__items {
         &::-webkit-scrollbar {
           width: 0.25rem;
         }
-    
+
         &::-webkit-scrollbar-thumb {
           background-color: $sidenav-blue-color;
         }
-    
+
         &::-webkit-scrollbar-track-piece {
           background-color: $sidenav-blue-bg;
         }
 
         li.nav-item {
           color: $sidenav-blue-color;
-  
+
           &:hover {
             color: $sidenav-blue-active-color;
             background-color: $sidenav-blue-active-color;
           }
-  
+
           .nav-link {
             color: white;
           }
@@ -367,7 +365,6 @@ section.content:first-of-type {
         color: $sidenav-dark-bg;
       }
     }
-
   }
 
   &.side-nav-toggle-light {
@@ -396,7 +393,6 @@ section.content:first-of-type {
       background-color: $sidenav-blue-hover;
     }
   }
-
 }
 
 @include media-breakpoint-up(xs) {
@@ -444,3 +440,80 @@ section.content:first-of-type {
     }
   }
 }
+
+$zindex-content: 1037 !default;
+$zindex-sidenav: 1038 !default;
+$zindex-topnav: 1039 !default;
+
+// Responsive styling for the sidenav layout
+@include media-breakpoint-down(lg) {
+  #main-section.responsive-layout {
+    #side-nav {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      top: $topnav-base-height;
+      width: $sidenav-base-width;
+      flex-basis: $sidenav-base-width;
+      flex-shrink: 0;
+      transition: transform 0.15s ease-in-out;
+      z-index: $zindex-sidenav;
+      // Mobile first transform - by default the sidenav will be moved off-canvas
+      transform: translateX(-$sidenav-base-width);
+
+      @include media-breakpoint-up(lg) {
+        box-shadow: 0 0 0.5rem 0.125rem rgba($color: $gray-500, $alpha: 0.75);
+      }
+    }
+
+    #main-content-body {
+      position: relative;
+      margin-left: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      min-width: 0;
+      flex-grow: 1;
+      min-height: 100vh;
+    }
+
+    &.toggled {
+      #side-nav {
+        transform: translateX(0);
+        box-shadow: unset;
+      }
+
+      #main-content-body {
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          background: $black;
+          z-index: $zindex-content;
+          opacity: 0.5;
+          transition: opacity 0.3s ease-in-out;
+        }
+      }
+    }
+  }
+
+  // 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;
+      }
+    }
+  }
+}