refact: rename poorly named mobile header

src/components/MobileHeader/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from "react"
+import * as SC from "./styles"
+
+interface IMobileHeaderProps {
+  openMenu: () => void
+}
+
+export const MobileHeader: FC<IMobileHeaderProps> = ({
+  openMenu,
+  children,
+}) => {
+  return (
+    <SC.MobileHeaderWrapper>
+      <SC.LogoWrapper>
+        <SC.StyledLogo />
+      </SC.LogoWrapper>
+      {children}
+      <SC.Burger onClick={openMenu} />
+    </SC.MobileHeaderWrapper>
+  )
+}

src/components/MobileHeader/styles.tsx

@@ -0,0 +1,65 @@
+import { transparentize } from "polished"
+import styled from "styled-components"
+import { fontFamily } from "../../design/typography"
+import Logo from "../../images/tph-logo.svg"
+
+export const MobileHeaderWrapper = styled.div`
+  z-index: 50;
+  background: ${props => transparentize(0.2, props.theme.main.background)};
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 16px 32px;
+  display: none;
+  align-items: center;
+  font-weight: 700;
+  font-family: ${fontFamily.header};
+  font-size: 22px;
+
+  @media screen and (max-width: 767px) {
+    display: flex;
+  }
+`
+
+export const LogoWrapper = styled.div`
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #222;
+  border-radius: 7px;
+  margin-right: 8px;
+`
+
+export const StyledLogo = styled(Logo)`
+  height: 25px;
+`
+
+export const Burger = styled.div`
+  margin-left: auto;
+  width: 16px;
+  height: 9px;
+  padding: 8px;
+  position: relative;
+  cursor: pointer;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    height: 2px;
+    width: 16px;
+    background: ${props => props.theme.main.foreground};
+    margin: 0 auto;
+  }
+
+  &::before {
+    top: 8px;
+  }
+
+  &::after {
+    bottom: 8px;
+  }
+`