Bootstrap icons added to navigation

This commit is contained in:
Camerin 2021-09-17 18:43:19 -04:00
parent a910d63127
commit 644795c253
2 changed files with 9 additions and 2 deletions

View File

@ -1,21 +1,26 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import './css/Navigation.css'; import './css/Navigation.css';
import { HouseDoor, FileEarmarkPerson, Github, Youtube } from 'react-bootstrap-icons';
const Navigation = (props) => { const Navigation = (props) => {
return ( return (
<div className="Navigation"> <div className="Navigation">
<Link to="/"> <Link to="/">
Home Home
<HouseDoor />
</Link> </Link>
<Link to="/about"> <Link to="/about">
About Me About Me
<FileEarmarkPerson />
</Link> </Link>
<Link to="/github"> <Link to="/github">
Github Repos Github Repos
<Github />
</Link> </Link>
<Link to="/youtube"> <Link to="/youtube">
Youtube Videos Youtube Videos
<Youtube />
</Link> </Link>
</div> </div>
); );

View File

@ -12,10 +12,12 @@
.Navigation a { .Navigation a {
color: #CFC0C0 !important; color: #CFC0C0 !important;
padding:10px; padding:10px;
display: flex;
flex-direction: column;
align-items:center;
justify-content: space-around
} }
.Navigation a:hover { .Navigation a:hover {
border-bottom-style: solid;
border-color: black;
background-color: #2F2F32; background-color: #2F2F32;
} }