feat: change mobile menu to use drawer

src/App.scss

@@ -9,37 +9,6 @@
     > .sidebar {
         height: 100vh;
         background-color: white;
-        padding: 10px;
-
-       .sidebar-logo {
-            position: relative;
-            margin: 20px 50px 26px 0;
-            width: 119px;
-            font-size: 30px;
-            border-top: 6px solid gray;
-            border-bottom: 8px solid gray;
-            padding-bottom: 0;
-            line-height: 25px;
-        }
-        .sidebar-logo::before {
-            height: 10px;
-            width: 10px;
-            border-radius: 5px;
-            position: absolute;
-            background: gray;
-            top: 28px;
-            right: 24px;
-            content: ' ' 
-        }
-        .sidebar-logo::after {
-            height: 10px;
-            width: 10px;
-            border-radius: 5px;
-            position: absolute;
-            background: gray;
-            top: 28px;
-            left: 17px;
-            content: ' ' 
-        }        
+        padding: 10px;     
     }
 }

src/App.tsx

@@ -22,6 +22,8 @@ import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 
 import RoutesList, { PAGES } from './routes'
+import MainHeader from './pages/components/header/Header'
+import LayoutContext from './layout/LayoutContext'
 const { Content } = Layout
 
 const StyledLayout = styled(Layout)`
@@ -107,14 +109,17 @@ const App = () => {
           <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
             <ConfigProvider direction="rtl" locale={heIL}>
               <StyledLayout className="main">
-                <SideBar />
-                <Layout>
-                  <StyledContent>
-                    <StyledBody>
-                      <RoutesList />
-                    </StyledBody>
-                  </StyledContent>
-                </Layout>
+                <LayoutContext>
+                  <SideBar />
+                  <Layout>
+                    <MainHeader />
+                    <StyledContent>
+                      <StyledBody>
+                        <RoutesList />
+                      </StyledBody>
+                    </StyledContent>
+                  </Layout>
+                </LayoutContext>
               </StyledLayout>
             </ConfigProvider>
           </LocalizationProvider>

src/layout/LayoutContext.tsx

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren, createContext, useState } from 'react'
+
+export interface LayoutContextInterface {
+  setDrawerOpen: (isOpen: boolean) => void
+  drawerOpen: boolean
+}
+export const LayoutCtx = createContext({} as LayoutContextInterface)
+const LayoutContext: FC<PropsWithChildren> = ({ children }) => {
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  return <LayoutCtx.Provider value={{ drawerOpen, setDrawerOpen }}>{children}</LayoutCtx.Provider>
+}
+export default LayoutContext

src/pages/components/header/Header.tsx

@@ -0,0 +1,16 @@
+import { Layout } from 'antd'
+import { MenuOutlined } from '@ant-design/icons'
+import { useContext } from 'react'
+import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
+
+const { Header } = Layout
+
+const MainHeader = () => {
+  const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
+  return (
+    <Header style={{ background: 'white' }} className="hideOnDesktop">
+      <MenuOutlined onClick={() => setDrawerOpen(true)} />
+    </Header>
+  )
+}
+export default MainHeader

src/pages/components/header/sidebar/SideBar.tsx

@@ -1,24 +1,33 @@
-import { useState } from 'react'
 import Menu from './menu/Menu'
-import { MenuOutlined } from '@ant-design/icons'
 import './sidebar.scss'
-import cn from 'classnames'
+import { Drawer } from 'antd'
+import { useContext } from 'react'
+import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
 
-const SidebarToggle = ({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) => (
-  <div className="sidebar-menu-toggle" onClick={() => setOpen(!open)}>
-    <MenuOutlined />
+const Logo = () => (
+  <div style={{ overflow: 'hidden' }}>
+    <h1 className={'sidebar-logo'}>דאטאבוס</h1>
   </div>
 )
 
-const Logo = () => <h1 className={'sidebar-logo'}>דאטאבוס</h1>
-
 export default function SideBar() {
-  const [open, setOpen] = useState(false)
+  const { drawerOpen, setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
+
   return (
-    <aside className={cn('sidebar', { open })}>
-      <Logo />
-      <SidebarToggle open={open} setOpen={setOpen} />
-      <Menu />
-    </aside>
+    <>
+      <Drawer
+        placement="right"
+        mask
+        width={280}
+        onClose={() => setDrawerOpen(false)}
+        open={drawerOpen}
+        className="hideOnDesktop">
+        <Menu />
+      </Drawer>
+      <aside className={'sidebar hideOnMobile'}>
+        <Logo />
+        <Menu />
+      </aside>
+    </>
   )
 }

src/pages/components/header/sidebar/sidebar.scss

@@ -37,3 +37,62 @@
     }
 
 }
+.hideOnMobile {
+    display: none;
+  }
+  @media only screen and (min-width: 768px) {
+    .hideOnMobile {
+      display: block;
+    }
+  }
+
+  .hideOnDesktop {
+    display: block;
+  }
+  @media only screen and (min-width: 768px) {
+    .hideOnDesktop {
+      display: none;
+    }
+  }
+
+.sidebar-logo {
+    position: relative;
+    margin: 20px auto;
+    width: 119px;
+    font-size: 30px;
+    border-top: 6px solid gray;
+    border-bottom: 8px solid gray;
+    padding-bottom: 0;
+    line-height: 25px;
+    &::before {
+      height: 10px;
+      width: 10px;
+      border-radius: 5px;
+      position: absolute;
+      background: gray;
+      top: 28px;
+      right: 24px;
+      content: ' ' 
+  }
+  &::after {
+      height: 10px;
+      width: 10px;
+      border-radius: 5px;
+      position: absolute;
+      background: gray;
+      top: 28px;
+      left: 17px;
+      content: ' ' 
+  }
+}
+
+.sidebar-logo-collapsed {
+    position: relative;
+    margin: 20px auto;
+    text-align: center;
+    font-size: 30px;
+    border-top: 6px solid gray;
+    border-bottom: 8px solid gray;
+    padding-bottom: 0;
+    line-height: 25px;
+}