From d24f3ff1757c5473d042280f47fa4fc7701b4cc3 Mon Sep 17 00:00:00 2001
From: Lovepreet Singh <lovepreet.singh@nagarro.com>
Date: Mon, 9 Apr 2018 15:09:20 +0530
Subject: [PATCH] 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              | 4 ++--
 common/app/Nav/Nav.jsx                   | 8 +++++---
 common/app/Nav/components/Bin-Button.jsx | 5 +++--
 common/app/Nav/components/BinButtons.jsx | 3 ++-
 common/app/Nav/nav.less                  | 9 ++++++++-
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/common/app/Nav/LargeNav.jsx b/common/app/Nav/LargeNav.jsx
index ef305f9cfe..d0925bc37d 100644
--- a/common/app/Nav/LargeNav.jsx
+++ b/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 }>
diff --git a/common/app/Nav/Nav.jsx b/common/app/Nav/Nav.jsx
index 9fd70567ca..aaddb015fa 100644
--- a/common/app/Nav/Nav.jsx
+++ b/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
diff --git a/common/app/Nav/components/Bin-Button.jsx b/common/app/Nav/components/Bin-Button.jsx
index d0ec1f35f5..3be178145a 100644
--- a/common/app/Nav/components/Bin-Button.jsx
+++ b/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 }
diff --git a/common/app/Nav/components/BinButtons.jsx b/common/app/Nav/components/BinButtons.jsx
index f6d429f4e1..abdc702827 100644
--- a/common/app/Nav/components/BinButtons.jsx
+++ b/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 }
           />
diff --git a/common/app/Nav/nav.less b/common/app/Nav/nav.less
index 4933b99e39..6ce16737b2 100644
--- a/common/app/Nav/nav.less
+++ b/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;