style: move items from side menu to header (#540)

Co-authored-by: Noam Gaash <noam.gaash@gmail.com>

src/layout/header/Header.tsx

@@ -3,10 +3,10 @@ import { useContext } from 'react'
 import { LayoutContextInterface, LayoutCtx } from '../LayoutContext'
 import { useTheme } from '../ThemeContext'
 import { MenuOutlined } from '@ant-design/icons'
-import GitHubLink from './GitHubLink/GitHubLink'
 import './Header.css'
 import cn from 'classnames'
 import ToggleThemeButton from './ToggleThemeButton'
+import HeaderLinks from './HeaderLinks/HeaderLinks'
 
 const { Header } = Layout
 
@@ -17,8 +17,8 @@ const MainHeader = () => {
     <Header className={cn('main-header', { dark: isDarkTheme })}>
       <MenuOutlined onClick={() => setDrawerOpen(true)} className="hideOnDesktop" />
       <div style={{ flex: 1 }}>&nbsp;</div>
-      <GitHubLink />
       <ToggleThemeButton toggleTheme={toggleTheme} isDarkTheme={isDarkTheme} />
+      <HeaderLinks />
     </Header>
   )
 }

src/layout/header/GitHubLink/GitHubLink.scss → src/layout/header/HeaderLinks/HeaderLinks.scss

@@ -1,8 +1,14 @@
-.github-link {
+.header-links {
+  display: flex;
+  margin-right: 10px;
+}
+
+.header-link {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.5em;
+  padding-inline: 5px;
   cursor: pointer;
   transition: all 0.1s;
 

src/layout/header/HeaderLinks/HeaderLinks.tsx

@@ -0,0 +1,54 @@
+import { FC } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+
+import './HeaderLinks.scss'
+import { HEADER_LINKS } from 'src/routes'
+
+type LinkType = Omit<(typeof HEADER_LINKS)[number], 'element'>
+
+const HeaderLinks: FC = () => {
+  return (
+    <div className="header-links">
+      {HEADER_LINKS.map((item) => {
+        if (item.element === null) {
+          return (
+            <ExternalLink key={item.label} label={item.label} icon={item.icon} path={item.path} />
+          )
+        } else {
+          return (
+            <InternalLink key={item.label} label={item.label} icon={item.icon} path={item.path} />
+          )
+        }
+      })}
+    </div>
+  )
+}
+
+const ExternalLink = ({ label, path, icon }: LinkType) => {
+  const { t } = useTranslation()
+  function handleClick() {
+    window.open(path, '_blank')
+  }
+  return (
+    <div className="header-link" aria-label={t(label)} title={t(label)} onClick={handleClick}>
+      {icon}
+    </div>
+  )
+}
+
+const InternalLink = ({ label, path, icon }: LinkType) => {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  return (
+    <div
+      aria-label={t(label)}
+      title={t(label)}
+      className="header-link"
+      onClick={() => navigate(path)}>
+      {icon}
+    </div>
+  )
+}
+
+export default HeaderLinks

src/routes/index.tsx

@@ -12,7 +12,9 @@ const About = lazy(() => import('../pages/about'))
 const Profile = lazy(() => import('../pages/Profile'))
 const BugReportForm = lazy(() => import('../pages/BugReportForm '))
 const DataResearch = lazy(() =>
-  import('../pages/DataResearch/DataResearch').then((m) => ({ default: m.DataResearch })),
+  import('../pages/DataResearch/DataResearch').then((m) => ({
+    default: m.DataResearch,
+  })),
 )
 
 import {
@@ -26,6 +28,7 @@ import {
   BugOutlined,
   BarChartOutlined,
   LineChartOutlined,
+  GithubOutlined,
 } from '@ant-design/icons'
 import { MainRoute } from './MainRoute'
 import { ErrorPage } from 'src/pages/ErrorPage'
@@ -76,6 +79,9 @@ export const PAGES = [
     icon: <InfoCircleOutlined />,
     element: <About />,
   },
+] as const
+
+export const HEADER_LINKS = [
   {
     label: 'report_a_bug_title',
     path: 'report-a-bug',
@@ -88,6 +94,12 @@ export const PAGES = [
     icon: <DollarOutlined />,
     element: null,
   },
+  {
+    label: 'github_link',
+    path: 'https://github.com/hasadna/open-bus-map-search',
+    icon: <GithubOutlined />,
+    element: null,
+  },
 ] as const
 
 const HIDDEN_PAGES = [
@@ -106,7 +118,7 @@ const HIDDEN_PAGES = [
 ] as const
 
 const getRoutesList = () => {
-  const pages = [...PAGES, ...HIDDEN_PAGES]
+  const pages = [...PAGES, ...HIDDEN_PAGES, ...HEADER_LINKS]
   const RedirectToDashboard = () => <Navigate to={pages[0].path} replace />
   const routes = pages.filter((r) => r.element)
   return (

tests/menu.spec.ts

@@ -21,7 +21,6 @@ test('menu', async ({ page }) => {
     'מפה בזמן אמת',
     'מפה לפי קו',
     'אודות',
-    'לתרומות',
   ]
   await expect(page.locator('ul > li a')).toContainText(menuItemsInOrder)
 })