refactor: change Header element to Sidebar

src/App.scss

@@ -6,7 +6,7 @@
     flex-direction: row;
     font-family: Heebo;
 
-    > .header {
+    > .sidebar {
         height: 100vh;
         background-color: white;
         padding: 30px;

src/App.tsx

@@ -13,7 +13,7 @@ import { PageSearchState, SearchContext } from './model/pageState'
 import moment from 'moment'
 import DashboardPage from './pages/dashboard/DashboardPage'
 import { useSessionStorage } from 'usehooks-ts'
-import Header from './pages/components/header/Header'
+import SideBar from './pages/components/header/SideBar'
 import RealtimeMapPage from './pages/RealtimeMapPage'
 import SingleLineMapPage from './pages/SingleLineMapPage'
 import { useLocation } from 'react-router-dom'
@@ -158,7 +158,7 @@ const App = () => {
           <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
             <ConfigProvider direction="rtl" locale={heIL}>
               <StyledLayout className="main">
-                <Header pages={PAGES} />
+                <SideBar pages={PAGES} />
                 <Layout>
                   <StyledContent>
                     <StyledBody>

src/pages/components/header/SideBar.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import Menu, { MenuPage } from './menu/Menu'
+import cn from 'classnames'
+
+export default function SideBar({ pages }: { pages: MenuPage[] }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <aside className={cn('sidebar', { open })}>
+      <div className="sideber-menu" onClick={() => setOpen(!open)}>
+        <div className="sideber-menu-line" />
+        <div className="sideber-menu-line" />
+        <div className="sideber-menu-line" />
+      </div>
+      <h1>דאטאבוס</h1>
+      <Menu pages={pages} />
+    </aside>
+  )
+}

src/pages/components/header/menu/menu.scss

@@ -27,18 +27,18 @@
     }
 }
 
-.header-menu {
+.sideber-menu {
     display: none;
 }
 
 @media screen and (max-width: $mobile-max-width) {
 
-    .main > .header {
+    .main > .sidebar {
         max-width: 0;
         padding: 0;
         transition: all 0.2s ease-in-out;
 
-        .header-menu {
+        .sideber-menu {
             display: block;
             position: absolute;
             top: 0;
@@ -56,7 +56,7 @@
         }
     }
 
-    .main > .header.open{
+    .main > .sidebar.open{
         display: block;
         position: absolute;
         z-index: 500;