refact: rename poorly named mobile header

src/components/MobileHeader/index.tsx

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

src/components/MobileHeader/styles.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components"
 import { fontFamily } from "../../design/typography"
 import Logo from "../../images/tph-logo.svg"
 
-export const HomeMobileHeaderWrapper = styled.div`
+export const MobileHeaderWrapper = styled.div`
   z-index: 50;
   background: ${props => transparentize(0.2, props.theme.main.background)};
   position: fixed;

src/layouts/ColumnLayout/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from "react"
 
-import { HomeMobileHeader } from "../../components/HomeMobileHeader"
+import { MobileHeader } from "../../components/MobileHeader"
 import { GlobalStyles } from "../../globalStyles"
 import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
 import { SidebarProvider } from "../../SidebarProvider"
@@ -36,7 +36,7 @@ export const ColumnLayout: FC<IColumnLayoutProps> = ({
       <SidebarProvider>
         <GlobalStyles />
         <SC.Main>
-          <HomeMobileHeader openMenu={openMenu}>{title}</HomeMobileHeader>
+          <MobileHeader openMenu={openMenu}>{title}</MobileHeader>
           {sidebar({ className: activeMobileMenu ? "is-open" : "" })}
           <SC.MainContent>
             <SC.Container>{content}</SC.Container>