3 files changed, 22 insertions, 14 deletions
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 5621dbf..461a1f2 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -10,7 +10,6 @@ import {
   Notifications,
   Home,
   Menu,
-  Search
 } from '@material-ui/icons';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 
@@ -75,12 +74,6 @@ const Header: React.FC = React.memo(() => {
     </IconButton>
   );
 
-  const search = (
-    <IconButton>
-      <Search />
-    </IconButton>
-  );
-
   const logo = (
     <Typography variant="h5" className={classes.logo} onClick={handleHome}>
       Which
@@ -99,7 +92,7 @@ const Header: React.FC = React.memo(() => {
 
   return isMobile ? (
     <>
-      <MobileHeader logo={logo} menu={menu} search={search} />
+      <MobileHeader logo={logo} menu={menu} />
       <BottomBar feed={feed} profile={profile} notifications={notifications} />
     </>
   ) : (
diff --git a/src/components/Header/MobileHeader.tsx b/src/components/Header/MobileHeader.tsx
index a20d54a..752e4bc 100644
--- a/src/components/Header/MobileHeader.tsx
+++ b/src/components/Header/MobileHeader.tsx
@@ -1,16 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   AppBar,
   Toolbar,
+  IconButton,
   useScrollTrigger,
   Slide
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { Search, Clear } from '@material-ui/icons';
+import SearchBar from './SearchBar';
 
 interface PropTypes {
   menu: JSX.Element;
   logo: JSX.Element;
-  search: JSX.Element;
 }
 
 const useStyles = makeStyles({
@@ -24,15 +26,23 @@ const useStyles = makeStyles({
 const MobileHeader: React.FC<PropTypes> = React.memo(props => {
   const classes = useStyles();
   const trigger = useScrollTrigger();
-  const { menu, search, logo } = props;
+  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
+
+  const { menu, logo } = props;
+
+  const handleToggle = () => {
+    setIsSearchOpen(value => !value);
+  };
 
   return (
     <Slide appear={false} direction="down" in={!trigger}>
       <AppBar position="fixed">
         <Toolbar className={classes.root}>
           {menu}
-          {logo}
-          {search}
+          {isSearchOpen ? <SearchBar callback={handleToggle} /> : logo}
+          <IconButton onClick={handleToggle}>
+            {isSearchOpen ? <Clear /> : <Search />}
+          </IconButton>
         </Toolbar>
       </AppBar>
     </Slide>
diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx
index 8bfe0fb..ea6e6ac 100644
--- a/src/components/Header/SearchBar.tsx
+++ b/src/components/Header/SearchBar.tsx
@@ -15,6 +15,10 @@ import { User } from 'which-types';
 import { get } from '../../requests';
 import UserStrip from '../UserStrip/UserStrip';
 
+interface PropTypes {
+  callback?: () => void;
+}
+
 const INTERVAL = 300;
 const LIMIT = 7;
 
@@ -37,7 +41,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const SearchBar: React.FC = React.memo(() => {
+const SearchBar: React.FC<PropTypes> = React.memo(({ callback }) => {
   const [results, setResults] = useState<User[]>([]);
   const [query, setQuery] = useState<string>('');
   const [debouncedQuery, setDebouncedQuery] = useState<string>(query);
@@ -72,6 +76,7 @@ const SearchBar: React.FC = React.memo(() => {
     const { username } = results[index];
     history.push(`/profile/${username}`);
     handleClose();
+    if (callback) callback();
   };
 
   const SearchResults = (