Refactor header CSS and HTML

assets/css/_partial/_header.scss

@@ -1,6 +1,5 @@
 header {
   width: 100%;
-  z-index: 150;
   background-color: $header-background-color;
   @include transition(box-shadow 0.3s ease);
 
@@ -410,3 +409,7 @@ header {
     }
   }
 }
+
+html:has(#mobile-menu-dialog[open]) {
+  overflow: hidden;
+}

assets/css/main.css

@@ -781,14 +781,34 @@ html.dark {
   position: fixed;
 }
 
+.tw-absolute {
+  position: absolute;
+}
+
+.tw-relative {
+  position: relative;
+}
+
 .tw-bottom-4 {
   bottom: 1rem;
 }
 
+.tw-left-0 {
+  left: 0px;
+}
+
 .tw-right-4 {
   right: 1rem;
 }
 
+.tw-top-0 {
+  top: 0px;
+}
+
+.tw-z-50 {
+  z-index: 50;
+}
+
 .tw-m-0 {
   margin: 0px;
 }
@@ -803,6 +823,11 @@ html.dark {
   margin-right: 0px;
 }
 
+.tw-mx-16 {
+  margin-left: 4rem;
+  margin-right: 4rem;
+}
+
 .tw-mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -840,6 +865,14 @@ html.dark {
   margin-right: 0.25rem;
 }
 
+.tw-mr-8 {
+  margin-right: 2rem;
+}
+
+.tw-mt-0 {
+  margin-top: 0px;
+}
+
 .\!tw-block {
   display: block !important;
 }
@@ -868,6 +901,14 @@ html.dark {
   height: 2.5rem;
 }
 
+.tw-h-16 {
+  height: 4rem;
+}
+
+.tw-h-6 {
+  height: 1.5rem;
+}
+
 .tw-h-\[90vh\] {
   height: 90vh;
 }
@@ -934,6 +975,10 @@ html.dark {
   flex-direction: column;
 }
 
+.tw-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
 .tw-items-center {
   align-items: center;
 }
@@ -950,6 +995,14 @@ html.dark {
   gap: 0.5rem;
 }
 
+.tw-gap-4 {
+  gap: 1rem;
+}
+
+.tw-gap-y-4 {
+  row-gap: 1rem;
+}
+
 .tw-overflow-x-auto {
   overflow-x: auto;
 }
@@ -962,10 +1015,18 @@ html.dark {
   text-wrap: wrap;
 }
 
+.tw-text-nowrap {
+  text-wrap: nowrap;
+}
+
 .tw-rounded-full {
   border-radius: 9999px;
 }
 
+.tw-border-l {
+  border-left-width: 1px;
+}
+
 .tw-border-t-2 {
   border-top-width: 2px;
 }
@@ -975,6 +1036,10 @@ html.dark {
   border-color: rgb(240 240 240 / var(--tw-border-opacity, 1));
 }
 
+.tw-border-l-fgColor-default {
+  border-left-color: var(--fgColor-default);
+}
+
 .tw-bg-bgColor-secondary {
   background-color: var(--bgColor-secondary);
 }
@@ -1001,6 +1066,10 @@ html.dark {
   padding-bottom: 0.5rem;
 }
 
+.tw-pb-4 {
+  padding-bottom: 1rem;
+}
+
 .tw-pb-8 {
   padding-bottom: 2rem;
 }
@@ -1027,6 +1096,10 @@ html.dark {
   line-height: 2.25rem;
 }
 
+.tw-font-bold {
+  font-weight: 700;
+}
+
 .tw-uppercase {
   text-transform: uppercase;
 }
@@ -1151,6 +1224,10 @@ html.dark {
 }
 
 @media (min-width: 768px) {
+  .md\:tw-flex {
+    display: flex;
+  }
+
   .md\:tw-hidden {
     display: none;
   }

assets/js/theme.ts

@@ -25,23 +25,24 @@ function getScrollTop() {
  * Initialize the mobile menu bar.
  */
 function initMenuMobile() {
-  const menuToggleMobile = document.getElementById("menu-toggle-mobile");
-  const menuMobile = document.getElementById("menu-mobile");
-  // If no event listener has been registered yet, add one.
-  if (!window.menuToggleMobileEventListener) {
-    menuToggleMobile.addEventListener("click", () => {
-      document.body.classList.toggle("blur");
-      menuToggleMobile.classList.toggle("active");
-      menuMobile.classList.toggle("active");
-    });
-    window.menuToggleMobileEventListener = true;
+  const openButton = document.getElementById("mobile-menu-open-button") as HTMLButtonElement | null;
+  const closeButton = document.getElementById("mobile-menu-close-button") as HTMLButtonElement | null;
+  const dialog = document.getElementById("mobile-menu-dialog") as HTMLDialogElement | null;
+  if (!openButton) {
+    throw new Error("Mobile menu button not found.");
   }
-  // Remove the mask when click on it.
-  window._menuMobileOnClickMask = () => {
-    menuToggleMobile.classList.remove("active");
-    menuMobile.classList.remove("active");
-  };
-  window.clickMaskEventSet.add(window._menuMobileOnClickMask);
+  if (!closeButton) {
+    throw new Error("Mobile menu close button not found.");
+  }
+  if (!dialog) {
+    throw new Error("Mobile menu dialog not found.");
+  }
+  openButton.addEventListener("click", () => {
+    dialog.showModal();
+  });
+  closeButton.addEventListener("click", () => {
+    dialog.close();
+  });
 }
 
 /**
@@ -939,7 +940,7 @@ function init() {
   initSwitchTheme();
   initSelectTheme();
   initMeta();
-  initSearch();
+  // initSearch();
   initCodeblocks();
   initDetails();
   initLightGallery();

layouts/_default/baseof.html

@@ -33,7 +33,6 @@
 <body data-instant-intensity="viewport">
     {{- partial "theme.html" . -}}
     <div id="back-to-top"></div>
-    <div id="mask"></div>
     {{- partial "header.html" . -}}
     <main class="tw-mx-4">
         {{- block "content" . }}{{ end -}}