feat: collapsible menu

src/App.scss

@@ -5,10 +5,4 @@
 .main {
     flex-direction: row;
     font-family: Heebo;
-
-    > .sidebar {
-        height: 100vh;
-        background-color: white;
-        padding: 10px;     
-    }
 }

src/App.tsx

@@ -9,7 +9,7 @@ import { BrowserRouter as Router, useSearchParams } from 'react-router-dom'
 import { PageSearchState, SearchContext } from './model/pageState'
 import moment from 'moment'
 import { useSessionStorage } from 'usehooks-ts'
-import SideBar from './pages/components/header/sidebar/SideBar'
+
 import { useLocation } from 'react-router-dom'
 import ReactGA from 'react-ga4'
 import { CacheProvider } from '@emotion/react'
@@ -22,8 +22,10 @@ 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 MainHeader from './layout/header/Header'
+import SideBar from './layout/sidebar/SideBar'
 import LayoutContext from './layout/LayoutContext'
+
 const { Content } = Layout
 
 const StyledLayout = styled(Layout)`

src/layout/sidebar/SideBar.tsx

@@ -0,0 +1,44 @@
+import Menu from './menu/Menu'
+import './sidebar.scss'
+import { Drawer, Layout } from 'antd'
+import { useContext, useState } from 'react'
+import { LayoutContextInterface, LayoutCtx } from '../LayoutContext'
+
+const { Sider } = Layout
+
+const Logo = () => (
+  <div style={{ overflow: 'hidden' }}>
+    <h1 className={'sidebar-logo'}>דאטאבוס</h1>
+  </div>
+)
+const CollapsedLogo = () => <h1 className={'sidebar-logo-collapsed'}>🚌</h1>
+
+export default function SideBar() {
+  const { drawerOpen, setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
+  const [collapsed, setCollapsed] = useState(false)
+  return (
+    <>
+      <Drawer
+        placement="right"
+        mask
+        width={280}
+        onClose={() => setDrawerOpen(false)}
+        open={drawerOpen}
+        className="hideOnDesktop"
+        bodyStyle={{ padding: '0' }}>
+        <Menu />
+      </Drawer>
+      <Sider
+        theme="light"
+        breakpoint="lg"
+        collapsedWidth={60}
+        collapsible
+        collapsed={collapsed}
+        onCollapse={(value: boolean) => setCollapsed(value)}
+        className="hideOnMobile">
+        {collapsed ? <CollapsedLogo /> : <Logo />}
+        <Menu />
+      </Sider>
+    </>
+  )
+}

src/layout/sidebar/menu/Menu.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import './menu.scss'
+import { useTranslation } from 'react-i18next'
+import { PAGES as pages } from 'src/routes'
+
+import type { MenuProps } from 'antd'
+import { Menu } from 'antd'
+
+type MenuItem = Required<MenuProps>['items'][number]
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  } as MenuItem
+}
+
+const MainMenu = () => {
+  const { t, i18n } = useTranslation()
+  const items: MenuItem[] = pages.map((itm) => {
+    return getItem(<Link to={t(itm.path)}>{t(itm.label)}</Link>, itm.path, itm.icon)
+  })
+  const [currentLanguage, setCurrentLanguage] = useState('en')
+
+  const handleChangeLanguage = () => {
+    const newLanguage = currentLanguage === 'en' ? 'he' : 'en'
+    setCurrentLanguage(newLanguage)
+    i18n.changeLanguage(newLanguage)
+  }
+  const location = useLocation()
+  const [current, setCurrent] = useState(
+    location.pathname === '/' || location.pathname === '' ? '/dashboard' : location.pathname,
+  )
+
+  useEffect(() => {
+    if (location) {
+      if (current !== location.pathname) {
+        setCurrent(location.pathname)
+      }
+    }
+  }, [location, current])
+
+  const handleClick: MenuProps['onClick'] = ({ key }) => {
+    setCurrent(key)
+  }
+  return (
+    <>
+      <Menu
+        onClick={handleClick}
+        theme="light"
+        defaultSelectedKeys={[current]}
+        mode="inline"
+        items={items}
+      />
+      {null && <button onClick={handleChangeLanguage}>Change Language</button>}
+    </>
+  )
+}
+
+export default MainMenu

src/pages/components/header/sidebar/menu/menu.scss → src/layout/sidebar/menu/menu.scss

@@ -1,4 +1,4 @@
-@import '../../../../../resources/variables';
+@import '../../../resources/variables';
 
 .menu {
     flex-direction: column;

src/layout/sidebar/sidebar.scss

@@ -0,0 +1,61 @@
+@import '../../resources/variables';
+
+
+.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: 22px;
+  border-top: 6px solid gray;
+  border-bottom: 8px solid gray;
+  padding-bottom: 0;
+  line-height: 25px;
+}

src/locale/he.json

@@ -33,7 +33,7 @@
   "ride_extra": "נסיעה שלא תוכננה 🧐",
   "ride_duped": "נסיעה כפולה ❇️",
   "checkbox_only_gaps": "רק פערים",
-  "dashboard_page_title": "מפעילי תח\"צ לפי קיום נסיעות מתוכננות",
+  "dashboard_page_title": "קיום נסיעות",
   "dashboard_tooltip_content": "על כל קו בישראל מוצמד GPS שמדווח את מיקום האוטובוס כל כמה רגעים.\nאז מה היא נסיעה שלא בוצעה? זאת נסיעה שתוכננה, אבל לא דווח שיצאה בנתוני הGPS. תוכלו לראות אותה באפליקציה למשל, אבל כשתחכו בתחנה, היא לעולם לא תגיע",
   "worst_lines_page_title": "הקווים הגרועים ביותר של 5 המפעילות הגדולות",
   "rides_planned": "נסיעות שתוכננו",