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
 }
 
-export const ColumnLayout: FC<IColumnLayoutProps> = ({
+const InnerColumnLayout: FC<IColumnLayoutProps> = ({
   title,
   sidebar,
   content,
 }) => {
-  const [activeMobileMenu, setActiveMobileMenu] = useState(false)
+  const { openOnMobile, setOpenOnMobile } = useSidebar()
   const { lock, unlock } = useLockBodyScroll()
 
   function openMenu() {
-    setActiveMobileMenu(true)
+    setOpenOnMobile(true)
     lock()
   }
 
   function closeMenu() {
-    setActiveMobileMenu(false)
+    setOpenOnMobile(false)
     unlock()
   }
 
   return (
-    <ThemeProvider>
+    <Fragment>
-      <SidebarProvider>
       <GlobalStyles />
       <SC.Main>
         <MobileHeader openMenu={openMenu}>{title}</MobileHeader>
-          {sidebar({ className: activeMobileMenu ? "is-open" : "" })}
+        {sidebar({ className: openOnMobile ? "is-open" : "" })}
         <SC.MainContent>
           <SC.Container>{content}</SC.Container>
         </SC.MainContent>
       </SC.Main>
       <SC.Overlay
-          className={activeMobileMenu ? "is-open" : ""}
+        className={openOnMobile ? "is-open" : ""}
         onClick={closeMenu}
       />
+    </Fragment>
+  )
+}
+
+export const ColumnLayout: FC<IColumnLayoutProps> = ({
+  title,
+  sidebar,
+  content,
+}) => {
+  return (
+    <ThemeProvider>
+      <SidebarProvider>
+        <InnerColumnLayout title={title} sidebar={sidebar} content={content} />
       </SidebarProvider>
     </ThemeProvider>
   )