Merge pull request #111 from scientist-softserv/110-header-component-restructure

Update header to be responsive

Author: summer-cook

src/compounds/Header/Header.jsx

@@ -1,29 +1,33 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import NavLink from '../NavLink/NavLink'
+import { Container, Nav, Navbar } from 'react-bootstrap'
 import Logo from '../Logo/Logo'
-import './header.css'
 
 // may come back to hard code these
 
 const Header = ({ browseLink, logInLink, logo, logOutLink, requestsLink, user }) => {
   const { src, alt } = logo
 
   return (
-    <header className='header-container'>
-      <div className='webstore-container container'>
-        <Logo src={src} alt={alt} />
-        <div>
-          <NavLink href={browseLink} label='Browse' />
-          <NavLink href={requestsLink} label='Requests' />
-          {user ? (
-            <NavLink href={logOutLink} label='Log Out' />
-          ) : (
-            <NavLink href={logInLink} label='Log In' />
-          )}
-        </div>
-      </div>
-    </header>
+    <Navbar bg='secondary' expand='lg'>
+      <Container>
+        <Navbar.Brand className='w-50'>
+          <Logo src={src} alt={alt} height={45} />
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls='basic-navbar-nav' />
+        <Navbar.Collapse id='basic-navbar-nav'>
+          <Nav className='ms-auto'>
+            <Nav.Link href={browseLink} className='link-dark'>Browse</Nav.Link>
+            <Nav.Link href={requestsLink} className='link-dark'>Requests</Nav.Link>
+            {user ? (
+              <Nav.Link href={logOutLink} className='link-dark'>Log Out</Nav.Link>
+            ) : (
+              <Nav.Link href={logInLink} className='link-dark'>Log In</Nav.Link>
+            )}
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
   )
 }
 

src/compounds/Header/header.css

@@ -2,25 +2,23 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Image from '../../components/Image/Image'
 
-const Logo = ({ alt, src, height }) => (
+const Logo = ({ addClass, alt, src, height }) => (
   <a href='/'>
-    <Image src={src} alt={alt} height={height} />
+    <Image src={src} alt={alt} height={height} addClass={addClass} />
   </a>
 )
 
 Logo.propTypes = {
+  addClass: PropTypes.string,
   alt: PropTypes.string,
   src: PropTypes.string.isRequired,
   height: PropTypes.number,
 }
 
 Logo.defaultProps = {
+  addClass: '',
   alt: '',
   height: 50,
 }
 
-Logo.defaultProps = {
-  alt: '',
-}
-
 export default Logo

src/compounds/Logo/Logo.jsx

@@ -15,7 +15,6 @@ import LinkGroup from './LinkGroup/LinkGroup'
 import LinkedButton from './LinkedButton/LinkedButton'
 import Logo from './Logo/Logo'
 import Messages from './Messages/Messages'
-import NavLink from './NavLink/NavLink'
 import RequestItem from './RequestItem/RequestItem'
 import RequestList from './RequestList/RequestList'
 import RequestStats from './RequestStats/RequestStats'
@@ -34,7 +33,6 @@ export {
   LinkedButton,
   Logo,
   Messages,
-  NavLink,
   RequestItem,
   RequestList,
   RequestStats,