Update navbar and home comoponent

This commit is contained in:
LordMathis 2018-06-15 12:51:05 +02:00
parent 2a8b95e050
commit 53f30523d5
5 changed files with 89 additions and 11 deletions

View File

@ -9,14 +9,14 @@ export default class About extends Component {
render () {
if (this.props.isLoading) {
return (
<div className={contentStyle.contentWrapper}>
<div className={contentStyle.contentWrapper} id="about">
<Spinner/>
</div>
);
}
return (
<div className={contentStyle.contentWrapper}>
<div className={contentStyle.contentWrapper} id="about">
<Header header={"About"} />
<div className={contentStyle.content} dangerouslySetInnerHTML={{__html: this.props.about.body}}>
</div>

View File

@ -9,7 +9,7 @@ export default class Blog extends Component {
render() {
if (this.props.isLoading) {
return (
<div className={contentStyle.contentWrapper}>
<div className={contentStyle.contentWrapper} id="blog">
<Spinner/>
</div>
);
@ -27,7 +27,7 @@ export default class Blog extends Component {
)
return (
<div className={contentStyle.contentWrapper}>
<div className={contentStyle.contentWrapper} id="blog">
<Header header={"Blog"} />
<div className={contentStyle.content}>

View File

@ -40,9 +40,14 @@ export default class Home extends Component {
<div className={styles.menuLinks}>
<ul>
<li>
<Link to="/blog">
<a href="#about">
<i className="fa fa-search" aria-hidden="true" /> About
</a>
</li>
<li>
<a href="#blog">
<i className="fa fa-pencil-square-o" aria-hidden="true" /> Blog
</Link>
</a>
</li>
</ul>
</div>

View File

@ -6,11 +6,52 @@ import styles from './Navbar.scss';
export default class Navbar extends Component {
render () {
let key = 0;
const objKeys = Object.keys(config.social);
const socialLinks = objKeys.map((val) => {
const link = (
<a key={key} href={config.social[val]}>
<i className={`fa fa-${val}`} aria-hidden="true" />
<span className="sr-only">{val}</span>
</a>
);
key += 1;
return link;
});
socialLinks.push(
<a key={key} href={`mailto:${config.email}`}>
<i className="fa fa-envelope-o" aria-hidden="true" />
<span className="sr-only">e-mail</span>
</a>,
);
return (
<div className={styles.navbar}>
<div className={styles.links}>
<ul>
<li>
<a href='/'>
<h3>{config.name}</h3>
<span className={styles.nameLink}>{config.name} |</span>
</a>
</li>
<li>
<a href='/#about'>
<span>About</span>
</a>
</li>
<li>
<a href='/#blog'>
<span>Blog</span>
</a>
</li>
</ul>
</div>
<div className={styles.social}>
{socialLinks}
</div>
</div>
)
}

View File

@ -6,10 +6,42 @@
background-position: center;
background-repeat: no-repeat;
text-align: left;
padding: 2px;
overflow: auto;
}
h3 {
h2 {
color: $white;
padding-left: 5px;
}
.social {
display: inline-block;
float: right;
vertical-align: bottom;
a {
color: $white;
display: inline-block;
margin: 10px;
}
}
.links {
display: inline-block;
float: left;
ul {
list-style: none;
li {
font-family: $font-header;
display: inline;
margin: 5px;
a {
color: $white;
text-decoration: none;
}
}
}
}
.nameLink {
font-size: 1.4em;
}