Merge pull request #77 from which-ecosystem/redesign

Mobile search and basic drawer

1 files changed, 15 insertions, 5 deletions

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>