feat(navbar): Improvement in button and navbar

Closes #16946

feat(navbar): Added missing propType

Closes #16946

feat(navbar): Updated as of required code format

Closes #16946

common/app/Nav/LargeNav.jsx

@@ -13,13 +13,13 @@ function LargeNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
       render={
         () => (
           <Row>
-            <Col className='nav-component' sm={ 4 } xs={ 6 }>
+            <Col className='nav-component' sm={ 5 } xs={ 6 }>
               <Navbar.Header>
                 <NavLogo clickOnLogo={ clickOnLogo } />
                 <FCCSearchBar />
               </Navbar.Header>
             </Col>
-            <Col className='nav-component bins' sm={ 4 } xs={ 6 }>
+            <Col className='nav-component bins' sm={ 3 } xs={ 6 }>
               <BinButtons panes={ panes } />
             </Col>
             <Col className='nav-component nav-links' sm={ 4 } xs={ 0 }>

common/app/Nav/Nav.jsx

@@ -11,17 +11,19 @@ import {
   clickOnLogo,
   clickOnMap
 } from './redux';
-import { panesSelector } from '../Panes/redux';
+import { panesSelector, panesByNameSelector } from '../Panes/redux';
 import propTypes from './navPropTypes';
 
 const mapStateToProps = createSelector(
   panesSelector,
-  panes => {
+  panesByNameSelector,
+  (panes, panesByName) => {
     return {
       panes: panes.map(({ name, type }) => {
         return {
           content: name,
-          action: type
+          action: type,
+          isHidden: panesByName[name].isHidden
         };
       }, {}),
       shouldShowMapButton: panes.length === 0

common/app/Nav/components/Bin-Button.jsx

@@ -4,13 +4,14 @@ import { Button } from 'react-bootstrap';
 
 const propTypes = {
   content: PropTypes.string,
+  disabled: PropTypes.bool,
   handleClick: PropTypes.func.isRequired
 };
 
-export default function BinButton({ content, handleClick }) {
+export default function BinButton({ content, handleClick, disabled }) {
   return (
     <Button
-      bsStyle='primary'
+      className={ disabled ? 'disabled-button' : 'enabled-button' }
       onClick={ handleClick }
       >
       { content }

common/app/Nav/components/BinButtons.jsx

@@ -16,9 +16,10 @@ function BinButtons({ panes }) {
   return (
     <ButtonGroup>
       {
-        panes.map(({ content, actionCreator }) => (
+        panes.map(({ content, actionCreator, isHidden }) => (
           <BinButton
             content={ content }
+            disabled={ isHidden }
             handleClick={ actionCreator }
             key={ content }
           />

common/app/Nav/nav.less

@@ -245,7 +245,7 @@ li.nav-avatar {
 
 
   &.nav-links {
-    justify-content: end;
+    justify-content: flex-end;
   }
 
   .fcc_searchBar {
@@ -304,6 +304,13 @@ li.nav-avatar {
 
 .bins {
 
+  .disabled-button {
+    color: whitesmoke; 
+  }
+  .enabled-button {
+    color: black;
+  }
+
   .btn {
     border-color: @brand-primary;
     background-color: white;