Bootstrap icons added to navigation
This commit is contained in:
parent
a910d63127
commit
644795c253
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue