version 4.0 udpate

Complete refactor! Main layout changed, new pages added, build system changed, now uses Gulp 4, Bootstrap SCSS, custom SCSS, new design, dropped Morris and Flot Charts, added Chart.js for charts, new example pages, and more...

scss/navs/fixed.scss

@@ -1,8 +0,0 @@
-// Fixed Nav Option
-// Add .fixed-top class to top .navbar-nav and to .sidebar - add .fixed-nav to body
-
-.sidebar.fixed-top {
-  // top: $navbar-base-height;
-  // height: calc(100vh - #{$navbar-base-height});
-  // overflow-y: auto;
-}

scss/navs/sidebar.scss

@@ -68,6 +68,10 @@
           &:active {
             background-color: $gray-300;
           }
+          &.active {
+            color: $primary;
+            font-weight: 700;
+          }
         }
       }
     }
@@ -113,7 +117,6 @@
 
     .sidebar-brand-icon i {
       font-size: 2rem;
-      @include rotate;
     }
     .sidebar-brand-text {
       display: none;

scss/navs/topbar.scss

@@ -1,12 +1,40 @@
 // Topbar
 .topbar {
   height: $topbar-base-height;
+  #sidebarToggleTop {
+    height: 2.5rem;
+    width: 2.5rem;
+    &:hover {
+      background-color: $gray-200;
+    }
+    &:active {
+      background-color: $gray-300;
+    }
+  }
+  .navbar-search {
+    width: 25rem;
+    input {
+      font-size: 0.85rem;
+    }
+  }
+  .topbar-divider {
+    width: 0;
+    border-right: 1px solid $border-color;
+    height: calc(#{$topbar-base-height} - 2rem);
+    margin: auto 1rem;
+  }
   .nav-item {
     .nav-link {
       height: $topbar-base-height;
       display: flex;
       align-items: center;
       padding: 0 0.75rem;
+      &:focus {
+        outline: none;
+      }
+    }
+    &:focus {
+      outline: none;
     }
   }
   .dropdown {
@@ -16,7 +44,54 @@
       right: $grid-gutter-width / 2;
     }
   }
-  @include media-breakpoint-up(md) {
+  .dropdown-list {
+    padding: 0;
+    border: none;
+    overflow: hidden;
+    .dropdown-header {
+      background-color: $primary;
+      border: 1px solid $primary;
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+      color: $white;
+    }
+    .dropdown-item {
+      white-space: normal;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      border-left: 1px solid $border-color;
+      border-right: 1px solid $border-color;
+      border-bottom: 1px solid $border-color;
+      line-height: 1.3rem;
+      .dropdown-list-image {
+        position: relative;
+        height: 2.5rem;
+        width: 2.5rem;
+        img {
+          height: 2.5rem;
+          width: 2.5rem;
+        }
+        .status-indicator {
+          background-color: $gray-200;
+          height: 0.75rem;
+          width: 0.75rem;
+          border-radius: 100%;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          border: .125rem solid $white;
+        }
+      }
+      .text-truncate {
+        max-width: 10rem;
+      }
+      &:active {
+        background-color: $gray-200;
+        color: $gray-900;
+      }
+    }
+  }
+  @include media-breakpoint-up(sm) {
     .dropdown {
       position: relative;
       .dropdown-menu {
@@ -24,6 +99,14 @@
         right: 0;
       }
     }
+    .dropdown-list {
+      width: 20rem !important;
+      .dropdown-item {
+        .text-truncate {
+          max-width: 13.375rem;
+        }
+      }
+    }
   }
 }