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,7 +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 MainHeader from './layout/header/Header'
+import SideBar from './layout/sidebar/SideBar'
 import LayoutContext from './layout/LayoutContext'
 import { EasterEgg } from './pages/EasterEgg/EasterEgg'
 const { Content } = 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": "נסיעות שתוכננו",

src/routes/index.tsx

@@ -26,58 +26,58 @@ export const PAGES = [
   {
     label: TEXT_KEYS.dashboard_page_title,
     path: '/dashboard',
-    icon: LaptopOutlined,
+    icon: <LaptopOutlined />,
     element: <DashboardPage />,
   },
   {
     label: TEXT_KEYS.timeline_page_title,
     path: '/timeline',
     searchParamsRequired: true,
-    icon: FieldTimeOutlined,
+    icon: <FieldTimeOutlined />,
     element: <TimelinePage />,
   },
   {
     label: TEXT_KEYS.gaps_page_title,
     path: '/gaps',
     searchParamsRequired: true,
-    icon: BarChartOutlined,
+    icon: <BarChartOutlined />,
     element: <GapsPage />,
   },
   {
     label: TEXT_KEYS.gaps_patterns_page_title,
     path: '/gaps_patterns',
-    icon: LineChartOutlined,
+    icon: <LineChartOutlined />,
     element: <GapsPatternsPage />,
   },
   {
     label: TEXT_KEYS.realtime_map_page_title,
     path: '/map',
-    icon: HeatMapOutlined,
+    icon: <HeatMapOutlined />,
     element: <RealtimeMapPage />,
   },
   {
     label: TEXT_KEYS.singleline_map_page_title,
     path: '/single-line-map',
     searchParamsRequired: true,
-    icon: RadarChartOutlined,
+    icon: <RadarChartOutlined />,
     element: <SingleLineMapPage />,
   },
   {
     label: TEXT_KEYS.about_title,
     path: '/about',
-    icon: BellOutlined,
+    icon: <BellOutlined />,
     element: <About />,
   },
   {
     label: TEXT_KEYS.report_a_bug_title,
     path: 'https://github.com/hasadna/open-bus-map-search/issues',
-    icon: BugOutlined,
+    icon: <BugOutlined />,
     element: null,
   },
   {
     label: TEXT_KEYS.donate_title,
     path: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal',
-    icon: DollarOutlined,
+    icon: <DollarOutlined />,
     element: null,
   },
 ]

tests/about.spec.ts

@@ -4,8 +4,8 @@ test.describe('About Page Tests', () => {
     await page.goto('/')
     await page.getByText('אודות').click()
     await expect(page).toHaveURL('http://localhost:3000/about')
-    const locator = await page.getByText('אודות')
-    await expect(locator).toHaveClass('menu-item active')
+    const locator = await page.locator('li:has-text("אודות")')
+    await expect(locator).toHaveClass(/ant-menu-item-selected/)
   })
   test('page display title `מהו אתר “דאטאבוס”?`', async ({ page }) => {
     await page.goto('/about')

tests/menu.spec.ts

@@ -4,7 +4,7 @@ test('menu', async ({ page }) => {
   await page.goto('/')
   await expect(page.locator('h1')).toContainText('דאטאבוס')
   const menuItemsInOrder = [
-    'מפעילי תח"צ לפי קיום נסיעות מתוכננות',
+    'קיום נסיעות',
     'לוח זמנים היסטורי',
     'נסיעות שלא יצאו',
     'דפוסי נסיעות שלא יצאו',
@@ -14,5 +14,5 @@ test('menu', async ({ page }) => {
     'דיווח על באג',
     'לתרומות',
   ]
-  await expect(page.locator('ul > li')).toContainText(menuItemsInOrder)
+  await expect(page.locator('ul > li a')).toContainText(menuItemsInOrder)
 })