feat: collapsible menu (#215)

menu can be collapsed in a way it shows only icons

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/pages/components/header/sidebar/SideBar.tsx → src/layout/sidebar/SideBar.tsx

@@ -1,19 +1,22 @@
 import Menu from './menu/Menu'
 import './sidebar.scss'
-import { Drawer } from 'antd'
-import { useContext } from 'react'
-import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
+import { Drawer, Layout } from 'antd'
+import { useContext, useState } from 'react'
+import { LayoutContextInterface, LayoutCtx } from '../LayoutContext'
 import GitHubLink from './GitHubLink/GitHubLink'
 
+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
@@ -22,20 +25,28 @@ export default function SideBar() {
         width={280}
         onClose={() => setDrawerOpen(false)}
         open={drawerOpen}
-        className="hideOnDesktop">
+        className="hideOnDesktop"
+        bodyStyle={{ padding: '0' }}>
         <Logo />
         <div className="sidebar-divider"></div>
         <Menu />
         <div className="sidebar-divider"></div>
         <GitHubLink />
       </Drawer>
-      <aside className={'sidebar hideOnMobile'}>
-        <Logo />
+      <Sider
+        theme="light"
+        breakpoint="lg"
+        collapsedWidth={60}
+        collapsible
+        collapsed={collapsed}
+        onCollapse={(value: boolean) => setCollapsed(value)}
+        className="hideOnMobile">
+        {collapsed ? <CollapsedLogo /> : <Logo />}
         <div className="sidebar-divider"></div>
         <Menu />
         <div className="sidebar-divider"></div>
         <GitHubLink />
-      </aside>
+      </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,72 @@
+@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;
+}
+
+.sidebar-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-divider {
+  height: 1px;
+  background-color: #ccc; 
+  margin: 8px 0; 
+}

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": "נסיעות שתוכננו",