improve main-header

src/index2.html

@@ -104,7 +104,7 @@
                         <button type="button" class="btn btn-tool dropdown-toggle" data-bs-toggle="dropdown">
                           <i class="fas fa-wrench"></i>
                         </button>
-                        <div class="dropdown-menu dropdown-menu-right" role="menu">
+                        <div class="dropdown-menu dropdown-menu-end" role="menu">
                           <a href="#" class="dropdown-item">Action</a>
                           <a href="#" class="dropdown-item">Another action</a>
                           <a href="#" class="dropdown-item">Something else here</a>

src/partials/dashboard/_topbar.html

@@ -1,6 +1,7 @@
 <!-- Navbar -->
 <nav class="main-header navbar navbar-expand navbar-light">
   <div class="container-fluid">
+    <!-- Start navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link sidebar-full-icon" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
@@ -12,8 +13,9 @@
         <a href="#" class="nav-link">Contact</a>
       </li>
     </ul>
-    <!-- Right navbar links -->
-    <ul class="navbar-nav mr-auto">
+
+    <!-- End navbar links -->
+    <ul class="navbar-nav ms-auto">
       <!-- Navbar Search -->
       <li class="nav-item">
         <a class="nav-link" data-widget="navbar-search" href="#" role="button">
@@ -23,17 +25,129 @@
 
       <!-- Messages Dropdown Menu -->
       <li class="nav-item dropdown">
-        <a class="nav-link" data-toggle="dropdown" href="#">
+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
           <i class="far fa-comments"></i>
           <span class="badge bg-danger navbar-badge">3</span>
         </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="d-flex">
+              <div class="flex-shrink-0">
+                <img src="@@path/assets/img/AdminLTELogo.png" alt="User Avatar" class="img-size-50 img-circle me-3">
+              </div>
+              <div class="flex-grow-1">
+                <h3 class="dropdown-item-title">
+                  Brad Diesel
+                  <span class="float-end text-sm text-danger"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">Call me whenever you can...</p>
+                <p class="text-sm text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="d-flex">
+              <div class="flex-shrink-0">
+                <img src="@@path/assets/img/AdminLTELogo.png" alt="User Avatar" class="img-size-50 img-circle me-3">
+              </div>
+              <div class="flex-grow-1">
+                <h3 class="dropdown-item-title">
+                  John Pierce
+                  <span class="float-end text-sm text-muted"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">I got your message bro</p>
+                <p class="text-sm text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="d-flex">
+              <img src="@@path/assets/img/AdminLTELogo.png" alt="User Avatar" class="img-size-50 img-circle me-3">
+              <div class="flex-grow-1">
+                <h3 class="dropdown-item-title">
+                  Nora Silvester
+                  <span class="float-end text-sm text-warning"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">The subject goes here</p>
+                <p class="text-sm text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
+        </div>
       </li>
       <!-- Notifications Dropdown Menu -->
       <li class="nav-item dropdown">
-        <a class="nav-link" data-toggle="dropdown" href="#">
+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
           <i class="far fa-bell"></i>
           <span class="badge bg-warning navbar-badge">15</span>
         </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+          <span class="dropdown-item dropdown-header">15 Notifications</span>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-envelope me-2"></i> 4 new messages
+            <span class="float-end text-muted text-sm">3 mins</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-users me-2"></i> 8 friend requests
+            <span class="float-end text-muted text-sm">12 hours</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-file me-2"></i> 3 new reports
+            <span class="float-end text-muted text-sm">2 days</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+        </div>
+      </li>
+      <li class="nav-item dropdown user-menu">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
+          <img src="@@path/assets/img/AdminLTELogo.png" class="user-image img-circle shadow" alt="User Image">
+          <span class="d-none d-md-inline">Alexander Pierce</span>
+        </a>
+        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+          <!-- User image -->
+          <li class="user-header bg-primary">
+            <img src="@@path/assets/img/AdminLTELogo.png" class="img-circle shadow" alt="User Image">
+
+            <p>
+              Alexander Pierce - Web Developer
+              <small>Member since Nov. 2012</small>
+            </p>
+          </li>
+          <!-- Menu Body -->
+          <li class="user-body">
+            <div class="row">
+              <div class="col-4 text-center">
+                <a href="#">Followers</a>
+              </div>
+              <div class="col-4 text-center">
+                <a href="#">Sales</a>
+              </div>
+              <div class="col-4 text-center">
+                <a href="#">Friends</a>
+              </div>
+            </div>
+            <!-- /.row -->
+          </li>
+          <!-- Menu Footer-->
+          <li class="user-footer">
+            <a href="#" class="btn btn-default btn-flat">Profile</a>
+            <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
+          </li>
+        </ul>
       </li>
       <li class="nav-item">
         <a class="nav-link" data-widget="fullscreen" href="#" role="button">

src/scss/_bootstrap-variables.scss

@@ -431,7 +431,8 @@ $font-size-root:              null !default;
 $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
 $font-size-sm:                $font-size-base * .875 !default;
 $font-size-lg:                $font-size-base * 1.25 !default;
-
+$font-size-xs:                $font-size-base * .75 !default; // adminlte-modified
+$font-size-xl:                $font-size-base * 2 !default; // adminlte-modified
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;

src/scss/_cards.scss

@@ -64,7 +64,7 @@
 
   .nav.flex-column {
     > li {
-      border-bottom: 1px solid $lte-card-border-color;
+      border-bottom: 1px solid $card-border-color;
       margin: 0;
 
       &:last-of-type {
@@ -82,11 +82,11 @@
   }
 
   .border-end {
-    border-right: 1px solid $lte-card-border-color;
+    border-right: 1px solid $card-border-color;
   }
 
   .border-start {
-    border-left: 1px solid $lte-card-border-color;
+    border-left: 1px solid $card-border-color;
   }
 
   &.card-tabs {
@@ -212,7 +212,7 @@ html.maximized-card {
 // Box header
 .card-header {
   background-color: transparent;
-  border-bottom: 1px solid $lte-card-border-color;
+  border-bottom: 1px solid $card-border-color;
   padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
   position: relative;
 

src/scss/_dropdown.scss

@@ -0,0 +1,245 @@
+//
+// Component: Dropdown
+//
+
+// General Dropdown Rules
+//.dropdown-item {
+//  &:first-of-type {
+//    @include border-top-radius($border-radius);
+//  }
+//  &:last-of-type {
+//    @include border-bottom-radius($border-radius);
+//  }
+//}
+
+.text-sm {
+  .dropdown-menu {
+    font-size: $font-size-sm !important;
+  }
+
+  .dropdown-toggle::after {
+    vertical-align: .2rem;
+  }
+}
+
+.dropdown-item-title {
+  font-size: $font-size-base;
+  margin: 0;
+}
+
+.dropdown-icon {
+  &::after {
+    margin-left: 0;
+  }
+}
+
+// Dropdown Sizes
+.dropdown-menu-lg {
+  max-width: 300px;
+  min-width: 280px;
+  padding: 0;
+
+  .dropdown-divider {
+    margin: 0;
+  }
+
+  .dropdown-item {
+    padding: $dropdown-padding-y $dropdown-item-padding-x;
+  }
+
+  p {
+    margin: 0;
+    white-space: normal;
+  }
+}
+
+// Dropdown Submenu
+.dropdown-submenu {
+  position: relative;
+
+  > a::after {
+    @include caret-end ();
+    float: right;
+    margin-left: .5rem;
+    margin-top: .5rem;
+  }
+
+  > .dropdown-menu {
+    left: 100%;
+    margin-left: 0;
+    margin-top: 0;
+    top: 0;
+  }
+}
+
+// Dropdown Hover
+.dropdown-hover {
+  &:hover,
+  &.nav-item.dropdown:hover,
+  .dropdown-submenu:hover,
+  &.dropdown-submenu:hover {
+    > .dropdown-menu {
+      display: block;
+    }
+  }
+}
+
+
+// Dropdown Sizes
+.dropdown-menu-xl {
+  max-width: 420px;
+  min-width: 360px;
+  padding: 0;
+
+  .dropdown-divider {
+    margin: 0;
+  }
+
+  .dropdown-item {
+    padding: $dropdown-padding-y $dropdown-item-padding-x;
+  }
+
+  p {
+    margin: 0;
+    white-space: normal;
+  }
+}
+
+// Dropdown header and footer
+.dropdown-footer,
+.dropdown-header {
+  display: block;
+  font-size: $font-size-sm;
+  padding: .5rem $dropdown-item-padding-x;
+  text-align: center;
+}
+
+// Add fade animation to dropdown menus by appending
+// the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
+.open:not(.dropup) > .animated-dropdown-menu {
+  @include animation(flipInX .7s both);
+  backface-visibility: visible !important;
+}
+
+// Fix dropdown menu in navbars
+.navbar-custom-menu > .navbar-nav {
+  > li {
+    position: relative;
+    > .dropdown-menu {
+      position: absolute;
+      right: 0;
+      left: auto;
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .navbar-custom-menu > .navbar-nav {
+    float: right;
+    > li {
+      position: static;
+      > .dropdown-menu {
+        position: absolute;
+        right: 5%;
+        left: auto;
+        border: 1px solid #ddd;
+        background-color: $white;
+      }
+    }
+  }
+}
+
+// User Menu
+.navbar-nav > .user-menu {
+  > .nav-link::after {
+    content: none;
+  }
+
+  > .dropdown-menu {
+    @include border-top-radius(0);
+    padding: 0;
+    width: 280px;
+
+    &,
+    > .user-body {
+      @include border-bottom-radius(4px);
+    }
+
+    // Header menu
+    > li.user-header {
+      height: 175px;
+      padding: 10px;
+      text-align: center;
+
+      // User image
+      > img {
+        z-index: 5;
+        height: 90px;
+        width: 90px;
+        border: 3px solid;
+        border-color: transparent;
+        border-color: rgba(255, 255, 255, .2);
+      }
+
+      > p {
+        z-index: 5;
+        font-size: 17px;
+        //text-shadow: 2px 2px 3px #333333;
+        margin-top: 10px;
+
+        > small {
+          display: block;
+          font-size: 12px;
+        }
+      }
+    }
+
+    // Menu Body
+    > .user-body {
+      @include clearfix ();
+      border-bottom: 1px solid $gray-700;
+      border-top: 1px solid $gray-300;
+      padding: 15px;
+
+      a {
+        @include media-breakpoint-up(sm) {
+          background-color: $white !important;
+          color: $gray-700 !important;
+        }
+      }
+    }
+
+    // Menu Footer
+    > .user-footer {
+      @include clearfix ();
+      background-color: $gray-100;
+      padding: 10px;
+
+      .btn-default {
+        color: $gray-600;
+
+        &:hover {
+          @include media-breakpoint-up(sm) {
+            background-color: $gray-100;
+          }
+        }
+      }
+    }
+  }
+
+  .user-image {
+    @include media-breakpoint-up(sm) {
+      float: none;
+      line-height: 10px;
+      margin-right: .4rem;
+      margin-top: -8px;
+    }
+
+    border-radius: 50%;
+    float: left;
+    height: $lte-sidebar-user-image-width;
+    margin-right: 10px;
+    margin-top: -2px;
+    width: $lte-sidebar-user-image-width;
+  }
+}

src/scss/_main-header.scss

@@ -12,8 +12,12 @@
 .main-header {
   grid-area: main-header;
   border-bottom: $lte-main-header-bottom-border;
-  width: inherit;
   z-index: $lte-zindex-main-header;
+
+  .nav-link {
+    height: $nav-link-height;
+    position: relative;
+  }
 }
 
 // Navbar badge

src/scss/_miscellaneous.scss

@@ -52,7 +52,7 @@
 }
 
 .list-seperator {
-  background-color: $lte-card-border-color;
+  background-color: $card-border-color;
   height: 1px;
   margin: 15px 0 9px;
 }
@@ -217,7 +217,7 @@
 // General attachemnt block
 .attachment-block {
   background-color: $gray-100;
-  border: 1px solid $lte-card-border-color;
+  border: 1px solid $card-border-color;
   margin-bottom: 10px;
   padding: 5px;
 

src/scss/_text.scss

@@ -11,6 +11,26 @@
   }
 }
 
+.text-xs {
+  font-size: $font-size-xs !important;
+}
+
+.text-sm {
+  font-size: $font-size-sm !important;
+}
+
+.text-md {
+  font-size: $font-size-base !important;
+}
+
+.text-lg {
+  font-size: $font-size-lg !important;
+}
+
+.text-xl {
+  font-size: $font-size-xl !important;
+}
+
 // text color variations
 @each $name, $color in $colors {
   .text-#{$name} {

src/scss/_variables.scss

@@ -180,7 +180,6 @@ $lte-brand-link-border-buttom:    1px;
 
 // Cards
 // --------------------------------------------------------
-$lte-card-border-color: $gray-100 !default;
 $lte-card-dark-border-color: tint-color($gray-900, 10%) !default;
 $lte-card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
 $lte-card-title-font-size: 1.1rem !default;

src/scss/adminlte.scss

@@ -8,14 +8,14 @@
 // Bootstrap
 // ---------------------------------------------------
 @import "bootstrap/scss/functions";
-@import "bootstrap-variables";
+@import "bootstrap-variables"; // little modified are here
 @import "bootstrap/scss/variables";
-@import "variables"; // little modified are here
 @import "custom-utilities";
 @import "bootstrap/scss/bootstrap";
 
 // Variables and Mixins
 // ---------------------------------------------------
+@import "variables";
 @import "mixins";
 
 // AdiminLTE Parts

src/scss/dark/_direct-chat.scss

@@ -0,0 +1,72 @@
+.direct-chat-text {
+  background-color: $gray-800-alt;
+  border-color: tint-color($gray-800-alt, 10%);
+  color: $white-alt;
+
+  &::after,
+  &::before {
+    border-right-color: $gray-800-alt;
+  }
+}
+
+.direct-chat-timestamp {
+  color: $gray-300-alt;
+}
+
+.end > .direct-chat-text {
+  &::after,
+  &::before {
+    border-right-color: transparent;
+  }
+}
+
+.direct-chat-contacts {
+  background-color: $gray-800-alt;
+  color: $white-alt;
+}
+
+.direct-chat-contacts-light {
+  background-color: $dark-alt;
+
+  .contacts-list-name {
+    color: $light-alt;
+  }
+
+  .contacts-list-date {
+    color: $gray-200-alt;
+  }
+
+  .contacts-list-msg {
+    color: $gray-300-alt;
+  }
+}
+
+//Contacts list -- for displaying contacts in direct chat contacts pane
+.contacts-list > li {
+  border-bottom-color: rgba($white-alt, .2);
+}
+
+.contacts-list-info {
+  color: $white-alt;
+}
+
+.contacts-list-date {
+  color: $gray-300-alt;
+}
+
+.contacts-list-msg {
+  color: $gray-400-alt;
+}
+
+// Color variants
+@each $name, $color in $theme-colors-alt {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
+}
+
+@each $name, $color in $colors-alt {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
+}

src/scss/dark/_products.scss

@@ -0,0 +1,9 @@
+.products-list > .item {
+  background-color: $body-bg-alt;
+  color: $body-color-alt;
+  border-bottom-color: $gray-600-alt;
+}
+
+.product-description {
+  color: $gray-200-alt;
+}

src/scss/dark/parts/_extra-components.scss

@@ -3,3 +3,5 @@
 //
 
 @import "../info-box";
+@import "../direct-chat";
+@import "../products";

src/scss/mixins/_miscellaneous.scss

@@ -20,9 +20,9 @@
   transform: rotate($value);
 }
 
-// @mixin animation($animation) {
-//   animation: $animation;
-// }
+@mixin animation($animation) {
+  animation: $animation;
+}
 
 // Gradient background
 // @mixin gradient($color: #f5f5f5, $start: #eee, $stop: $white) {

src/scss/parts/_core.scss

@@ -17,3 +17,4 @@
 @import "../main-footer";
 @import "../layout-fixed";
 @import "../layout-mobile";
+@import "../dropdown";