search bar mobile update

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

@@ -3,11 +3,12 @@
 .search-bar-container {
   display: flex;
   justify-content: center;
+  width: 580px;
 }
 
 .search-bar-group {
   position: relative;
-  width: 580px;
+  width: 100%;
 }
 
 .search-field {
@@ -68,3 +69,15 @@
     background-color: lighten($secondary, 10%) !important;
   }
 }
+
+@media (max-width: 992px) {
+  .search-bar-container {
+    width: 100%;
+  }
+
+  .search-field {
+    .form-control {
+      border-radius: 0.5rem !important;
+    }
+  }
+}

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

@@ -43,6 +43,7 @@ export default function SearchBar(props: SearchBarProps) {
   }, [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);
@@ -64,7 +65,7 @@ export default function SearchBar(props: SearchBarProps) {
         icon={faSearch}
         onClick={() => {}}
         variant="secondary"
-        className="search-bar-button"
+        className="search-bar-button d-none d-lg-flex"
       />
     </div>
   );

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

@@ -10,12 +10,6 @@ interface SearchResultsDropdownProps {
 export default function SearchResultsDropdown({
   data,
 }: SearchResultsDropdownProps) {
-  let likes = 1500;
-  let uses = 25000;
-  let comments = 25;
-  let modelCategory = "TTS";
-  let modelType = "Tacotron2";
-
   const history = useHistory();
 
   const handleResultClick = (item: TtsModel, event: React.MouseEvent) => {

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

@@ -27,7 +27,11 @@ export default function MobileMenu(props: MobileMenuProps) {
 
   let signupOrProfileButton = (
     <>
-      <Button label="Sign Up" small onClick={() => history.push("/signup")} />
+      <Button
+        label="Sign Up"
+        small={true}
+        onClick={() => history.push("/signup")}
+      />
     </>
   );
 

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

@@ -1,38 +1,110 @@
-import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
+import { faBars, faSearch, faUser } from "@fortawesome/pro-solid-svg-icons";
 import { Button } from "components/common";
 import SearchBar from "components/common/SearchBar";
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
+import { WebUrl } from "common/WebUrl";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 
-interface TopNavProps {}
+interface TopNavProps {
+  sessionWrapper: SessionWrapper;
+}
+
+export default function TopNav({ sessionWrapper }: TopNavProps) {
+  let history = useHistory();
+
+  const handleMenuButtonClick = () => {
+    const wrapper = document.getElementById("wrapper");
+
+    if (window.innerWidth < 1200) {
+      if (wrapper) {
+        wrapper.classList.toggle("toggled");
+      }
+    }
+  };
+
+  const handleSearchButtonClick = () => {};
+
+  let signupOrProfileButton = (
+    <>
+      <Button label="Sign Up" small onClick={() => history.push("/signup")} />
+    </>
+  );
+
+  if (sessionWrapper.isLoggedIn()) {
+    let displayName = sessionWrapper.getDisplayName();
+    if (displayName === undefined) {
+      displayName = "My Account";
+    }
+    let url = WebUrl.userProfilePage(displayName);
+    signupOrProfileButton = (
+      <Button
+        icon={faUser}
+        label="My Profile"
+        small
+        variant="secondary"
+        onClick={() => history.push(url)}
+        className="d-none d-lg-block"
+      />
+    );
+  }
 
-export default function TopNav(props: TopNavProps) {
   return (
     <div id="topbar-wrapper" className="position-fixed">
       <div className="topbar-nav">
-        <Link to="/">
-          <img
-            src="/fakeyou/FakeYou-Logo.png"
-            alt="FakeYou: Cartoon and Celebrity Text to Speech"
-            height="34"
-            className="mb-1"
-          />
-        </Link>
+        <div className="topbar-nav-left">
+          <Link to="/">
+            <img
+              src="/fakeyou/FakeYou-Logo.png"
+              alt="FakeYou: Cartoon and Celebrity Text to Speech"
+              height="34"
+              className="mb-2 d-none d-lg-block"
+            />
+            <img
+              src="/fakeyou/FakeYou-Logo-Mobile.png"
+              alt="FakeYou: Cartoon and Celebrity Text to Speech"
+              height="36"
+              className="mb-0 d-block d-lg-none"
+            />
+          </Link>
+        </div>
 
-        {/* Search Bar */}
-        <SearchBar />
+        <div className="topbar-nav-center">
+          {/* Search Bar */}
+          <div className="d-none d-lg-block">
+            <SearchBar />
+          </div>
+        </div>
 
-        <div className="d-flex align-items-center gap-3">
-          <div className="sidebar-buttons d-flex gap-2">
-            {/* {userOrLoginButton}
-        {signupOrLogOutButton} */}
-            <Button label="Login" small={true} />
-          </div>
-          <div>
-            <Gravatar size={40} />
+        <div className="topbar-nav-right">
+          <div className="d-flex align-items-center gap-2">
+            {signupOrProfileButton}
+            <Button
+              icon={faSearch}
+              variant="secondary"
+              small={true}
+              square={true}
+              onClick={handleSearchButtonClick}
+              className="d-lg-none"
+            />
+            <Button
+              icon={faBars}
+              variant="secondary"
+              small={true}
+              square={true}
+              onClick={handleMenuButtonClick}
+              className="d-lg-none"
+            />
           </div>
         </div>
       </div>
+
+      {/* Mobile Searchbar */}
+      <div className="topbar-mobile-search-bar-container d-block d-lg-none">
+        <div className="topbar-mobile-search-bar">
+          <SearchBar />
+        </div>
+      </div>
     </div>
   );
 }

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

@@ -168,12 +168,45 @@ $topbar-height: 66px;
 }
 
 .topbar-nav {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   height: 100%;
-  padding: 0 1.5rem;
+  padding: 0 1rem;
   justify-content: space-between;
   align-items: center;
+
+  .topbar-nav-right {
+    display: flex;
+    justify-content: end;
+  }
+
+  .topbar-nav-right {
+    display: flex;
+    justify-content: end;
+  }
+
+  .topbar-nav-center {
+    grid-column: 2;
+  }
+}
+
+.topbar-mobile-search-bar-container {
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+  top: 0;
+  height: $topbar-height;
+  background-color: $panel;
+
+  .topbar-mobile-search-bar {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    padding: 0 1rem;
+  }
 }
 
 @media (min-width: 992px) {
@@ -202,3 +235,18 @@ $topbar-height: 66px;
     margin-right: 0;
   }
 }
+
+@media (max-width: 992px) {
+  #wrapper.toggled #sidebar-wrapper {
+    width: 100%;
+  }
+
+  #sidebar-wrapper {
+    left: 100%;
+    margin-left: 0;
+  }
+
+  .sidebar-nav {
+    width: 100%;
+  }
+}

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -212,7 +212,7 @@ class PageContainer extends React.Component<
       <div id="wrapper" className="no-padding">
         <div id="overlay"></div>
 
-        <TopNav />
+        <TopNav sessionWrapper={this.props.sessionWrapper} />
         <SideNav
           sessionWrapper={this.props.sessionWrapper}
           logoutHandler={this.logout}