From 4294897d18fc0f44cf496d136f78bd2e403388a5 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 17 Dec 2023 14:24:54 +0700 Subject: [PATCH] resonsive search bar and menu update --- .../common/SearchBar/SearchBar.scss | 2 +- .../components/common/SearchBar/SearchBar.tsx | 29 +++---- .../common/SearchBar/SearchField.tsx | 3 + .../src/components/layout/TopNav/TopNav.tsx | 76 ++++++++++++++++--- packages/fakeyou.com/src/scss/nav.scss | 15 ++++ 5 files changed, 100 insertions(+), 25 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss index 5bb35d4dcd..74e95922b0 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss +++ b/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%; } diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx index af18d41568..25558f341b 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx +++ b/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(""); const [foundTtsModels, setFoundTtsModels] = useState([]); - const [isFocused, setIsFocused] = useState(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 (
-
+
setIsFocused(true)} - onBlur={onBlurHandler} + onFocus={onFocus} + onBlur={onBlur} + autoFocus={autoFocus} /> {isFocused && }
diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx index 05a9240fde..6597f331fb 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx +++ b/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 ( ); } diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 373613cecb..687ebea489 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/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) {
{/* Search Bar */}
- +
@@ -88,7 +127,7 @@ export default function TopNav({ sessionWrapper }: TopNavProps) { className="d-lg-none" />
- + )} ); } diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss index 93ea69993d..10d6ad3a9a 100644 --- a/packages/fakeyou.com/src/scss/nav.scss +++ b/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; + } } }