fix: search modal&&menu list on mobile

Author: Holybasil

src/components/Header/Header.astro

@@ -76,7 +76,7 @@ const section = frontmatter?.section ?? ""
             </div>
           )
         }
-        <ThemeModeToggle client:only="preact" dark={dark} />
+        <!-- <ThemeModeToggle client:only="preact" dark={dark} /> -->
         <LanguageSelector class="language-selector" />
         <a href="https://github.com/scroll-tech/scroll-documentation" class="github-url" target="_blank" rel="nofollow">
           <span
@@ -156,7 +156,7 @@ const section = frontmatter?.section ?? ""
 
   .nav-wrapper {
     display: grid;
-    grid-template-columns: 4fr 5fr;
+    grid-template-columns: max-content 1fr;
     gap: 1.5em;
     width: 100%;
     margin: 0 1.25rem;

src/components/Header/Search/Search.module.css

@@ -116,7 +116,6 @@
 
 .closeButtonMobile {
   display: block;
-  /* background-color: #ffffff; */
   border: 3px solid #ffffff;
   padding: 0;
   font-size: 16px;
@@ -202,10 +201,10 @@
     top: 0;
     height: fit-content;
     max-height: 80vh;
-    background: #f6f6f6;
     position: absolute;
     border-radius: 17.5px;
     padding-top: 0;
+    @apply bg-[#f6f6f6];
   }
 
   #searchModal.large {

src/components/Header/Search/Search.tsx

@@ -62,7 +62,7 @@ export default function Search() {
             height="18"
             viewBox="0 0 18 18"
             fill="none"
-            className={clsx(styles.closeButtonMobile, "dark:bg-dark-normal")}
+            className={clsx(styles.closeButtonMobile, "dark:border-black dark:bg-black")}
             onClick={onClose}
           >
             <path
@@ -76,7 +76,7 @@ export default function Search() {
         </>
       ) : (
         <button onClick={onOpen} className={styles.searchInputMobile}>
-          <img src="/assets/search.svg" alt="search" aria-label="Search" width={20} height={20} />
+          <span className="inline-block w-[22px] h-[22px] bg-[url(/assets/search.svg)] dark:bg-[url(/assets/search-white.svg)] bg-contain bg-no-repeat bg-center"></span>
         </button>
       )}
     </div>

src/components/Header/Search/SearchInput.module.css

@@ -9,7 +9,6 @@
   overflow: hidden;
   padding: 0 20px;
   border-radius: 0;
-  @apply bg-pure-white;
 }
 
 .wrapper.large {
@@ -78,7 +77,7 @@
   .input {
     font-size: 16px;
     line-height: 15px;
-    background: #f6f6f6 url(/assets/search.svg) left 12px top 50% / 17px no-repeat;
+    background: url(/assets/search.svg) left 12px top 50% / 17px no-repeat;
     border: none;
     height: 35px;
     line-height: 35px;

src/components/Header/Search/SearchInput.tsx

@@ -24,16 +24,23 @@ export const SearchInput = ({ size, onClose }: { onClose: () => void }) => {
   }, [debouncedValue])
 
   return (
-    <div className={clsx(styles.wrapper, styles[size], "dark:!bg-dark-normal")}>
+    <div
+      className={clsx(
+        styles.wrapper,
+        styles[size],
+        "bg-pure-white",
+        size === "mini" && "lg:bg-[#f6f6f6]",
+        size === "mini" ? "dark:bg-black lg:dark:!bg-dark-normal" : "dark:bg-dark-normal"
+      )}
+    >
       <input
         className={clsx(
           styles.input,
           styles[size],
           ".focus-visible",
           "dark:text-white",
           "dark:border-white",
-          "dark:!bg-[url(/assets/search-white.svg)]",
-          "dark:bg-dark-normal"
+          "dark:!bg-[url(/assets/search-white.svg)]"
         )}
         onBlur={onClose}
         onChange={handleChange}

src/components/Header/Search/SearchModal.tsx

@@ -148,7 +148,14 @@ export function SearchModal({ size = "mini", isOpen, onClose }: { size: Size; is
   }
 
   return (
-    <div id={styles.searchModal} className={clsx(styles[size], "bg-pure-white", "dark:!bg-dark-normal")}>
+    <div
+      id={styles.searchModal}
+      className={clsx(
+        styles[size],
+        "bg-pure-white",
+        size === "mini" ? "dark:bg-black lg:dark:!bg-dark-normal" : "dark:bg-dark-normal"
+      )}
+    >
       <InstantSearch indexName={getIndexName()} searchClient={searchClient}>
         <SearchInput size={size} onClose={onClose} />
         <div className={styles.resultsWrapper}>

src/components/Header/ThemeModeToggle.tsx

@@ -44,7 +44,7 @@ const ThemeModeToggle = (props) => {
   return (
     <button
       className={clsx(
-        "w-[35px] h-[35px] rounded-[5px] bg-transparent border border-black dark:border-white text-black dark:text-white",
+        "w-[35px] h-[35px] rounded-[5px] border-solid bg-transparent border border-black dark:border-white text-black dark:text-white",
         dark && "border-white text-white"
       )}
       onClick={handleToggleThemeMode}

src/components/LeftSidebar/LeftSidebar.astro

@@ -135,7 +135,7 @@ const currentPageMatch = removeSlashes(currentPage.slice(1))
   .menu-separator {
     width: calc(100vw - 40px);
 
-    @apply border-0 border-t-[1px] border-t-divider border-solid;
+    @apply border-0 border-t-[1px] border-solid border-black dark:border-white;
   }
   .sidebar-nav-groups.nav-groups > :first-child {
     @apply pt-[15px];

src/layouts/HomeLayout.astro

@@ -29,9 +29,9 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
 
       #grid-left {
         position: fixed;
-        background-color: var(--theme-bg);
         z-index: 10;
         display: none;
+        @apply bg-pure-white dark:bg-black;
       }
 
       @media (min-width: 50em) {

src/layouts/LandingLayout.astro

@@ -45,7 +45,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
         position: fixed;
         z-index: 10;
         display: none;
-        @apply bg-bg;
+        @apply bg-pure-white dark:bg-black;
       }
       #grid-main {
         padding: 0 var(--gutter);