mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-22 17:10:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved aside styles

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-20 22:20:58 +02:00
parent 168b24344e
commit f0c20a2d1a
2 changed files with 41 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/common/AsideMenu.js
View file

@ -6,44 +6,41 @@ import { NavLink } from 'react-router-dom';
import DeleteServerButton from '../servers/DeleteServerButton';
import './AsideMenu.scss';
export default class AsideMenu extends React.Component {
render() {
const { selectedServer, history } = this.props;
const serverId = selectedServer ? selectedServer.id : '';
const isListShortUrlsActive = (match, { pathname }) => {
// FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate
const serverIdFromPathname = pathname.split('/')[2];
return serverIdFromPathname === serverId && pathname.indexOf('list-short-urls') !== -1;
};
export default function AsideMenu({ selectedServer, history }) {
const serverId = selectedServer ? selectedServer.id : '';
const isListShortUrlsActive = (match, { pathname }) => {
// FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate
const serverIdFromPathname = pathname.split('/')[2];
return serverIdFromPathname === serverId && pathname.indexOf('list-short-urls') !== -1;
};
return (
<aside className="aside-menu col-md-2 col-sm-2">
<nav className="nav flex-column aside-menu__nav">
<NavLink
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/list-short-urls/1`}
isActive={isListShortUrlsActive}
>
<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`}
>
<FontAwesomeIcon icon={createIcon} />
<span className="aside-menu__item-text">Create short code</span>
</NavLink>
<span className="aside-menu__item--divider" />
<DeleteServerButton
className="aside-menu__item aside-menu__item--danger"
history={history}
server={selectedServer}
/>
</nav>
</aside>
);
}
return (
<aside className="aside-menu col-md-2 col-sm-2">
<nav className="nav flex-column aside-menu__nav">
<NavLink
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/list-short-urls/1`}
isActive={isListShortUrlsActive}
>
<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`}
>
<FontAwesomeIcon icon={createIcon} />
<span className="aside-menu__item-text">Create short code</span>
</NavLink>
<DeleteServerButton
className="aside-menu__item aside-menu__item--danger"
history={history}
server={selectedServer}
/>
</nav>
</aside>
);
}

7
src/common/AsideMenu.scss
View file

@ -8,7 +8,7 @@
left: 0;
z-index: 1000;
display: block;
padding: 20px;
padding: 30px 20px 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f7f7f7;
@ -16,7 +16,9 @@
}
.aside-menu__nav {
margin-top: 10px;
@media(min-width: $smMin) {
height: 100%;
}
}
.aside-menu__item {
@ -46,6 +48,7 @@
.aside-menu__item--danger {
color: $dangerColor;
margin: 0;
margin-top: auto;
@include border-radius(4px);
}
.aside-menu__item--danger:hover {