bug fixes

Author: Gianmarco Manni

CHANGELOG.md

@@ -18,7 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `menuItems properties` are not locked by any states during the render process anymore. Changing externally the menu items will provide the correct menu
 - :boom:  `topBarLeftCustomItems` and `topBarRigthCustomItems` renamed to `navbarLeftItems` and `navbarRightItems`
 - `navbarLeftItems` and `navbarRightItems` have not default margin by default
-- default sidebar `width` to `14rem`
+- default sidebar `width` to `16rem`
 - :boom:  `UI elements` are now parameter of `SidebarLayout` and not of the context anymore
 - PanelItem Id type changed from `string` to being strongly typed
 

src/index.ts

@@ -3,4 +3,6 @@ export * from "./lib/Layout/AuthenticationLayout";
 // Panel sidebar layout
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBarLayout";
 export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext";
-export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelItem";
+export * from "./lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelItem";
+
+export * from "./lib/Paging/Paging";

styles/Layout/_PanelSideBarLayout.scss

@@ -219,16 +219,16 @@ section.content:first-of-type {
           color: $sidenav-dark-active-bg-color;
 
           background-color: $sidenav-dark-bg;
-          border:0px;
+          border: 0px;
 
           &.active {
-            border: 1px solid  $sidenav-dark-active-bg-color;
+            border: 1px solid $sidenav-dark-active-bg-color;
           }
 
           &:hover {
             background-color: $sidenav-dark-active-bg-color;
             border-color: $sidenav-dark-active-bg-color;
-            color:  $sidenav-dark-bg;
+            color: $sidenav-dark-bg;
           }
         }
       }
@@ -286,14 +286,17 @@ section.content:first-of-type {
     background-color: $sidenav-blue-bg;
     .side-nav {
       &__tiles {
+        background-color: $white;
         .tile {
           background-color: $sidenav-blue-bg;
+          border: 0;
+          border-radius: 0;
+          color: $sidenav-blue-active-color;
 
           &:hover,
           &.active {
             color: $sidenav-blue-active-color;
             background-color: $sidenav-blue-active-bg-color;
-            border-color: $sidenav-blue-active-bg-color;
           }
         }
       }
@@ -323,10 +326,10 @@ section.content:first-of-type {
             color: white;
           }
 
-          &.active,
-          .active {
-            background-color: $sidenav-blue-active-bg-color;
+          &:hover,
+          &.active {
             color: $sidenav-blue-active-color;
+            background-color: $sidenav-blue-active-bg-color;
           }
 
           &.menu-open .nav-link.dropdown-toggle::after {
@@ -406,7 +409,6 @@ section.content:first-of-type {
     > #side-nav {
       transition: $sidebar-transition;
       width: $tile-size;
-      display: none;
 
       li.nav-item {
         &.active {
@@ -436,7 +438,7 @@ section.content:first-of-type {
     > #side-nav {
       transition: $sidebar-transition;
       width: 0px;
-      
+
       li.nav-item {
         &.active {
           &:before {
@@ -486,37 +488,37 @@ $zindex-topnav: 1039 !default;
       @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 {
+        position: relative;
+        margin-left: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-width: 0;
+        flex-grow: 1;
+        min-height: 100vh;
       }
 
-      #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;
+      &.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;
+          }
         }
       }
     }

styles/Layout/_PanelSideBarNavbar.scss

@@ -9,7 +9,7 @@
 
   #sidebar-toggle {
     width: $toggle-btn-size;
-  
+
     &:hover {
       color: $white !important;
     }
@@ -58,8 +58,8 @@
       background-color: $navbar-light-bg;
     }
     #sidebar-toggle {
-        color: $topnav-light-toggler-color;
-      }
+      color: $topnav-light-toggler-color;
+    }
   }
 }
 #nav-top.panel-layout.navbar-blue {

styles/Layout/variables.scss

@@ -7,18 +7,17 @@ $primary: #007bc5;
 $primary-hover: #0069a7;
 $light: $white;
 
-// Color variables for the sidenav
 $topnav-base-height: 4rem;
 $navbar-padding-x: $navbar-padding-y;
 $usernav-base-height: calc(#{$topnav-base-height} - 1rem);
 
-$tile-size: 3rem;
+$tile-size: 3.438rem;
 $sidebar-transition: 0.25s ease-in-out;
 $sidebar-items-transition: #{0.2s $sidebar-transition};
 $slim-scrollbar-base-width: 0.25rem;
 
-$sidenav-base-width: 14rem; //remember to overwrite for your project to 18rem
-$sidenav-max-width: $sidenav-base-width; //remember to overwrite for your project to 18rem
+$sidenav-base-width: 16rem; 
+$sidenav-max-width: $sidenav-base-width;
 
 $toggle-base-width: 1rem; // used for toggle  as bar
 $toggle-btn-size: 2.5rem; // used for toggle  as button
@@ -48,9 +47,9 @@ $sidenav-blue-heading-color: fade-out(#0069a7, 0.75);
 $sidenav-blue-link-color: fade-out(#0069a7, 0.5);
 $sidenav-blue-icon-color: fade-out(#0069a7, 0.75);
 $sidenav-blue-footer-bg: #007bc5;
-$sidenav-blue-active-color: #0069a7;
+$sidenav-blue-active-color: $white;
 $sidenav-blue-active-bg-color:  #0069a7;
-$sidenav-blue-active-border-color: $primary;
+$sidenav-blue-active-border-color: $white;
 $svg-blue-attributes: "fill='white' strike='white'";
 
 // -- Sidenav Light
@@ -68,6 +67,6 @@ $sidenav-light-active-bg-color:  $gray-100;
 $svg-light-attributes: "fill='dark' strike='dark'";
 
 // Color variables for the topnav
-$topnav-dark-toggler-color: fade-out($white, 0.5); //define different
+$topnav-dark-toggler-color: fade-out($white, 0.5);
 $topnav-blue-toggler-color:#007bc5;
 $topnav-light-toggler-color: $gray-900;