Added icons to side menu

This commit is contained in:
Alejandro Celaya 2018-07-18 20:32:19 +02:00
parent e1049a74a2
commit 0de191ac0b
2 changed files with 16 additions and 3 deletions

View file

@ -1,5 +1,9 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
import listIcon from '@fortawesome/fontawesome-free-solid/faBars';
import createIcon from '@fortawesome/fontawesome-free-solid/faPlus';
import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import './AsideMenu.scss';
export default function AsideMenu({ selectedServer }) {
@ -19,17 +23,22 @@ export default function AsideMenu({ selectedServer }) {
to={`/server/${serverId}/list-short-urls/1`}
isActive={isListShortUrlsActive}
>
List short URLs
<FontAwesomeIcon icon={listIcon} />
<span className="aside-menu__item-text">List short URLs</span>
</NavLink>
<NavLink
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/create-short-url`}
>
Create short code
<FontAwesomeIcon icon={createIcon} />
<span className="aside-menu__item-text">Create short code</span>
</NavLink>
<span className="aside-menu__item--divider" />
<span className="aside-menu__item aside-menu__item--danger">Delete this server</span>
<span className="aside-menu__item aside-menu__item--danger">
<FontAwesomeIcon icon={deleteIcon} />
<span className="aside-menu__item-text">Delete this server</span>
</span>
</nav>
</aside>
);

View file

@ -49,3 +49,7 @@
color: #fff;
background-color: $dangerColor;
}
.aside-menu__item-text {
margin-left: 8px;
}