From edf847518e4590937d1706908dcd9260b9c8a37d Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 10 Oct 2022 02:41:41 +0330
Subject: [PATCH] adjust search bar for mobile

---
 src/theme/SearchBar/SearchBar.module.scss     |  8 ++++++
 .../SearchInput/SearchInput.module.scss       | 26 +++++++++++++++++++
 .../SearchBar/SearchInput/SearchInput.tsx     |  5 ++--
 .../SearchResultsContainer.module.scss        | 10 +++++++
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/theme/SearchBar/SearchBar.module.scss b/src/theme/SearchBar/SearchBar.module.scss
index 6e91c9f..50ebe6d 100644
--- a/src/theme/SearchBar/SearchBar.module.scss
+++ b/src/theme/SearchBar/SearchBar.module.scss
@@ -1,3 +1,11 @@
+@use '@site/src/css/utils';
+
 .root {
   position: relative;
 }
+
+@include utils.responsive('lg', 'down') {
+  .root {
+    position: unset;
+  }
+}
diff --git a/src/theme/SearchBar/SearchInput/SearchInput.module.scss b/src/theme/SearchBar/SearchInput/SearchInput.module.scss
index 8a3f8b3..6f27978 100644
--- a/src/theme/SearchBar/SearchInput/SearchInput.module.scss
+++ b/src/theme/SearchBar/SearchInput/SearchInput.module.scss
@@ -1,5 +1,7 @@
 // TODO: use ifm variables
 
+@use '@site/src/css/utils';
+
 .root {
   width: auto;
   position: relative;
@@ -72,3 +74,27 @@
     background-color: var(--ifm-background-color);
   }
 }
+
+@include utils.responsive('lg', 'down') {
+  .shortcuts {
+    display: none;
+  }
+
+  .root {
+    width: 100%;
+  }
+
+  .root input {
+    width: 100%;
+    border-radius: 12px;
+    background: #eeeef0;
+  }
+
+  .root.expanded input {
+    width: 100%;
+  }
+
+  .label {
+    display: none;
+  }
+}
diff --git a/src/theme/SearchBar/SearchInput/SearchInput.tsx b/src/theme/SearchBar/SearchInput/SearchInput.tsx
index 2019719..d6803fc 100644
--- a/src/theme/SearchBar/SearchInput/SearchInput.tsx
+++ b/src/theme/SearchBar/SearchInput/SearchInput.tsx
@@ -2,7 +2,7 @@ import { useOS } from '@site/src/lib/useOS'
 import { useWindowEventListener } from '@site/src/lib/useWindowEventListener'
 import clsx from 'clsx'
 import React from 'react'
-import {} from 'react-use'
+import { useMedia } from 'react-use'
 import styles from './SearchInput.module.scss'
 
 export type SearchInputProps = Omit<
@@ -30,6 +30,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
   ...props
 }) => {
   const os = useOS()
+  const isMobile = useMedia('(max-width: 996px)')
 
   const expanded = active || value?.length > 0
 
@@ -67,7 +68,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
         ref={inputRef}
         onFocus={onFocus}
         {...inputProps}
-        placeholder={expanded ? inputProps.placeholder : ''}
+        placeholder={expanded || isMobile ? inputProps.placeholder : ''}
       />
       <div className={styles.shortcuts}>
         {active ? (
diff --git a/src/theme/SearchBar/SearchResultsContainer/SearchResultsContainer.module.scss b/src/theme/SearchBar/SearchResultsContainer/SearchResultsContainer.module.scss
index e7219a4..91fcb5a 100644
--- a/src/theme/SearchBar/SearchResultsContainer/SearchResultsContainer.module.scss
+++ b/src/theme/SearchBar/SearchResultsContainer/SearchResultsContainer.module.scss
@@ -1,3 +1,5 @@
+@use '@site/src/css/utils';
+
 .root {
   background-color: var(--ifm-background-surface-color);
   border-radius: 1rem;
@@ -19,3 +21,11 @@
     visibility: visible;
   }
 }
+
+@include utils.responsive('lg', 'down') {
+  .root {
+    width: 100vw;
+    margin-top: 0;
+    border-radius: 0;
+  }
+}