feat: improve sidebar & logo design (#137)

* feat: new design of sidebar * fix: solve types problem
hasadna · Oct 29, 2023 · 22df36e · 22df36e
1 parent 15e07cf
commit 22df36e
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 16 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -9,11 +9,37 @@
     > .sidebar {
         height: 100vh;
         background-color: white;
-        padding: 30px;
-        text-align: center;
+        padding: 10px;
 
-        h1 {
+       .sidebar-logo {
+            position: relative;
+            margin: 20px 50px 26px 0;
+            width: 119px;
             font-size: 30px;
+            border-top: 6px solid gray;
+            border-bottom: 8px solid gray;
+            padding-bottom: 0;
+            line-height: 25px;
         }
+        .sidebar-logo::before {
+            height: 10px;
+            width: 10px;
+            border-radius: 5px;
+            position: absolute;
+            background: gray;
+            top: 28px;
+            right: 24px;
+            content: ' ' 
+        }
+        .sidebar-logo::after {
+            height: 10px;
+            width: 10px;
+            border-radius: 5px;
+            position: absolute;
+            background: gray;
+            top: 28px;
+            left: 17px;
+            content: ' ' 
+        }        
     }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -28,7 +28,18 @@ 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 {
+  RadarChartOutlined,
+  BellOutlined,
+  DollarOutlined,
+  HeatMapOutlined,
+  LaptopOutlined,
+  FieldTimeOutlined,
+  BugOutlined,
+  BarChartOutlined,
+  LineChartOutlined,
+} from '@ant-design/icons'
+import { MenuPage } from './pages/components/header/menu/Menu'
 const { Content } = Layout
 
 const StyledLayout = styled(Layout)`
@@ -48,43 +59,52 @@ const PAGES = [
   {
     label: TEXT_KEYS.dashboard_page_title,
     key: '/dashboard',
+    icon: LaptopOutlined,
   },
   {
     label: TEXT_KEYS.timeline_page_title,
     key: '/timeline',
     searchParamsRequired: true,
+    icon: FieldTimeOutlined,
   },
   {
     label: TEXT_KEYS.gaps_page_title,
     key: '/gaps',
     searchParamsRequired: true,
+    icon: BarChartOutlined,
   },
   {
     label: TEXT_KEYS.gaps_patterns_page_title,
     key: '/gaps_patterns',
+    icon: LineChartOutlined,
   },
   {
     label: TEXT_KEYS.realtime_map_page_title,
     key: '/map',
+    icon: HeatMapOutlined,
   },
   {
     label: TEXT_KEYS.singleline_map_page_title,
     key: '/single-line-map',
     searchParamsRequired: true,
+    icon: RadarChartOutlined,
   },
   {
     label: TEXT_KEYS.about_title,
     key: '/about',
+    icon: BellOutlined,
   },
   {
     label: TEXT_KEYS.report_a_bug_title,
     key: 'https://github.com/hasadna/open-bus-map-search/issues',
+    icon: BugOutlined,
   },
   {
     label: TEXT_KEYS.donate_title,
     key: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal',
+    icon: DollarOutlined,
   },
-]
+] as MenuPage[]
 
 const theme = createTheme(
   {

diff --git a/src/locale/he.json b/src/locale/he.json
@@ -3,7 +3,6 @@
   "timeline_page_title": "לוח זמנים היסטורי",
   "realtime_map_page_title": "מפה בזמן אמת",
   "gaps_page_title": "נסיעות שלא יצאו",
-  "gaps_patterns_page_title": "דפוסי נסיעות שלא יצאו",
   "singleline_map_page_title": "מפה לפי קו",
   "choose_datetime": "תאריך ושעה",
   "choose_date": "תאריך",

diff --git a/src/pages/components/header/menu/Menu.tsx b/src/pages/components/header/menu/Menu.tsx
@@ -3,10 +3,13 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import cn from 'classnames'
 import './menu.scss'
 import { useTranslation } from 'react-i18next'
+import { IconBaseProps } from '@ant-design/icons/lib/components/Icon'
 
 export type MenuPage = {
   label: string
   key: string
+  searchParamsRequired?: boolean
+  icon: string | React.FunctionComponent<IconBaseProps>
 }
 
 function Menu({ pages }: { pages: MenuPage[] }) {
@@ -32,6 +35,14 @@ function Menu({ pages }: { pages: MenuPage[] }) {
           onClick={() =>
             page.key[0] === '/' ? navigate(page.key) : window.open(page.key, '_blank')
           }>
+          {React.createElement(page.icon)}
+          {
+            <span
+              style={{
+                width: '15px',
+              }}
+            />
+          }
           {t(page.label)}
         </li>
       ))}

diff --git a/src/pages/components/header/menu/menu.scss b/src/pages/components/header/menu/menu.scss
@@ -5,14 +5,15 @@
     list-style: none;
     padding: 0;
     .menu-item {
+        display: flex;
+        align-items: center;
         width: 240px;
-        padding: 10px;
+        padding: 12px 23px;
         font-size: 16px;
         cursor: pointer;
-        border: 1px solid $gray-5;
-        border-radius: 5px;
-        margin-bottom: 20px;
-        line-height: initial;
+        border-radius: 9px;
+        margin-bottom: 4px;
+        line-height: 21px;
         box-sizing: border-box;
         transition: all 0.2s ease-in-out;
 
@@ -21,7 +22,8 @@
         }
         &.active {
             background-color: $color-active;
-            color: white;
+
+            color: #1677ff;
             border: none;
         }
     }

diff --git a/src/pages/components/header/sidebar/SideBar.tsx b/src/pages/components/header/sidebar/SideBar.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import Menu, { MenuPage } from '../menu/Menu'
-import cn from 'classnames'
-import './sidebar.scss'
 import { MenuOutlined } from '@ant-design/icons'
+import './sidebar.scss'
+import cn from 'classnames'
 
 const SidebarToggle = ({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) => (
   <div className="sidebar-menu-toggle" onClick={() => setOpen(!open)}>

diff --git a/src/pages/components/header/sidebar/sidebar.scss b/src/pages/components/header/sidebar/sidebar.scss
@@ -10,7 +10,9 @@
         max-width: 0;
         padding: 0;
         transition: all 0.2s ease-in-out;
-
+        .sidebar-logo {
+            display: none;
+        }
         .sidebar-menu-toggle {
             display: block;
             position: absolute;
@@ -23,6 +25,9 @@
     }
 
     .main > .sidebar.open{
+        .sidebar-logo {
+            display: block;
+        }
         display: block;
         position: absolute;
         z-index: 500;

diff --git a/src/resources/variables.scss b/src/resources/variables.scss
@@ -1,6 +1,6 @@
 // define variables:
 $gray-5: rgba(224, 224, 224);
-$color-active: rgba(95, 91, 255);
+$color-active: #e6f4ff;
 
 $mobile-max-width: 768px;