angrybeanie-front-end/components/navbar.js
James Purser 25e70c36d4 Added Tech and Disability section to navigation and page
Refactored News to use the getAllPosts method in data/external/cms
2022-06-14 20:58:06 +10:00

32 lines
No EOL
1 KiB
JavaScript
Executable file

import React, { useState } from 'react';
import Link from 'next/link';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavLink from 'react-bootstrap/NavLink';
import NavItem from 'react-bootstrap/NavItem';
import NavDropdown from 'react-bootstrap/NavDropdown';
const NavBar = (props, sections) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(prevState => !prevState);
return (
<Navbar expand="lg" collapseOnSelect bg="light" variant="light">
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse>
<Nav className="m-auto">
<NavLink href="/">Home</NavLink>
</Nav>
<NavItem className="m-auto">
<NavLink href="/news">News and such</NavLink>
</NavItem>
<NavItem className="m-auto">
<NavLink href="/tech-and-disability">Tech and Disability</NavLink>
</NavItem>
</Navbar.Collapse>
</Navbar>
);
}
export default NavBar