add hover style for search

scroll-tech · Aug 8, 2023 · a2aeca3 · a2aeca3
1 parent 5cdea5f
commit a2aeca3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/components/Header/Search/Search.module.css b/src/components/Header/Search/Search.module.css
@@ -129,6 +129,11 @@
   box-sizing: content-box;
 }
 
+.hitWrapper {
+  max-height: 40vh;
+  overflow: overlay;
+}
+
 .hitWrapper ol {
   list-style: none;
 }
@@ -155,11 +160,12 @@
 
 .hitList li {
   list-style: none;
+  cursor: pointer;
   @apply pl-2;
 }
 
-.hitList li:hover {
-  @apply bg-background-secondary;
+.hitList li:hover * {
+  color: var(--orange-500);
 }
 
 .hitList li a {
@@ -217,6 +223,11 @@
     @apply mt-0;
   }
 
+  .hitWrapper {
+    max-height: calc(80vh - 100px);
+    overflow: scroll;
+  }
+
   .hitList li {
     @apply pl-0;
   }

diff --git a/src/components/Header/Search/Search.tsx b/src/components/Header/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react"
+import React, { useState, useCallback, useEffect } from "react"
 import styles from "./Search.module.css"
 
 import { useKeyPress } from "~/hooks/useKeyPress"
@@ -11,6 +11,16 @@ export default function Search() {
     setIsOpen(true)
   }, [setIsOpen])
 
+
+  useEffect(() => {
+    const body = document.getElementsByTagName("body")[0]
+    if (isOpen) {
+      body.classList.add("mobile-sidebar-toggle")
+    } else {
+      body.classList.remove("mobile-sidebar-toggle")
+    }
+  }, [isOpen])
+
   const onClose = useCallback(() => {
     setTimeout(() => {
       setIsOpen(false)