import React from "react" import { Navbar, Nav } from "react-bootstrap" import styled from "styled-components" import scrollTo from 'gatsby-plugin-smoothscroll' const NavbarContainer = styled.div` font-family: "Rubik", sans-serif; ` const SiteNavbar = () => { return ( <NavbarContainer> <Navbar expand="lg" style={{ backgroundColor: "#14213D" }} variant="dark" fixed="top" > <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="ml-auto"> <Nav.Link active onClick={() => scrollTo("#home")}> Home </Nav.Link> <Nav.Link active onClick={() => scrollTo("#aboutus")}> About Us </Nav.Link> <Nav.Link active onClick={() => scrollTo("#contributors")}> Contributors </Nav.Link> <Nav.Link active onClick={() => scrollTo("#joinus")}> Join Us </Nav.Link> <Nav.Link active onClick={() => scrollTo("#footer")}> Contact </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> </NavbarContainer> ) } export default SiteNavbar