Merge pull request #375 from hackforla/374-FRONT-MenuLayoutAndStyling

styling and layout of sidebar menu

package.json

@@ -24,7 +24,6 @@
     "moment": "^2.24.0",
     "proptypes": "^1.1.0",
     "react": "^16.8.6",
-    "react-burger-menu": "^2.6.13",
     "react-datepicker": "^2.12.1",
     "react-dom": "^16.8.6",
     "react-leaflet": "^2.4.0",

src/components/main/menu/Menu.jsx

@@ -4,15 +4,15 @@
 import React from 'react';
 import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
-import { slide as Sidebar } from 'react-burger-menu';
+import clx from 'classnames';
 
 import {
   toggleMenu as reduxToggleMenu,
   setMenuTab as reduxSetMenuTab,
 } from '@reducers/ui';
-import { MENU_TABS } from '@components/common/CONSTANTS';
 
-import Button from '../../common/Button';
+import { MENU_TABS } from '@components/common/CONSTANTS';
+import Button from '@components/common/Button';
 import Submit from './Submit';
 import DateSelector from './DateSelector/DateSelector';
 import NCSelector from './NCSelector';
@@ -24,99 +24,40 @@ const Menu = ({
   toggleMenu,
   setMenuTab,
 }) => {
-  const sidebarWidth = '509px';
-
   const tabs = [
     MENU_TABS.MAP,
     MENU_TABS.VISUALIZATIONS,
   ];
 
-  const handleActiveTab = tab => (tab === activeTab ? 'is-active' : '');
-
   return (
-    <div>
-      <Sidebar
-        noOverlay
-        disableAutoFocus
-        pageWrapId="sidebar-wrapper"
-        outerContainerId="body-container"
-        isOpen={isOpen}
-        width={sidebarWidth}
-        customBurgerIcon={false}
-        customCrossIcon={false}
-        styles={{
-          bmMenu: {
-            background: 'white',
-            boxShadow: '0px 4px 5px rgba(108, 108, 108, 0.3)',
-          },
-        }}
-      >
-        <div
-          id="sidebar-wrapper"
-          className="sidebar-content"
-          // TODO: Fix this for better handling of height
-          style={{
-            height: '85vh',
-            overflowY: 'scroll',
-          }}
-        >
-
-          {/* Tabs */}
-          <div
-            className="tabs is-fullwidth is-toggle"
-            style={{
-              height: '40px',
-              margin: '0',
-            }}
+    <div className={clx('menu-container', { open: isOpen })}>
+      <div className="menu-tabs">
+        {tabs.map(tab => (
+          <a
+            key={tab}
+            className={clx('menu-tab', { active: tab === activeTab })}
+            onClick={() => setMenuTab(tab)}
           >
-            <ul>
-              {tabs.map(tab => (
-                <li
-                  key={tab}
-                  className={handleActiveTab(tab)}
-                  style={{ width: '254px' }}
-                >
-                  <a onClick={() => { setMenuTab(tab); }}>
-                    {tab}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
+            { tab }
+          </a>
+        ))}
+      </div>
 
-          {/* Open/Close Button */}
-          <Button
-            id="menu-toggle-button"
-            icon={!isOpen ? 'chevron-right' : 'chevron-left'}
-            iconStyle={{ margin: '0px' }}
-            style={{
-              position: 'fixed',
-              left: sidebarWidth,
-              height: '60px',
-              width: '26px',
-              boxShadow: '0 1px 2px rgba(0, 0, 0, 0.5)',
-              borderRadius: '0',
-            }}
-            handleClick={() => toggleMenu()}
-            color="light"
-          />
+      <Button
+        id="menu-toggle-button"
+        icon={!isOpen ? 'chevron-right' : 'chevron-left'}
+        iconStyle={{ margin: '0px' }}
+        handleClick={() => toggleMenu()}
+        color="light"
+      />
 
-          {/* Content */}
-          <div className="sidebar-content" style={{ padding: '16px' }}>
-            <div className="sidebar-title">
-              <p className="subtitle">
-                <strong>
-                  Filters
-                </strong>
-              </p>
-            </div>
-            <DateSelector />
-            <NCSelector />
-            <RequestTypeSelector />
-            <Submit />
-          </div>
-        </div>
-      </Sidebar>
+      <div className="menu-content">
+        <h1>Filters</h1>
+        <DateSelector />
+        <NCSelector />
+        <RequestTypeSelector />
+        <Submit />
+      </div>
     </div>
   );
 };

src/styles/_base.scss

@@ -1,4 +1,10 @@
 
+// layout vars
+$header-height: 60px;
+$footer-height: 52px;
+$menu-width: 509px;
+$menu-transition: all 0.5s ease 0s;
+
 h1 {
   font-family: $brand-heading-family;
   color: $brand-heading-color;

src/styles/main/_menu.scss

@@ -0,0 +1,62 @@
+.menu-container {
+  $tabs-height: 40px;
+
+  position: fixed;
+  left: 0;
+  top: $header-height;
+  bottom: $footer-height;
+  width: $menu-width;
+  z-index: 1100;
+  background: $brand-bg-color;
+  box-shadow: 0px 4px 5px rgba(108, 108, 108, 0.3);
+  transition: $menu-transition;
+  &:not(.open) {
+    transform: translateX(-100%);
+  }
+
+  .menu-tabs {
+    .menu-tab {
+      width: 50%;
+      display: inline-block;
+      line-height: $tabs-height;
+      text-align: center;
+      background-color: #EEEEEE;
+      font-size: 18px;
+      color: #777777;
+      cursor: default;
+      &.active {
+        background-color: $brand-cta1-color;
+        font-weight: bold;
+        color: $brand-main-color;
+      }
+      &:not(.active) {
+        cursor: pointer;
+      }
+    }
+  }
+
+  #btn-menu-toggle-button {
+    position: fixed;
+    left: $menu-width;
+    height: 60px;
+    width: 26px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    border-radius: 0;
+  }
+
+  .menu-content {
+    padding: 16px;
+    overflow: scroll;
+    height: calc(100% - #{$tabs-height});
+    h1 {
+      margin-bottom: 8px;
+    }
+    #btn-sidebar-submit-button {
+      background-color: $brand-cta1-color;
+      color: $brand-text-color;
+      font-weight: 'bold';
+      font-size: $brand-heading-size;
+      font-family: $brand-heading-family;
+    }
+  }
+}

src/styles/main/_visualizations.scss

@@ -1,9 +1,5 @@
 .visualizations {
 
-  // these two values are coordinated with the sidebar menu
-  $menu-width: 509px;
-  $menu-transition: left 0.5s ease 0s;
-
   $content-max-width: 840px;
 
   z-index: 1000;

src/styles/styles.scss

@@ -4,6 +4,7 @@
 @import './bulma';
 @import './base';
 
+@import './main/menu';
 @import './main/datepicker';
 @import './main/tooltip';
 @import './main/visualizations';