Implemented left menu

src/common/AsideMenu.js

@@ -1,8 +1,31 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 import './AsideMenu.scss';
 
-export default function AsideMenu() {
+export default function AsideMenu({ selectedServer }) {
+  const serverId = selectedServer ? selectedServer.id : '';
+
   return (
-    <aside className="aside-menu col-md-2 col-sm-2">Aside menu</aside>
+    <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={match => match && match.params.serverId === serverId}
+        >
+          List short URLs
+        </NavLink>
+        <NavLink
+          className="aside-menu__item"
+          activeClassName="aside-menu__item--selected"
+          to={`/server/${serverId}/create-short-url`}
+        >
+          Create short code
+        </NavLink>
+        <span className="aside-menu__item--divider" />
+        <span className="aside-menu__item aside-menu__item--danger">Delete this server</span>
+      </nav>
+    </aside>
   );
 }

src/common/AsideMenu.scss

@@ -13,3 +13,39 @@
   background-color: #f7f7f7;
   border-right: 1px solid #eee;
 }
+
+.aside-menu__nav {
+  margin-top: 10px;
+}
+
+.aside-menu__item {
+  padding: 10px 20px;
+  margin: 0 -15px;
+  text-decoration: none !important;
+  cursor: pointer;
+}
+.aside-menu__item:hover {
+  background-color: $lightHoverColor;
+}
+
+.aside-menu__item--selected {
+  color: #fff;
+  background-color: $mainColor;
+}
+.aside-menu__item--selected:hover {
+  color: #fff;
+  background-color: $mainColor;
+}
+
+.aside-menu__item--divider {
+  border-bottom: 1px solid #eee;
+  margin: 20px 0;
+}
+
+.aside-menu__item--danger {
+  color: $dangerColor;
+}
+.aside-menu__item--danger:hover {
+  color: #fff;
+  background-color: $dangerColor;
+}

src/common/MenuLayout.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { connect } from 'react-redux';
 import ShortUrls from '../short-urls/ShortUrls';
 import AsideMenu from './AsideMenu';
 
-export default function MenuLayout() {
+export function MenuLayout(props) {
   return (
     <div className="row">
-      <AsideMenu />
+      <AsideMenu {...props} />
       <div className="col-md-10 offset-md-2 col-sm-9 offset-sm-3">
         <Switch>
           <Route
@@ -19,3 +20,8 @@ export default function MenuLayout() {
     </div>
   );
 }
+
+export default connect(state => ({
+  selectedServer: state.selectedServer,
+  shortUrlsListParams: state.shortUrlsListParams,
+}))(MenuLayout);

src/short-urls/ShortUrlsList.js

@@ -15,10 +15,10 @@ import './ShortUrlsList.scss';
 
 export class ShortUrlsList extends React.Component {
   componentDidMount() {
-    const { match } = this.props;
+    const { match: { params } } = this.props;
-    this.props.listShortUrls(match.params.serverId, {
+    this.props.listShortUrls(params.serverId, {
       ...this.props.shortUrlsListParams,
-      page: match.params.page
+      page: params.page
     });
   }
 

src/utils/base.scss

@@ -11,6 +11,8 @@ $xlgMin: 1200px;
 
 // Colors
 $mainColor: #4696e5;
+$lightHoverColor: #eee;
+$dangerColor: #dc3545;
 
 // Misc
 $headerHeight: 57px;