Lighthouse/src/Header/Topbar.jsx

import React from 'react'
import { connect } from 'react-redux'
import { Popover, PopoverInteractionKind, Position } from '@blueprintjs/core'
import { Navbar, NavbarGroup, NavbarDivider, NavbarHeading } from './Navbar'
import NavLinkBP from './NavLinkBP'
import UserMenu from './UserMenu'
import { LOGOUT } from '../Store/Actions'
import Notifications from './Notifications'

const TopbarTemplate = ({ logout }) =>
    <div>
        <Navbar dark>
            <NavbarGroup align="left">
                <NavbarHeading>Lighthouse</NavbarHeading>
                <NavLinkBP path="/" label="Home" icon="home" exact/>
                <NavLinkBP path="/projects" label="Projects" icon="document"/>
            </NavbarGroup>
            <NavbarGroup align="right">
                <input className="pt-input" placeholder="Search files..." type="text" />
                <NavbarDivider />
                <Popover content={Notifications} position={Position.BOTTOM_RIGHT}
                        popoverClassName="pt-popover-content-sizing"
                        interactionKind={PopoverInteractionKind.HOVER}>
                    <button className="pt-button pt-minimal pt-icon-notifications"></button>
                </Popover>
                <Popover content={UserMenu({logout})} position={Position.BOTTOM_RIGHT}
                        interactionKind={PopoverInteractionKind.CLICK}>
                    <button className="pt-button pt-minimal pt-icon-user"></button>
                </Popover>
            </NavbarGroup>
        </Navbar>
    </div>

const mapDispatchToProps = dispatch => ({ logout: () => { console.log('dispatching'); dispatch(LOGOUT()) } })
const Topbar = connect(null, mapDispatchToProps)(TopbarTemplate)

export default Topbar