Merge pull request #174 from the-programmers-hangout/feat-mobile-header-title

feat: support custom mobile header title

src/components/HomeMobileHeader/index.tsx

@@ -5,13 +5,16 @@ interface IHomeMobileHeaderProps {
   openMenu: () => void
 }
 
-export const HomeMobileHeader: FC<IHomeMobileHeaderProps> = ({ openMenu }) => {
+export const HomeMobileHeader: FC<IHomeMobileHeaderProps> = ({
+  openMenu,
+  children,
+}) => {
   return (
     <SC.HomeMobileHeaderWrapper>
       <SC.LogoWrapper>
         <SC.StyledLogo />
       </SC.LogoWrapper>
-      Resources
+      {children}
       <SC.Burger onClick={openMenu} />
     </SC.HomeMobileHeaderWrapper>
   )

src/layouts/ArchivesLayout/index.tsx

@@ -4,5 +4,11 @@ import { ArchivesSidebar } from "../../components/ArchivesSidebar"
 import { ColumnLayout } from "../ColumnLayout"
 
 export const ArchivesLayout: FC = ({ children }) => {
-  return <ColumnLayout sidebar={ArchivesSidebar} content={children} />
+  return (
+    <ColumnLayout
+      title="Archives"
+      sidebar={ArchivesSidebar}
+      content={children}
+    />
+  )
 }

src/layouts/ColumnLayout/index.tsx

@@ -8,11 +8,16 @@ import { ThemeProvider } from "../../ThemeProvider"
 import * as SC from "./styles"
 
 interface IColumnLayoutProps {
+  title: string
   sidebar: React.ReactNode
   content: React.ReactNode
 }
 
-export const ColumnLayout: FC<IColumnLayoutProps> = ({ sidebar, content }) => {
+export const ColumnLayout: FC<IColumnLayoutProps> = ({
+  title,
+  sidebar,
+  content,
+}) => {
   const [activeMobileMenu, setActiveMobileMenu] = useState(false)
   const { lock, unlock } = useLockBodyScroll()
 
@@ -31,7 +36,7 @@ export const ColumnLayout: FC<IColumnLayoutProps> = ({ sidebar, content }) => {
       <SidebarProvider>
         <GlobalStyles />
         <SC.Main>
-          <HomeMobileHeader openMenu={openMenu} />
+          <HomeMobileHeader openMenu={openMenu}>{title}</HomeMobileHeader>
           {sidebar({ className: activeMobileMenu ? "is-open" : "" })}
           <SC.MainContent>
             <SC.Container>{content}</SC.Container>

src/layouts/ResourcesLayout/index.tsx

@@ -4,5 +4,11 @@ import { ResourcesSidebar } from "../../components/ResourcesSidebar"
 import { ColumnLayout } from "../ColumnLayout"
 
 export const ResourcesLayout: FC = ({ children }) => {
-  return <ColumnLayout sidebar={ResourcesSidebar} content={children} />
+  return (
+    <ColumnLayout
+      title="Resources"
+      sidebar={ResourcesSidebar}
+      content={children}
+    />
+  )
 }