refact(sidebar): move mobile state to context provider

src/SidebarProvider.tsx

@@ -3,6 +3,8 @@ import React, { FC, useMemo, useState } from "react"
 export interface ISidebarContextInterface {
   current: number
   setCurrent: (index: number) => void
+  openOnMobile: boolean
+  setOpenOnMobile: (active: boolean) => void
 }
 
 export const SidebarContext = React.createContext<ISidebarContextInterface | null>(
@@ -11,13 +13,16 @@ export const SidebarContext = React.createContext<ISidebarContextInterface | nul
 
 export const SidebarProvider: FC = ({ children }) => {
   const [current, setCurrent] = useState(0)
+  const [openOnMobile, setOpenOnMobile] = useState(false)
 
   const memoizedContextValue = useMemo(
     () => ({
       current,
       setCurrent,
+      openOnMobile,
+      setOpenOnMobile,
     }),
-    [current, setCurrent]
+    [current, setCurrent, openOnMobile, setOpenOnMobile]
   )
 
   return (

src/layouts/ColumnLayout/index.tsx

@@ -1,8 +1,9 @@
-import React, { FC, useState } from "react"
+import React, { FC, Fragment } from "react"
 
 import { MobileHeader } from "../../components/MobileHeader"
 import { GlobalStyles } from "../../globalStyles"
 import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
+import useSidebar from "../../hooks/useSidebar"
 import { SidebarProvider } from "../../SidebarProvider"
 import { ThemeProvider } from "../../ThemeProvider"
 import * as SC from "./styles"
@@ -13,39 +14,51 @@ interface IColumnLayoutProps {
   content: React.ReactNode
 }
 
+const InnerColumnLayout: FC<IColumnLayoutProps> = ({
+  title,
+  sidebar,
+  content,
+}) => {
+  const { openOnMobile, setOpenOnMobile } = useSidebar()
+  const { lock, unlock } = useLockBodyScroll()
+
+  function openMenu() {
+    setOpenOnMobile(true)
+    lock()
+  }
+
+  function closeMenu() {
+    setOpenOnMobile(false)
+    unlock()
+  }
+
+  return (
+    <Fragment>
+      <GlobalStyles />
+      <SC.Main>
+        <MobileHeader openMenu={openMenu}>{title}</MobileHeader>
+        {sidebar({ className: openOnMobile ? "is-open" : "" })}
+        <SC.MainContent>
+          <SC.Container>{content}</SC.Container>
+        </SC.MainContent>
+      </SC.Main>
+      <SC.Overlay
+        className={openOnMobile ? "is-open" : ""}
+        onClick={closeMenu}
+      />
+    </Fragment>
+  )
+}
+
 export const ColumnLayout: FC<IColumnLayoutProps> = ({
   title,
   sidebar,
   content,
 }) => {
-  const [activeMobileMenu, setActiveMobileMenu] = useState(false)
-  const { lock, unlock } = useLockBodyScroll()
-
-  function openMenu() {
-    setActiveMobileMenu(true)
-    lock()
-  }
-
-  function closeMenu() {
-    setActiveMobileMenu(false)
-    unlock()
-  }
-
   return (
     <ThemeProvider>
       <SidebarProvider>
-        <GlobalStyles />
+        <InnerColumnLayout title={title} sidebar={sidebar} content={content} />
-        <SC.Main>
-          <MobileHeader openMenu={openMenu}>{title}</MobileHeader>
-          {sidebar({ className: activeMobileMenu ? "is-open" : "" })}
-          <SC.MainContent>
-            <SC.Container>{content}</SC.Container>
-          </SC.MainContent>
-        </SC.Main>
-        <SC.Overlay
-          className={activeMobileMenu ? "is-open" : ""}
-          onClick={closeMenu}
-        />
       </SidebarProvider>
     </ThemeProvider>
   )