import React from 'react'
import { Navbar, Nav } from 'react-bootstrap';

//import logo from '../../client/public/SmartGarden.svg';

export default function NavigationBar() {
    return (
        <Navbar collapseOnSelect expand="lg" bg="light" variant="light">
            <Navbar.Brand href="/">
                {/* NOT POSSIBLE IN METEOR, only from the DB ->  https://forums.meteor.com/t/importing-assets-image/30266/2
                    
                    <img
                    src={logo}
                    width="30"
                    height="30"
                    className="d-inline-block align-top"
                    rounded="true"
                    alt="SmartGarden"
                />{' '}  
                */}
                SmartGarden
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="mr-auto">
                <Nav.Link href="/overview">Overview</Nav.Link>
                <Nav.Link href="/about">About</Nav.Link>
                {
                    /*
                    <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                    </NavDropdown>*/
                }
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}