refact(resources): extract mobile header to its own component

src/components/MobileHeader/index.tsx

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

src/components/MobileHeader/styles.tsx

@@ -0,0 +1,64 @@
+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: rgba(255, 255, 255, 0.8);
+  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: #222;
+    margin: 0 auto;
+  }
+
+  &::before {
+    top: 8px;
+  }
+
+  &::after {
+    bottom: 8px;
+  }
+`

src/components/ResourcesLayout/index.tsx

@@ -9,6 +9,7 @@ import React, { PropsWithChildren, useState } from "react"
 
 import { GlobalStyles } from "../../globalStyles"
 import { SidebarProvider } from "../../SidebarProvider"
+import { MobileHeader } from "../MobileHeader"
 import { ResourcesSidebar } from "../ResourcesSidebar"
 import * as SC from "./styles"
 
@@ -27,13 +28,7 @@ export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
     <SidebarProvider>
       <GlobalStyles />
       <SC.Main>
-        <SC.MobileHeader>
-          <SC.LogoWrapper>
-            <SC.StyledLogo />
-          </SC.LogoWrapper>
-          Resources
-          <SC.Burger onClick={openMenu} />
-        </SC.MobileHeader>
+        <MobileHeader openMenu={openMenu} />
         <ResourcesSidebar className={activeMobileMenu ? "is-open" : ""} />
         <SC.MainContent>
           <SC.Container>{children}</SC.Container>

src/components/ResourcesLayout/styles.tsx

@@ -1,6 +1,4 @@
 import styled from "styled-components"
-import { fontFamily } from "../../design/typography"
-import Logo from "../../images/tph-logo.svg"
 
 export const Main = styled.div`
   display: flex;
@@ -8,40 +6,6 @@ export const Main = styled.div`
   min-height: 100vh;
 `
 
-export const MobileHeader = styled.div`
-  display: none;
-  z-index: 50;
-  background: rgba(255, 255, 255, 0.8);
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 16px 32px;
-  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 Overlay = styled.div`
   z-index: 99;
   position: fixed;
@@ -63,33 +27,6 @@ export const Overlay = styled.div`
   }
 `
 
-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: #222;
-    margin: 0 auto;
-  }
-
-  &::before {
-    top: 8px;
-  }
-
-  &::after {
-    bottom: 8px;
-  }
-`
-
 export const MainContent = styled.main`
   flex: 1 1 auto;
   margin-top: 128px;