From f0c20a2d1a2cda77c53d6f63daf4620aac5cc7a1 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 20 Jul 2018 22:20:58 +0200
Subject: [PATCH] Improved aside styles

---
 src/common/AsideMenu.js   | 75 +++++++++++++++++++--------------------
 src/common/AsideMenu.scss |  7 ++--
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index 847d5cac..e741fb4e 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -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>
+  );
 }
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index 69b1ffde..7b256cd4 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -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 {