Lighthouse/src/Navbar.jsx

import React from 'react'
import { Menu, MenuItem, MenuDivider } from "@blueprintjs/core";
import { Popover, PopoverInteractionKind, Position } from '@blueprintjs/core';

const userMenu = 
    <Menu>
        <MenuItem iconName="user" text="Profile" />
        <MenuItem text="Settings..." iconName="cog" />
        <MenuDivider />
        <MenuItem text="Log out" iconName="power" />
    </Menu>

const Navbar = () => 
    <div>
        <nav className="pt-navbar pt-dark">
            <div className="pt-navbar-group pt-align-left">
                <div className="pt-navbar-heading">Lighthouse</div>
                <button className="pt-button pt-minimal pt-icon-home">Home</button>
                <button className="pt-button pt-minimal pt-icon-document">Files</button>
            </div>
            <div className="pt-navbar-group pt-align-right">
                <input className="pt-input" placeholder="Search files..." type="text" />
                <span className="pt-navbar-divider"></span>
                <Popover content={<div>No notifications</div>} 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} position={Position.BOTTOM_RIGHT}
                        interactionKind={PopoverInteractionKind.CLICK}>
                    <button className="pt-button pt-minimal pt-icon-user"></button>
                </Popover>
            </div>
        </nav>
    </div>

export default Navbar