Merge pull request #233 from hackforla/225_sidebar

#225 Implement Sliding Menu/Sidebar

package.json

@@ -17,11 +17,11 @@
     "leaflet": "^1.5.1",
     "proptypes": "^1.1.0",
     "react": "^16.8.6",
+    "react-burger-menu": "^2.6.13",
     "react-dom": "^16.8.6",
     "react-leaflet": "^2.4.0",
     "react-leaflet-choropleth": "^2.0.0",
     "react-redux": "^7.1.3",
-    "react-sidebar": "^3.0.2",
     "react-test-renderer": "^16.12.0",
     "react-vis": "^1.11.7",
     "redux": "^4.0.4",

src/components/common/Button.jsx

@@ -23,6 +23,7 @@ const Button = ({
   loading,
   isStatic,
   disabled,
+  style,
 }) => {
   // Dynamically generates button className from props to comply with Bulma styling modifiers.
   const buttonClassName = classNames('button', {
@@ -50,6 +51,7 @@ const Button = ({
       onClick={handleClick}
       disabled={disabled}
       className={buttonClassName}
+      style={style}
     >
       {label}
     </button>
@@ -75,6 +77,7 @@ Button.propTypes = {
   loading: PropTypes.bool,
   isStatic: PropTypes.bool,
   disabled: PropTypes.bool,
+  style: PropTypes.shape({}),
 };
 
 Button.defaultProps = {
@@ -93,4 +96,5 @@ Button.defaultProps = {
   loading: false,
   isStatic: false,
   disabled: false,
+  style: undefined,
 };

src/components/main/body/Body.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import Menu from './Menu';
+import Menu from '../menu/Menu';
 import PinMap from '../../PinMap/PinMap';
 
 const Body = () => (
-  <div className="body">
+  <div id="body-container" className="body">
     <Menu />
     <PinMap />
   </div>

src/components/main/footer/Footer.jsx

@@ -8,7 +8,7 @@ const footerTextStyle = {
 };
 
 const Footer = () => (
-  <nav
+  <footer
     className="navbar has-navbar-fixed-bottom"
     style={{
       position: 'fixed',
@@ -24,7 +24,7 @@ const Footer = () => (
         </p>
       </div>
     </div>
-  </nav>
+  </footer>
 );
 
 export default Footer;

src/components/main/header/Header.jsx

@@ -17,10 +17,8 @@ const Header = () => {
     fontWeight: 'bold',
   };
 
-  // const quickviews = bulmaQuickview.attach();
-
   return (
-    <nav
+    <header
       className="navbar"
       role="navigation"
       aria-label="main navigation"
@@ -56,7 +54,7 @@ const Header = () => {
           </div>
         </div>
       </div>
-    </nav>
+    </header>
   );
 };
 

src/components/main/menu/Menu.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { slide as Sidebar } from 'react-burger-menu';
+import Button from '../../common/Button';
+
+// const buildDataUrl = () => {
+//   return `https://data.lacity.org/resource/${dataResources[year]}.json?$select=location,zipcode,address,requesttype,status,ncname,streetname,housenumber&$where=date_extract_m(CreatedDate)+between+${startMonth}+and+${endMonth}+and+requesttype='${request}'`;
+// };
+
+const Menu = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [activeTab, setActiveTab] = useState('Map');
+  const sidebarWidth = '509px';
+
+  const tabs = [
+    'Map',
+    'Data Visualization',
+  ];
+
+  const handleActiveTab = (tab) => (tab === activeTab ? 'is-active' : '');
+  const handleTabClick = (tab) => {
+    setActiveTab(tab);
+  };
+
+  return (
+    <div>
+      <Sidebar
+        htmlClassName="sidebar-html"
+        bodyClassName="sidebar-body"
+        pageWrapId="sidebar-wrapper"
+        outerContainerId="body-container"
+        noOverlay
+        isOpen={isOpen}
+        width={sidebarWidth}
+        customBurgerIcon={false}
+        customCrossIcon={false}
+        styles={{
+          bmMenu: {
+            background: 'white',
+            boxShadow: '0 4px 5px grey',
+          },
+        }}
+      >
+        <div id="sidebar-wrapper">
+          <Button
+            id="menu-toggle-button"
+            label="<"
+            style={{
+              position: 'fixed',
+              left: sidebarWidth,
+              height: '60px',
+              width: '26px',
+              boxShadow: '0 1px 2px grey',
+            }}
+            handleClick={() => setIsOpen(!isOpen)}
+            color="light"
+          />
+          <div
+            className="tabs is-fullwidth is-toggle"
+            style={{
+              height: '40px',
+            }}
+          >
+            <ul>
+              {tabs.map((tab) => (
+                <li
+                  key={tab}
+                  className={handleActiveTab(tab)}
+                  style={{ width: '254px' }}
+                >
+                  <a onClick={() => { handleTabClick(tab); }}>
+                    {tab}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </Sidebar>
+    </div>
+  );
+};
+
+// const mapStateToProps = state => ({});
+
+export default Menu;