refactor: use ant icon for menu toggle

src/locale/en.json

@@ -3,6 +3,7 @@
   "timeline_page_title": "Historical timeline",
   "realtime_map_page_title": "Real time map",
   "gaps_page_title": "Trips that didn't take place",
+  "gaps_patterns_page_title": "patterns",
   "singleline_map_page_title": "Map by line",
   "choose_datetime": "Date and time",
   "choose_date": "Date",

src/locale/he.json

@@ -3,6 +3,7 @@
   "timeline_page_title": "לוח זמנים היסטורי",
   "realtime_map_page_title": "מפה בזמן אמת",
   "gaps_page_title": "נסיעות שלא יצאו",
+  "gaps_patterns_page_title": "דפוסי נסיעות שלא יצאו",
   "singleline_map_page_title": "מפה לפי קו",
   "choose_datetime": "תאריך ושעה",
   "choose_date": "תאריך",

src/pages/components/header/sidebar/SideBar.tsx

@@ -2,18 +2,22 @@ import React, { useState } from 'react'
 import Menu, { MenuPage } from '../menu/Menu'
 import cn from 'classnames'
 import './sidebar.scss'
+import { MenuOutlined } from '@ant-design/icons'
+
+const SidebarToggle = ({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) => (
+  <div className="sidebar-menu-toggle" onClick={() => setOpen(!open)}>
+    <MenuOutlined />
+  </div>
+)
+
+const Logo = () => <h1 className={'sidebar-logo'}>דאטאבוס</h1>
 
 export default function SideBar({ pages }: { pages: MenuPage[] }) {
   const [open, setOpen] = useState(false)
-
   return (
     <aside className={cn('sidebar', { open })}>
-      <div className="sidebar-menu-toggle" onClick={() => setOpen(!open)}>
-        <div className="sidebar-menu-toggle-line" />
-        <div className="sidebar-menu-toggle-line" />
-        <div className="sidebar-menu-toggle-line" />
-      </div>
-      <h1>דאטאבוס</h1>
+      <Logo />
+      <SidebarToggle open={open} setOpen={setOpen} />
       <Menu pages={pages} />
     </aside>
   )

src/pages/components/header/sidebar/sidebar.scss

@@ -19,13 +19,6 @@
             margin: 10px;
             cursor: pointer;
             font-size: 20px;
-
-            &-line {
-                width: 30px;
-                height: 3px;
-                background-color: black;
-                margin: 5px 0;
-            }
         }
     }