From 855368f30db491917f74ea829b518d51ddf46dd5 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Sun, 3 Apr 2022 10:44:08 +0800
Subject: [PATCH] :art: Style: debug style for sub menu (#31)

---
 assets/css/_partial/_header.scss | 36 ++++++++++++++++++++++----------
 layouts/partials/header.html     | 17 +++++++--------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss
index 9f3a86eb..703fd2ba 100644
--- a/assets/css/_partial/_header.scss
+++ b/assets/css/_partial/_header.scss
@@ -167,7 +167,6 @@ header {
     }
 
     .menu {
-      overflow: hidden;
       white-space: nowrap;
       display: flex;
       flex-direction: row;
@@ -175,15 +174,6 @@ header {
       margin: 0;
       padding: 0;
 
-      li {
-        list-style: none;
-      }
-
-      .sub-menu {
-        position: relative;
-        display: none;
-      }
-
       >.menu-item:hover {
         & .sub-menu {
           display: block;
@@ -191,7 +181,8 @@ header {
       }
 
       .menu-item {
-        margin: 0 0.5rem;
+        padding: 0 0.5rem;
+        list-style: none;
 
         &.delimiter {
           border-left: 1.5px solid $global-font-color;
@@ -210,6 +201,29 @@ header {
         }
       }
 
+      .sub-menu {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        display: none;
+        left: 0;
+        // max-width: 5rem;
+
+        background-color: $header-background-color;
+        @include transition(box-shadow 0.3s ease);
+
+        [theme='dark'] & {
+          background-color: $header-background-color-dark;
+        }
+
+        @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
+
+        .menu-item {
+          height: $header-height*0.8;
+          line-height: $header-height*0.8;
+        }
+      }
+
       a.active {
         font-weight: 900;
         color: $header-hover-color;
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 91789a65..63248d84 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -34,7 +34,7 @@
         {{- end -}}
       {{- end -}}
     </div>
-    <nav class="header-nav">
+    <nav>
       <ul class="menu">
         {{- range .Site.Menus.main -}}
           {{- $url := .URL | relLangURL -}}
@@ -59,12 +59,11 @@
           </li>
         {{- end -}}
         
-        <!-- TODO -->
         {{- if .Site.Menus.main -}}
-          <span class="menu-item delimiter"></span>
+          <!-- TODO -->
         {{- end -}}
         {{- if .Site.IsMultiLingual -}}
-          <a href="javascript:void(0);" class="menu-item language" title="{{ T "selectLanguage" }}">
+          <li class="menu-item language" title="{{ T "selectLanguage" }}">
             {{- .Language.LanguageName -}}
             <i class="fas fa-chevron-right fa-fw"></i>
             <select class="language-select" id="language-select-desktop" onchange="location = this.value;">
@@ -84,10 +83,10 @@
                 {{- end -}}
               {{- end -}}
             </select>
-          </a>
+          </li>
         {{- end -}}
         {{- if .Site.Params.search.enable -}}
-          <span class="menu-item search" id="search-desktop">
+          <li class="menu-item search" id="search-desktop">
             <input type="text" placeholder="{{ .Site.Params.search.placeholder | default (T `searchPlaceholder`) }}" id="search-input-desktop">
             <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="{{ T `search` }}">
               <i class="fas fa-search fa-fw"></i>
@@ -98,11 +97,11 @@
             <span class="search-button search-loading" id="search-loading-desktop">
               <i class="fas fa-spinner fa-fw fa-spin"></i>
             </span>
-          </span>
+          </li>
         {{- end -}}
-        <a href="javascript:void(0);" class="menu-item theme-switch" title="{{ T "switchTheme" }}">
+        <li class="menu-item theme-switch" title="{{ T "switchTheme" }}">
           <i class="fas fa-adjust fa-fw"></i>
-        </a>
+        </li>
       </ul>
    </nav>
   </div>