More progress on new design

src/css/less/grafana.less

@@ -9,6 +9,7 @@
 @import "forms.less";
 @import "singlestat.less";
 @import "tightform.less";
+@import "sidemenu.less";
 
 .row-control-inner {
   padding:0px;
@@ -62,7 +63,7 @@
   float: left;
   padding: 15px 13px 13px 14px;;
   position: relative;
-  background: @black;
+  border-right: 2px solid black;
   font-weight: bold;
   font-size: 90%;
   span {

src/css/less/p_pro.less

@@ -1,98 +1,3 @@
-.pro-sidemenu {
-  display: none;
-  a:focus {
-    text-decoration: none;
-  }
-}
-
-.pro-sidemenu-open {
-  .pro-sidemenu {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 200px;
-    background: @bodyBackground;
-    border-right: 2px solid black;
-    min-height: 100%;
-    z-index: 101;
-  }
-
-  .dashboard-notice {
-    margin-left: 200px;
-    width: auto;
-  }
-
-  .pro-main-view {
-    padding-left: 200px;
-  }
-
-  .panel-fullscreen {
-    left: 200px;
-  }
-}
-
-.sidemenu {
-  list-style: none;
-  background: @grafanaPanelBackground;
-  margin: 0;
-  padding: 0;
-}
-
-.sidemenu-links {
-  margin: 0;
-  padding: 5px 0;
-  list-style: none;
-  background: @grafanaTargetFuncBackground;
-  li {
-    display: block;
-  }
-}
-
-.sidemenu-link {
-  display: block;
-  padding: 6px 0 6px 30px;
-  font-size: 15px;
-  color: @gray;
-  i {
-    padding-right: 15px;
-  }
-  &.active {
-    color: white;
-    font-weight: bold;
-  }
-}
-
-.sidemenu-user {
-  padding: 8px 10px 7px 15px;
-  display: block;
-  width: 170px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  .gravatar-missing {
-    display: none;
-  }
-  .gravatar-email {
-    padding-left: 4px;
-  }
-  img {
-    width: 35px;
-    padding-right: 10px;
-  }
-  border-bottom: 1px solid black;
-}
-
-.sidemenu-item {
-  font-size: 17px;
-  padding: 14px 10px 14px 20px;
-  display: block;
-  i {
-    padding-right: 15px;
-  }
-  border-bottom: 1px solid black;
-}
-
 
 .login-form {
   width: 50%;

src/css/less/sidemenu.less

@@ -0,0 +1,114 @@
+.sidemenu-container {
+  display: none;
+  a:focus {
+    text-decoration: none;
+  }
+}
+
+.sidemenu-open {
+  .sidemenu-container {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    background: @bodyBackground;
+    border-right: 2px solid black;
+    min-height: 100%;
+    z-index: 101;
+  }
+
+  .dashboard-notice {
+    margin-left: 200px;
+    width: auto;
+  }
+
+  .pro-main-view {
+    padding-left: 200px;
+  }
+
+  .panel-fullscreen {
+    left: 200px;
+  }
+}
+
+.sidemenu {
+  list-style: none;
+  background: @grafanaPanelBackground;
+  margin: 0;
+  padding: 0;
+}
+
+.sidemenu-links {
+  margin: 0;
+  padding: 5px 0;
+  list-style: none;
+  background: @grafanaTargetFuncBackground;
+  li {
+    display: block;
+  }
+}
+
+.sidemenu-link {
+  display: block;
+  padding: 6px 0 6px 30px;
+  font-size: 15px;
+  color: @gray;
+  i {
+    padding-right: 15px;
+  }
+  &.active {
+    color: white;
+    font-weight: bold;
+  }
+}
+
+.sidemenu-user {
+  padding: 8px 10px 7px 15px;
+  display: block;
+  width: 170px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  .gravatar-missing {
+    display: none;
+  }
+  .gravatar-email {
+    padding-left: 4px;
+  }
+  img {
+    width: 35px;
+    padding-right: 10px;
+  }
+  border-bottom: 1px solid black;
+}
+
+.sidemenu-item {
+  font-size: 17px;
+  padding: 14px 10px 14px 20px;
+  display: block;
+  i {
+    padding-right: 15px;
+  }
+  border-bottom: 1px solid black;
+}
+
+.sidemenu-logo-container {
+  background: @grafanaPanelBackground;
+  text-align: center;
+  border-bottom: 2px solid black;
+  img {
+    display: inline-block;
+    width: 102px;
+    padding: 6px 0px 7px 11px;
+  }
+}
+
+.sidemenu-toggle {
+  float: right;
+  display: block;
+  font-size: 200%;
+  padding: 11px 8px 11px 8px;
+  background: @grafanaTargetFuncBackground;
+}
+