mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added icons to side menu

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/common/AsideMenu.js
View file

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

4
src/common/AsideMenu.scss
View file

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