at the end of the day, it was inevitable

frontend/app/styles/layout/header/modifiers/_fixed-header.scss

@@ -0,0 +1,25 @@
+// Fixed Header
+
+.fixed-header {
+  .app-header {
+    position: fixed;
+    width: 100%;
+    top: 0;
+
+    .app-header__logo {
+      visibility: visible;
+    }
+  }
+
+  .app-main {
+    padding-top: $app-header-height;
+  }
+
+  &:not(.fixed-sidebar):not(.closed-sidebar) {
+    .app-sidebar {
+      .app-header__logo {
+        visibility: hidden;
+      }
+    }
+  }
+}

frontend/app/styles/layout/header/modifiers/_header-buttons.scss

@@ -0,0 +1,36 @@
+// Header Buttons
+
+.header-btn-lg {
+  padding-inline-start: ($layout-spacer-x);
+  margin-inline-start: ($layout-spacer-x);
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    left: -1px;
+    top: 50%;
+    background: $border-color;
+    width: 1px;
+    height: 30px;
+    margin-top: -15px;
+    content: '';
+  }
+
+  .hamburger-inner,
+  .hamburger-inner::before,
+  .hamburger-inner::after {
+    background: $gray-600;
+  }
+}
+
+[dir='rtl'] .header-btn-lg {
+  padding-inline-start: ($layout-spacer-x) !important;
+
+  &::before {
+    position: absolute;
+    left: unset;
+    right: -1px;
+  }
+}

frontend/app/styles/layout/header/modifiers/_header-dots.scss

@@ -0,0 +1,71 @@
+// Header Dots
+
+.header-dots {
+  margin-inline-start: auto;
+  display: flex;
+
+  & > .dropdown {
+    display: flex;
+    align-content: center;
+  }
+
+  .icon-wrapper-alt {
+    margin: 0;
+    height: 44px;
+    width: 44px;
+    text-align: center;
+    overflow: visible;
+
+    .language-icon {
+      @include border-radius(30px);
+      position: relative;
+      z-index: 4;
+      width: 28px;
+      height: 28px;
+      overflow: hidden;
+      margin: 0 auto;
+
+      img {
+        position: relative;
+        top: 50%;
+        left: 50%;
+        margin: -22px 0 0 -20px;
+      }
+
+    }
+
+    .icon-wrapper-bg {
+      opacity: .1;
+      transition: opacity .2s;
+      @include border-radius(40px);
+    }
+
+    svg {
+      margin: 0 auto;
+    }
+
+    @-moz-document url-prefix() {
+      svg {
+        width: 50%;
+      }
+    }
+
+    i {
+      font-size: 1.3rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      .icon-wrapper-bg {
+        opacity: .2;
+      }
+    }
+
+    .badge-dot {
+      top: 1px;
+      right: 1px;
+      border: 0;
+    }
+  }
+}

frontend/app/styles/layout/header/modifiers/_header-horizontal.scss

@@ -0,0 +1,105 @@
+// Header Horizontal
+
+.app-horizontal-header-layout {
+  .app-header__logo {
+    width: auto;
+  }
+
+  .header-dots {
+    margin-inline-start: 0.5rem;
+  }
+
+  .app-header-right {
+    .header-btn-lg:first-child {
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+
+.app-header-menu {
+  background: $white;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  flex: 1;
+  padding: 0 $layout-spacer-x;
+  height: $app-header-height;
+}
+
+.horizontal-nav-menu {
+  .metismenu-container {
+    margin: 0;
+    padding: 0;
+
+    &.visible {
+      visibility: hidden !important;
+    }
+
+    .metismenu-item {
+      display: inline-block;
+      position: relative;
+
+      .metismenu-link {
+        padding: ($layout-spacer-x / 2.5) $layout-spacer-x;
+        color: $gray-800;
+        font-weight: bold;
+        text-decoration: none;
+        display: block;
+        @include border-radius($border-radius);
+
+        .metismenu-icon {
+          margin-inline-end: 0.5rem;
+          opacity: .6;
+        }
+      }
+
+      &:hover {
+        & > .metismenu-link {
+          color: $primary;
+          background: $dropdown-link-hover-bg;
+
+          .metismenu-icon {
+            opacity: 1;
+          }
+        }
+      }
+
+      .metismenu-container {
+        position: absolute;
+        background: $dropdown-border-color;
+        box-shadow: $box-shadow-default;
+        background: $dropdown-bg;
+        padding: $layout-spacer-x;
+        visibility: hidden !important;
+        z-index: 25;
+        min-width: 20rem;
+        @include border-bottom-radius($dropdown-border-radius);
+
+        .metismenu-item {
+          display: block;
+          position: relative;
+
+          .metismenu-link {
+            padding: ($layout-spacer-x / 4) ($layout-spacer-x);
+            display: block;
+            color: $gray-800;
+            white-space: nowrap;
+            font-weight: normal;
+          }
+        }
+      }
+
+      &:hover {
+        .metismenu-container {
+          visibility: visible !important;
+
+          .metismenu-item > .metismenu-link {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}

frontend/app/styles/layout/header/modifiers/_header-megamenu.scss

@@ -0,0 +1,23 @@
+// Header Mega Menu
+
+.header-megamenu {
+  &.nav {
+    & > li > .nav-link {
+      color: $gray-600;
+      padding-inline-start: ($nav-link-padding-x / 1.5);
+      padding-inline-end: ($nav-link-padding-x / 1.5);
+
+      .badge-pill {
+        padding: 5px 7px;
+      }
+
+      &:hover, &.active {
+        color: $gray-800;
+      }
+
+      svg {
+        margin-top: 1px;
+      }
+    }
+  }
+}