​

import React, { Component } from 'react';

import { BrowserRouter as Router } from 'react-router-dom';

​

import {

    MDBNavbar,

    MDBNavbarBrand,

    MDBNavbarNav,

    MDBNavItem,

    MDBNavLink,

    MDBIcon,

    MDBDropdown,

    MDBDropdownToggle,

    MDBDropdownMenu,

    MDBDropdownItem,

    MDBBadge,

    MDBInput

} from 'mdbreact';

import { reactLocalStorage } from 'reactjs-localstorage';

import createHistory from 'history/createBrowserHistory';

import "./TopNavigation.css";

​

const history = createHistory();

​

class TopNavigation extends Component {

    constructor(props) {

        super(props);

        this.state = {

            collapse: false,

            organizationName : "",

        };

        this.onClick = this.onClick.bind(this);

        this.toggle = this.toggle.bind(this);

        this.handleToggleClickA = this.handleToggleClickA.bind(this);

        this.addHandler = this.addHandler.bind(this);

        this.state.organizationName = reactLocalStorage.get("OrganizationName");

        console.log("organizationName=====>>>>"+this.state.organizationName)

    }

​

    onClick() {

        this.setState({

            collapse: !this.state.collapse,

        });

    }

​

    toggle() {

        this.setState({

            dropdownOpen: !this.state.dropdownOpen

        });

    }

​

    handleToggleClickA() {

        this.props.onSideNavToggleClick();

    }

​

    addHandler = event => {

        event.preventDefault();

        console.log("addHandler=> ");

        reactLocalStorage.set("UserId", "");

        history.push('/');

        window.location.reload()

​

    }

​

    render() {

        const navStyle = {

            paddingLeft:

                this.props.toggle ? '16px' : "240px",

                // this.props.toggle ? '16px' : "",

            transition: 'padding-left .3s'

        };

        return (

            <Router>

                <MDBNavbar className="flexible-MDBNavbar" 

                light 

                expand="md" 

                scrolling 

                fixed="top" 

                style={{ zIndex: 2000 }}>

                    <div

                        onClick={this.handleToggleClickA}

                        key="sideNavToggleA"

                        style={{

                            lineHeight: "32px",

                            marginleft: "1em",

                            verticalAlign: "middle",

                            cursor: 'pointer'

                        }}

                    >

                        {/* <MDBIcon icon="bars" color="white" size="lg" /> */}

                    </div>

​

                    <MDBNavbarBrand href="/" style={navStyle}>

                        <strong>{this.props.routeName}</strong>

                    </MDBNavbarBrand>

                    <MDBNavbarNav expand="sm" right style={{ flexDirection: 'row' }}>

                                <span className="organization ml-2"

                                 >{this.state.organizationName}</span>

                        <MDBNavItem>

                            <MDBNavLink to="./ContactUs">

                                <MDBIcon icon="envelope" />

                                <span className="d-none d-md-inline ml-1">Contact</span>

                            </MDBNavLink>

                        </MDBNavItem>

                        <MDBDropdown>

                            <MDBDropdownToggle nav caret>

                                <MDBIcon icon="user" /> <span className="d-none d-md-inline">Profile</span>

                            </MDBDropdownToggle>

                            <MDBDropdownMenu right style={{ minWidth: '200px' }}>

                                <MDBDropdownItem onClick={this.addHandler}>

                                    Log Out

                                </MDBDropdownItem>

                                <MDBDropdownItem href="#!">

                                    My Account

                                </MDBDropdownItem>

                                <MDBDropdownItem href="./OrganizationProfile">

                                    My Organization

                                </MDBDropdownItem>

                            </MDBDropdownMenu>

                        </MDBDropdown>

                    </MDBNavbarNav>

                </MDBNavbar>

            </Router>

        );

    }

}

​

export default TopNavigation;

​