refactor: change navnar to header

Author: mrholek

scss/_header.scss

@@ -0,0 +1,135 @@
+.app-header {
+  position: relative;
+  flex-direction: row;
+  height: $navbar-height;
+  padding: 0;
+  margin: 0;
+  background-color: $navbar-bg;
+  @include borders($navbar-border);
+
+  .navbar-brand {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $navbar-brand-width;
+    height: $navbar-height;
+    padding: 0;
+    margin-right: 0;
+    background-color: $navbar-brand-bg;
+    @include borders($navbar-brand-border);
+
+    .navbar-brand-minimized {
+      display: none;
+    }
+  }
+
+  .navbar-toggler {
+    min-width: 50px;
+    padding: $navbar-toggler-padding-y 0;
+
+    &:hover .navbar-toggler-icon {
+      background-image: $navbar-toggler-icon-hover;
+    }
+  }
+
+  .navbar-toggler-icon {
+    height: 23px;
+    background-image: $navbar-toggler-icon;
+  }
+
+  .navbar-nav {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .nav-item {
+    position: relative;
+    min-width: 50px;
+    margin: 0;
+    text-align: center;
+
+    button {
+      margin: 0 auto;
+    }
+
+    .nav-link {
+      padding-top: 0;
+      padding-bottom: 0;
+      background: 0;
+      border: 0;
+
+      .badge {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -16px;
+        margin-left: 0;
+      }
+
+      > .img-avatar {
+        height: $navbar-height - 20px;
+        margin: 0 10px;
+      }
+    }
+  }
+
+  .dropdown-menu {
+    padding-bottom: 0;
+    line-height: $line-height-base;
+  }
+
+  .dropdown-item {
+    min-width: 180px;
+  }
+}
+
+// .navbar-brand {
+//   color: $navbar-active-color;
+//
+//   @include hover-focus {
+//     color: $navbar-active-color;
+//   }
+// }
+
+.navbar-nav {
+  .nav-link {
+    color: $navbar-color;
+
+    @include hover-focus {
+      color: $navbar-hover-color;
+    }
+  }
+
+  .open > .nav-link,
+  .active > .nav-link,
+  .nav-link.open,
+  .nav-link.active {
+    @include plain-hover-focus {
+      color: $navbar-active-color;
+    }
+  }
+}
+
+.navbar-divider {
+  background-color: rgba(0, 0, 0, .075);
+}
+
+@include media-breakpoint-up(lg) {
+  .brand-minimized {
+    .app-header {
+      .navbar-brand {
+        width: $navbar-brand-minimized-width;
+        background-color: $navbar-brand-minimized-bg;
+        @include borders($navbar-brand-minimized-border);
+
+        .navbar-brand-full {
+          display: none;
+        }
+
+        .navbar-brand-minimized {
+          display: block;
+        }
+      }
+    }
+  }
+}

scss/coreui-standalone.scss

@@ -39,11 +39,11 @@
 @import "dropdown";
 @import "footer";
 @import "grid";
+@import "header";
 @import "images";
 @import "input-group";
 @import "modal";
 @import "nav";
-@import "navbar";
 @import "progress";
 @import "progress-group";
 @import "sidebar";

scss/coreui.scss

@@ -37,12 +37,12 @@
 @import "dropdown";
 @import "footer";
 @import "grid";
+@import "header";
 @import "input-group";
 @import "images";
 @import "list-group";
 @import "modal";
 @import "nav";
-@import "navbar";
 @import "progress";
 @import "progress-group";
 @import "sidebar";