Implemented loading of short URLs

This commit is contained in:
Alejandro Celaya
2018-06-15 21:49:25 +02:00
parent e4356720d7
commit c0203f1336
16 changed files with 191 additions and 33 deletions

8
src/common/AsideMenu.js Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
import './AsideMenu.scss';
export default function AsideMenu() {
return (
<aside className="aside-menu col-md-2 col-sm-2">Aside menu</aside>
);
}

15
src/common/AsideMenu.scss Normal file
View File

@@ -0,0 +1,15 @@
@import "../utils/base";
.aside-menu {
position: fixed !important;
top: $headerHeight;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f7f7f7;
border-right: 1px solid #eee;
}

View File

@@ -25,14 +25,14 @@ export default class MainHeader extends React.Component {
render() {
return (
<Navbar color="primary" dark fixed="top" className="main-header" expand="md">
<NavbarBrand href="https://shlink.io" target="_blank">
<NavbarBrand tag={Link} to="/">
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
</NavbarBrand>
<NavbarToggler onClick={() => this.toggle()}/>
<Collapse navbar isOpen={this.state.isOpen}>
<Nav navbar className="ml-auto">
<NavItem>
<NavLink tag={Link} to ="/server/create">
<NavLink tag={Link} to="/server/create">
<FontAwesomeIcon icon={plusIcon}/>&nbsp; Add server
</NavLink>
</NavItem>

View File

@@ -1,13 +1,20 @@
import React from 'react';
import { Switch } from 'react-router-dom';
import { Route, Switch } from 'react-router-dom';
import ShortUrlsList from '../short-urls/ShortUrlsList';
import AsideMenu from './AsideMenu';
export default () => {
export default function MenuLayout() {
return (
<div>
<nav>Left menu</nav>
<Switch>
</Switch>
<div className="row">
<AsideMenu />
<div className="col-md-10 offset-md-2 col-sm-9 offset-sm-3">
<Switch>
<Route exact
path="/server/:serverId/list-short-urls/:page"
component={ShortUrlsList}
/>
</Switch>
</div>
</div>
);
}