1 files changed, 38 insertions, 0 deletions
diff --git a/src/components/Header/MobileHeader.tsx b/src/components/Header/MobileHeader.tsx
new file mode 100644
index 0000000..fbbd37a
--- /dev/null
+++ b/src/components/Header/MobileHeader.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { AppBar, Toolbar, useScrollTrigger, Slide } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+interface PropTypes {
+  menu: JSX.Element;
+  logo: JSX.Element;
+  search: JSX.Element;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+}));
+
+
+const MobileHeader: React.FC<PropTypes> = React.memo(props => {
+  const classes = useStyles();
+  const trigger = useScrollTrigger();
+  const { menu, search, logo } = props;
+
+  return (
+    <Slide appear={false} direction="down" in={!trigger}>
+      <AppBar position="fixed">
+        <Toolbar className={classes.root}>
+          {menu}
+          {logo}
+          {search}
+        </Toolbar>
+      </AppBar>
+    </Slide>
+  );
+});
+
+export default MobileHeader;
+