🐛 Fix: fix sub menu position error in desktop header (#31)

assets/css/_partial/_header.scss

@@ -54,7 +54,6 @@ header {
   padding: 0;
 
   .menu-item {
-    position: relative;
     list-style: none;
 
     & .dropdown-icon {
@@ -181,6 +180,7 @@ header {
 
   nav {
     overflow: hidden;
+    white-space: nowrap;
   }
 
   .header-wrapper {
@@ -193,7 +193,6 @@ header {
     }
 
     .menu {
-      white-space: nowrap;
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
@@ -231,7 +230,6 @@ header {
         padding: 0.25rem 0;
         display: none;
         top: calc(#{$header-height} - 0.75rem);
-        left: 0;
         border-radius: $global-border-radius;
         border: 1px solid $global-border-color;
         background-color: $header-background-color;
@@ -371,6 +369,7 @@ header {
 
       .menu-item {
         display: block;
+        position: relative;
         line-height: 2.5rem;
         padding: 0 1rem;
 

layouts/partials/header.html

@@ -41,7 +41,7 @@
           {{- with .Page -}}
             {{- $url = .RelPermalink -}}
           {{- end -}}
-          <li class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}">
+          <li class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}"{{ if .HasChildren }} has-children{{ end }}>
             <a
               class="menu-link"
               href="{{ $url }}"

src/js/theme.js

@@ -76,6 +76,16 @@ class Theme {
   initTwemoji() {
     this.config.twemoji && twemoji.parse(document.body);
   }
+  /**
+   * This is a dirty hack for fixing sub menu position error in desktop header
+   */
+  initSubMenuDesktop() {
+    this.util.forEach(document.querySelectorAll('[has-children],.language'), ($item) => {
+      $item.addEventListener('mouseover', function(){
+        this.querySelector('.sub-menu').style.left= `${this.getBoundingClientRect().left}px`;
+      })
+    });
+  }
 
   initMenuMobile() {
     const $menuToggleMobile = document.getElementById('menu-toggle-mobile');
@@ -915,6 +925,7 @@ class Theme {
     try {
       this.initSVGIcon();
       this.initTwemoji();
+      this.initSubMenuDesktop();
       this.initMenuMobile();
       this.initSwitchTheme();
       this.initSearch();