feat: new design of sidebar

hasadna · Oct 20, 2023 · 9e80a7a · 9e80a7a
1 parent ac00614
commit 9e80a7a
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 21 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -9,11 +9,38 @@
     > .sidebar {
         height: 100vh;
         background-color: white;
-        padding: 30px;
-        text-align: center;
+        padding: 10px;
+       /* text-align: center;*/
 
-        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,17 @@ 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'
 const { Content } = Layout
 
 const StyledLayout = styled(Layout)`
@@ -48,41 +58,50 @@ const PAGES = [
   {
     label: TEXTS.dashboard_page_title,
     key: '/dashboard',
+    icon: LaptopOutlined,
   },
   {
     label: TEXTS.timeline_page_title,
     key: '/timeline',
     searchParamsRequired: true,
+    icon: FieldTimeOutlined,
   },
   {
     label: TEXTS.gaps_page_title,
     key: '/gaps',
     searchParamsRequired: true,
+    icon: BarChartOutlined,
   },
   {
     label: TEXTS.gaps_patterns_page_title,
     key: '/gaps_patterns',
+    icon: LineChartOutlined,
   },
   {
     label: TEXTS.realtime_map_page_title,
     key: '/map',
+    icon: HeatMapOutlined,
   },
   {
     label: TEXTS.singleline_map_page_title,
     key: '/single-line-map',
     searchParamsRequired: true,
+    icon: RadarChartOutlined,
   },
   {
     label: TEXTS.about_title,
     key: '/about',
+    icon: BellOutlined,
   },
   {
     label: TEXTS.report_a_bug_title,
     key: 'https://github.com/hasadna/open-bus-map-search/issues',
+    icon: BugOutlined,
   },
   {
     label: TEXTS.donate_title,
     key: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal',
+    icon: DollarOutlined,
   },
 ]
 

diff --git a/src/pages/components/header/SideBar.tsx b/src/pages/components/header/SideBar.tsx
@@ -1,19 +1,22 @@
 import React, { useState } from 'react'
 import Menu, { MenuPage } from './menu/Menu'
+import { MenuOutlined } from '@ant-design/icons'
 import cn from 'classnames'
-
+const SidebarToggle = ({open, setOpen}: {open: boolean, setOpen: (open: boolean) => void}) => (
+  <div className="sideber-menu" onClick={() => setOpen(!open)}>
+    <MenuOutlined />
+  </div>
+)
 export default function SideBar({ pages }: { pages: MenuPage[] }) {
   const [open, setOpen] = useState(false)
 
   return (
+
     <aside className={cn('sidebar', { open })}>
-      <div className="sideber-menu" onClick={() => setOpen(!open)}>
-        <div className="sideber-menu-line" />
-        <div className="sideber-menu-line" />
-        <div className="sideber-menu-line" />
-      </div>
-      <h1>דאטאבוס</h1>
+      <h1 className={'sidebar-logo'}>דאטאבוס</h1>
+      <SidebarToggle open={open} setOpen={setOpen}/>
       <Menu pages={pages} />
     </aside>
+
   )
 }
diff --git a/src/pages/components/header/menu/Menu.tsx b/src/pages/components/header/menu/Menu.tsx
@@ -5,7 +5,8 @@ import './menu.scss'
 
 export type MenuPage = {
   label: string
-  key: string
+  key: string,
+  icon: string
 }
 
 function Menu({ pages }: { pages: MenuPage[] }) {
@@ -22,6 +23,10 @@ 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'
+          }}/>}
           {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;
         }
     }
@@ -37,7 +39,14 @@
         max-width: 0;
         padding: 0;
         transition: all 0.2s ease-in-out;
-
+        .sidebar-logo {
+            margin-top: 10px;
+            position: absolute;
+            top: 0;
+            left: 10px;
+            width: 95px;
+            font-size: 24px;
+        }
         .sideber-menu {
             display: block;
             position: absolute;
@@ -61,8 +70,14 @@
         position: absolute;
         z-index: 500;
         max-width: 100%;
-        padding: 30px;
+        padding: 10px;
         margin-right: 1px;
+        >.menu{
+            margin-top: 30px;
+        }
+        >.sidebar-logo {
+            display: none;
+        }
     }
 
 }
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;