Add logo to navbar

This commit is contained in:
Daniel Mason 2021-03-28 22:53:14 +13:00
parent 84cb4e8978
commit c83c086cdd
2 changed files with 11 additions and 1 deletions

View File

@ -12,4 +12,10 @@
margin-left: 15px; margin-left: 15px;
padding-left: 15px; padding-left: 15px;
border-left: 1px solid #282c34; border-left: 1px solid #282c34;
}
.nav-logo {
height: 50px;
margin: -15px 5px -15px -5px;
} }

View File

@ -1,6 +1,7 @@
import { React, Component } from 'react'; import { React, Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap'; import { Navbar, NavbarBrand } from 'reactstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import logo from '../logo.png';
import './Navigation.css'; import './Navigation.css';
const menuItems = [ const menuItems = [
@ -43,10 +44,13 @@ class Navigation extends Component {
} }
} }
return ( return (
<div> <div>
<Navbar color="dark" dark fixed="top"> <Navbar color="dark" dark fixed="top">
<NavbarBrand href="/" className="mr-auto">GoScrobble</NavbarBrand> <NavbarBrand href="/" className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
{menuItems.map(menuItem => {menuItems.map(menuItem =>
<Link <Link
key={menuItem} key={menuItem}