issue #193: Profile page creation

src/App.tsx

@@ -20,6 +20,9 @@ import { heIL as heILmui } from '@mui/x-date-pickers/locales'
 import { ThemeProvider, createTheme } from '@mui/material'
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { LocalizationProvider } from '@mui/x-date-pickers'
+import About from './pages/About'
+import GapsPatternsPage from './pages/GapsPatternsPage'
+import Profile from './pages/Profile'
 
 import RoutesList, { PAGES } from './routes'
 import MainHeader from './pages/components/header/Header'
@@ -39,6 +42,49 @@ const StyledBody = styled.div`
   min-height: 360px;
 `
 
+const PAGES = [
+  {
+    label: TEXT_KEYS.dashboard_page_title,
+    key: '/dashboard',
+  },
+  {
+    label: TEXT_KEYS.timeline_page_title,
+    key: '/timeline',
+    searchParamsRequired: true,
+  },
+  {
+    label: TEXT_KEYS.gaps_page_title,
+    key: '/gaps',
+    searchParamsRequired: true,
+  },
+  {
+    label: TEXT_KEYS.gaps_patterns_page_title,
+    key: '/gaps_patterns',
+  },
+  {
+    label: TEXT_KEYS.realtime_map_page_title,
+    key: '/map',
+  },
+  {
+    label: TEXT_KEYS.singleline_map_page_title,
+    key: '/single-line-map',
+    searchParamsRequired: true,
+  },
+  {
+    label: TEXT_KEYS.about_title,
+    key: '/about',
+  },
+  {
+    label: TEXT_KEYS.report_a_bug_title,
+    key: 'https://github.com/hasadna/open-bus-map-search/issues',
+  },
+  {
+    label: TEXT_KEYS.donate_title,
+    key: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal',
+  },
+]
+
+
 const theme = createTheme(
   {
     direction: 'rtl',
@@ -109,17 +155,25 @@ const App = () => {
           <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
             <ConfigProvider direction="rtl" locale={heIL}>
               <StyledLayout className="main">
-                <LayoutContext>
-                  <SideBar />
-                  <Layout>
-                    <MainHeader />
-                    <StyledContent>
-                      <StyledBody>
-                        <RoutesList />
-                      </StyledBody>
-                    </StyledContent>
-                  </Layout>
-                </LayoutContext>
+                <SideBar pages={PAGES} />
+                <Layout>
+                  <StyledContent>
+                    <StyledBody>
+                      <Routes>
+                        <Route path={PAGES[0].key} element={<DashboardPage />} />
+                        <Route path={PAGES[1].key} element={<TimelinePage />} />
+                        <Route path={PAGES[2].key} element={<GapsPage />} />
+                        <Route path={PAGES[3].key} element={<GapsPatternsPage />} />
+                        <Route path={PAGES[4].key} element={<RealtimeMapPage />} />
+                        <Route path={PAGES[5].key} element={<SingleLineMapPage />} />
+                        <Route path={PAGES[6].key} element={<About />} />
+                        <Route path={'/profile'} element={<Profile />} />
+                        {/* <Route path={PAGES[7].key} element={<Profile />} /> */}
+                        <Route path="*" element={<RedirectToDashboard />} />
+                      </Routes>
+                    </StyledBody>
+                  </StyledContent>
+                </Layout>
               </StyledLayout>
             </ConfigProvider>
           </LocalizationProvider>

src/pages/Profile.tsx

@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+import React from 'react'
+import { TEXT_KEYS } from 'src/resources/texts'
+import SlackIcon from '../resources/slack-icon.svg'
+import { useTranslation } from 'react-i18next'
+import GapsPage from './GapsPage'
+import SingleLineMapPage from './SingleLineMapPage'
+
+const Profile = () => {
+    return  (
+        <GeneralDetailsAboutLine />
+    )
+}
+
+const GeneralDetailsAboutLine = () => {
+    const { t } = useTranslation()
+
+    return (
+      <>
+      <ParagraphStyle>
+        <h2>קו מספר: </h2>
+        <h3>מפעיל: </h3>
+      </ParagraphStyle>
+      </>
+    )
+  }
+
+const ParagraphStyle = styled.div`
+  & h2 {
+    font-size: 1.5em;
+  }
+  & p {
+    font-size: 1.15em;
+  }
+
+  & ul {
+    list-style: none;
+    padding: 0;
+  }
+  & img {
+    width: 5%;
+  }
+`
+
+
+export default Profile

src/resources/texts.tsx

@@ -74,6 +74,8 @@ export const TEXT_KEYS = {
   migdal_company: 'migdal_company',
   and_smaller_donors: 'and_smaller_donors',
   gaps_patterns_page_title: 'gaps_patterns_page_title',
+  profile_page: 'profile_page',
+  profile_page_line: 'profile_page_line',
 }
 
 export const TEXTS = {
@@ -179,6 +181,8 @@ export const TEXTS = {
   show_document: 'הצג מידע לגיקים',
   bearing: 'מעלות',
   kmh: 'קמ״ש',
+  profile_page: 'דף פרופיל',
+  profile_page_line: 'דף פרופיל על קו',
 }
 
 export const formatted = (text: string, value: string) => text.replace(PLACEHOLDER, value)