resonsive search bar and menu update

packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss

@@ -6,7 +6,7 @@
   width: 580px;
 }
 
-.search-bar-group {
+.search-field-group {
   position: relative;
   width: 100%;
 }

packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx

@@ -9,12 +9,21 @@ import SearchResultsDropdown from "./SearchResultsDropdown";
 import SearchField from "./SearchField";
 import "./SearchBar.scss";
 
-interface SearchBarProps {}
+interface SearchBarProps {
+  autoFocus?: boolean;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  isFocused?: boolean;
+}
 
-export default function SearchBar(props: SearchBarProps) {
+export default function SearchBar({
+  autoFocus,
+  onBlur,
+  onFocus,
+  isFocused,
+}: SearchBarProps) {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [foundTtsModels, setFoundTtsModels] = useState<TtsModel[]>([]);
-  const [isFocused, setIsFocused] = useState<boolean>(false);
 
   const maybeSearch = useCallback(async (value: string) => {
     setSearchTerm(value);
@@ -42,21 +51,15 @@ export default function SearchBar(props: SearchBarProps) {
     doSearch(searchTerm);
   }, [doSearch, searchTerm]);
 
-  const onBlurHandler = () => {
-    // Search field blur/Unfocusing hack: needs a little bit of delay for the result click event to register
-    setTimeout(() => {
-      setIsFocused(false);
-    }, 100);
-  };
-
   return (
     <div className="search-bar-container">
-      <div className="search-bar-group">
+      <div className="search-field-group">
         <SearchField
           value={searchTerm}
           onChange={maybeSearch}
-          onFocus={() => setIsFocused(true)}
-          onBlur={onBlurHandler}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          autoFocus={autoFocus}
         />
         {isFocused && <SearchResultsDropdown data={foundTtsModels} />}
       </div>

packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx

@@ -6,6 +6,7 @@ interface SearchFieldProps {
   onChange: (value: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  autoFocus?: boolean;
 }
 
 export default function SearchField({
@@ -13,6 +14,7 @@ export default function SearchField({
   onChange,
   onFocus,
   onBlur,
+  autoFocus = false,
 }: SearchFieldProps) {
   return (
     <Input
@@ -23,6 +25,7 @@ export default function SearchField({
       className="search-field"
       onFocus={onFocus}
       onBlur={onBlur}
+      autoFocus={autoFocus}
     />
   );
 }

packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx

@@ -1,7 +1,12 @@
-import { faBars, faSearch, faUser } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faBars,
+  faSearch,
+  faUser,
+  faXmark,
+} from "@fortawesome/pro-solid-svg-icons";
 import { Button } from "components/common";
 import SearchBar from "components/common/SearchBar";
-import React from "react";
+import React, { useState } from "react";
 import { Link, useHistory } from "react-router-dom";
 import { WebUrl } from "common/WebUrl";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
@@ -12,18 +17,48 @@ interface TopNavProps {
 
 export default function TopNav({ sessionWrapper }: TopNavProps) {
   let history = useHistory();
+  const [isMobileSearchBarVisible, setIsMobileSearchBarVisible] =
+    useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const wrapper = document.getElementById("wrapper");
+  const [menuButtonIcon, setMenuButtonIcon] = useState(faBars);
 
   const handleMenuButtonClick = () => {
-    const wrapper = document.getElementById("wrapper");
-
     if (window.innerWidth < 1200) {
       if (wrapper) {
         wrapper.classList.toggle("toggled");
+        if (menuButtonIcon === faBars) {
+          setMenuButtonIcon(faXmark);
+        } else {
+          setMenuButtonIcon(faBars);
+        }
       }
     }
   };
 
-  const handleSearchButtonClick = () => {};
+  const handleSearchButtonClick = () => {
+    setIsMobileSearchBarVisible(true);
+    if (window.innerWidth < 1200) {
+      if (wrapper) {
+        wrapper.classList.remove("toggled");
+      }
+    }
+  };
+
+  const onFocusHandler = () => {
+    setIsFocused(true);
+  };
+
+  const onBlurHandler = () => {
+    // Search field blur/Unfocusing hack: needs a little bit of delay for the result click event to register
+    setTimeout(() => {
+      setIsFocused(false);
+
+      if (isMobileSearchBarVisible) {
+        setIsMobileSearchBarVisible(false);
+      }
+    }, 100);
+  };
 
   let signupOrProfileButton = (
     <>
@@ -72,7 +107,11 @@ export default function TopNav({ sessionWrapper }: TopNavProps) {
         <div className="topbar-nav-center">
           {/* Search Bar */}
           <div className="d-none d-lg-block">
-            <SearchBar />
+            <SearchBar
+              onFocus={onFocusHandler}
+              onBlur={onBlurHandler}
+              isFocused={isFocused}
+            />
           </div>
         </div>
 
@@ -88,7 +127,7 @@ export default function TopNav({ sessionWrapper }: TopNavProps) {
               className="d-lg-none"
             />
             <Button
-              icon={faBars}
+              icon={menuButtonIcon}
               variant="secondary"
               small={true}
               square={true}
@@ -100,11 +139,26 @@ export default function TopNav({ sessionWrapper }: TopNavProps) {
       </div>
 
       {/* Mobile Searchbar */}
-      <div className="topbar-mobile-search-bar-container d-block d-lg-none">
-        <div className="topbar-mobile-search-bar">
-          <SearchBar />
+      {isMobileSearchBarVisible && (
+        <div className="topbar-mobile-search-bar-container">
+          <div className="topbar-mobile-search-bar">
+            <SearchBar
+              onFocus={onFocusHandler}
+              onBlur={onBlurHandler}
+              isFocused={isFocused}
+              autoFocus={true}
+            />
+
+            <Button
+              icon={faXmark}
+              className="close-search-button"
+              onClick={() => {
+                setIsMobileSearchBarVisible(false);
+              }}
+            />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }

packages/fakeyou.com/src/scss/nav.scss

@@ -206,6 +206,21 @@ $topbar-height: 66px;
     transform: translate(-50%, -50%);
     width: 100%;
     padding: 0 1rem;
+
+    .close-search-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0 1.8rem;
+      color: $white;
+      height: 100%;
+      font-size: 1.5rem;
+      cursor: pointer;
+      z-index: 4;
+      background: none;
+      border: none;
+      padding: 0;
+    }
   }
 }