From 39c8a2518a14f659fabafaa6e3563ceefa45880e Mon Sep 17 00:00:00 2001
From: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
Date: Wed, 3 May 2017 15:58:58 +0200
Subject: [PATCH] sidebar menu items no wrap and grow

---
 src/components/menu-sidebar.js | 12 ++++-----
 src/containers/app.js          | 10 ++++---
 src/styles/app.css             | 49 +++++++++++++++++++++++++---------
 3 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/components/menu-sidebar.js b/src/components/menu-sidebar.js
index 882ab56..152644a 100644
--- a/src/components/menu-sidebar.js
+++ b/src/components/menu-sidebar.js
@@ -29,14 +29,14 @@ class SidebarMenu extends Component {
         <h2>Menu</h2>
 
         <ul>
-          <li><Link to="/home" activeClassName="active">Home</Link></li>
-          <li><Link to="/projects" activeClassName="active">Projects</Link></li>
-          <li><Link to="/simulations" activeClassName="active">Simulations</Link></li>
-          <li><Link to="/simulators" activeClassName="active">Simulators</Link></li>
+          <li><Link to="/home" activeClassName="active" title="Home">Home</Link></li>
+          <li><Link to="/projects" activeClassName="active" title="Projects">Projects</Link></li>
+          <li><Link to="/simulations" activeClassName="active" title="Simulations">Simulations</Link></li>
+          <li><Link to="/simulators" activeClassName="active" title="Simulators">Simulators</Link></li>
           { this.props.currentRole === 'admin' ? 
-              <li><Link to="/users" activeClassName="active">User Management</Link></li> : ''
+              <li><Link to="/users" activeClassName="active" title="User Management">User Management</Link></li> : ''
           }
-          <li><Link to="/logout">Logout</Link></li>
+          <li><Link to="/logout" title="Logout">Logout</Link></li>
         </ul>
       </div>
     );
diff --git a/src/containers/app.js b/src/containers/app.js
index 9e6eaf0..2af248e 100644
--- a/src/containers/app.js
+++ b/src/containers/app.js
@@ -77,7 +77,7 @@ class App extends Component {
     }
 
     let currentUser = UserStore.getState().currentUser;
-    
+
     return {
       simulations: SimulationStore.getState(),
       currentRole: currentUser? currentUser.role : '',
@@ -185,10 +185,12 @@ class App extends Component {
         <NotificationSystem ref="notificationSystem" />
 
         <Header />
-        <SidebarMenu currentRole={ this.state.currentRole }/>
 
-        <div className="app-content">
-          {children}
+        <div className="app-body">
+          <SidebarMenu currentRole={ this.state.currentRole }/>
+          <div className="app-content">
+            {children}
+          </div>
         </div>
 
         <Footer />
diff --git a/src/styles/app.css b/src/styles/app.css
index f5a12fd..d02e36f 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -41,7 +41,6 @@ body {
 .app-header {
   width: 100%;
   height: 60px;
-
   padding: 10px 0 0 0;
 
   color: #527984;
@@ -50,7 +49,6 @@ body {
 
 .app-header h1 {
   width: 100%;
-
   margin: 0;
 
   text-align: center;
@@ -68,15 +66,27 @@ body {
   clear: both;
 }
 
-.app-content {
+.app-body {
+  /* Let sidebar grow and content occupy rest of the space */
+  display: flex;
   position: absolute;
-  bottom: 0px;
   top: 60px;
+  bottom: 60px;
   right: 0px;
-  left: 200px;
-  min-height: 400px;
+  left: 0px;
 
-  margin: 20px 20px 60px 20px;
+  padding: 15px 5px 0px 5px;
+}
+
+.app-body div {
+  margin-left: 7px;
+  margin-right: 7px;
+}
+
+.app-content {
+  flex: 1 1 auto;
+  min-height: 400px;
+  height: 100%;
   padding: 15px 20px;
 
   background-color: #fff;
@@ -88,11 +98,7 @@ body {
  * Menus
  */
 .menu-sidebar {
-  float: left;
-
-  width: 160px;
-
-  margin: 20px 0 0 20px;
+  display: inline-table;
   padding: 20px 25px 20px 25px;
 
   background-color: #fff;
@@ -102,18 +108,35 @@ body {
 
 .menu-sidebar a {
   color: #4d4d4d;
+  text-decoration:none;
+}
+
+.menu-sidebar a:hover, .menu-sidebar a:focus {
+  text-decoration:none;
 }
 
 .active {
   font-weight: bold;
+  /*text-decoration:none;*/
 }
 
 .menu-sidebar ul {
   padding-top: 10px;
-
   list-style: none;
+  white-space: nowrap;  
 }
 
+.menu-sidebar a::after {
+  /* Trick to make menu items to be as wide as in bold */
+  display:block;
+  content:attr(title);
+  font-weight:bold;
+  height:1px;
+  color:transparent;
+  overflow:hidden;
+  visibility:hidden;
+  margin-bottom:-1px;
+}
 /**
  * Login form
  */