From c1880125b36c78418fe32ffd58b465dd6bf2ef96 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 5 Aug 2018 08:28:16 +0200
Subject: [PATCH] Fixed left menu responsiveness

---
 src/common/AsideMenu.js                       |  2 +-
 src/common/AsideMenu.scss                     | 28 ++++++++++---------
 src/common/DateInput.js                       |  2 +-
 .../{DateContainer.scss => DateInput.scss}    |  0
 src/common/MenuLayout.js                      |  2 +-
 5 files changed, 18 insertions(+), 16 deletions(-)
 rename src/common/{DateContainer.scss => DateInput.scss} (100%)

diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index 39d213b3..a098d4cf 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -15,7 +15,7 @@ export default function AsideMenu({ selectedServer, history }) {
   };
 
   return (
-    <aside className="aside-menu col-md-2 col-sm-2">
+    <aside className="aside-menu col-lg-2 col-md-3">
       <nav className="nav flex-column aside-menu__nav">
         <NavLink
           className="aside-menu__item"
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index e3008c68..5278a2a6 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -1,18 +1,22 @@
 @import "../utils/base";
-@import "../utils/mixins/border-radius";
 
 .aside-menu {
-  position: fixed !important;
-  top: $headerHeight;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  display: block;
-  padding: 30px 15px 15px;
-  overflow-x: hidden;
-  overflow-y: auto;
   background-color: #f7f7f7;
-  border-right: 1px solid #eee;
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  @media (min-width: $mdMin) {
+    position: fixed !important;
+    top: $headerHeight;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    display: block;
+    padding: 30px 15px 15px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: 1px solid #eee;
+  }
 }
 
 .aside-menu__nav {
@@ -47,9 +51,7 @@
 
 .aside-menu__item--danger {
   color: $dangerColor;
-  margin: 0;
   margin-top: auto;
-  @include border-radius(4px);
 }
 .aside-menu__item--danger:hover {
   color: #fff;
diff --git a/src/common/DateInput.js b/src/common/DateInput.js
index 148301e6..7df47732 100644
--- a/src/common/DateInput.js
+++ b/src/common/DateInput.js
@@ -2,7 +2,7 @@ import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import DatePicker from 'react-datepicker';
-import './DateContainer.scss';
+import './DateInput.scss';
 
 export default class DateInput extends React.Component {
   constructor(props) {
diff --git a/src/common/DateContainer.scss b/src/common/DateInput.scss
similarity index 100%
rename from src/common/DateContainer.scss
rename to src/common/DateInput.scss
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index c8cf0024..7105746a 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -19,7 +19,7 @@ export class MenuLayout extends React.Component {
     return (
       <div className="row">
         <AsideMenu {...this.props} />
-        <div className="col-md-10 offset-md-2 col-sm-9 offset-sm-3">
+        <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3">
           <Switch>
             <Route
               exact