Refactor Valo main menu styles into separate mixins

Add a new utility mixin for defining width-ranges and height-ranges.

Refactored ValoThemeUI to use Responsive and styled it to fit in a
variety of viewport widths.

Fixed an issue with “flat-dark” using named colors, which trips the
“type-of” function.

Theme “theme select”.

Change-Id: Iff55ca2c23d2e279b6199590db2fdfe51423c1df

6 files changed, 497 insertions, 188 deletions

diff --git a/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss b/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss
index f68f9c266d..fa785af8b8 100644
--- a/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss
+++ b/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss
@@ -1,7 +1,7 @@
 $v-app-loading-text: "Dark & Flat Valo";
 
 $v-background-color: #000;
-$v-focus-color: orange;
+$v-focus-color: #ffa500;
 $v-font-size: 15px;
 $v-font-weight: 600;
 $v-unit-size: 42px;
diff --git a/WebContent/VAADIN/themes/tests-valo/_valotest.scss b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
index f775938e13..7c024b323e 100644
--- a/WebContent/VAADIN/themes/tests-valo/_valotest.scss
+++ b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
@@ -1,9 +1,35 @@
 @mixin valotest {
   @include valo;
 
-  .valo-menu .v-checkbox {
-    margin: round($v-unit-size/2);
-    font-weight: 400;
+  #themeSelect {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    padding: 0 10px;
+    background-color: darken($v-app-background-color, 5%);
+    background-color: rgba(darken($v-app-background-color, 5%), .9);
+    color: valo-font-color($v-app-background-color);
+    border-radius: 0 0 0 $v-border-radius;
+
+    &:before {
+      content: "Theme:";
+    }
+
+    select {
+      background: transparent;
+      color: inherit;
+      border: none;
+      display: inline-block;
+    }
+  }
+
+  .v-ui {
+    @include width-range($max: 800px) {
+      #themeSelect {
+        top: $v-unit-size;
+      }
+    }
   }
 
   $color1: hsl(220, 5%, 38%);
@@ -115,4 +141,4 @@
   .v-accordion-item-color1 .v-accordion-item-caption {
     @include valo-accordion-item-caption-style($background-color: $color2);
   }
-}
\ No newline at end of file
+}
diff --git a/WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg b/WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg
new file mode 100644
index 0000000000..8a98078243
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg
diff --git a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
index f3377f232c..8bd26e2b10 100644
--- a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
+++ b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
@@ -1,214 +1,465 @@
-$valo-menu-background-color: null !default;
+$valo-menu-background-color: scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%)) !default;
 
-@mixin valo-menu {
-
-  $bg-lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%);
-  $bg: $valo-menu-background-color or scale-color($v-app-background-color, $lightness: $bg-lightness);
-  $font-color: valo-font-color($bg, 0.5);
+@mixin valo-menu ($bg: $valo-menu-background-color) {
 
   .valo-menu {
+    @include valo-menu-style($bg);
+  }
+
+  .valo-menu-toggle {
+    display: none;
+    position: fixed;
+    z-index: 200;
+    $offset: floor(($v-unit-size - $v-unit-size * 0.8) / 2);
+    top: $offset;
+    left: $offset;
+    min-width: 0;
+  }
+
+  .valo-menu-part {
+    border-left: valo-border($color: $bg, $strength: 0.6);
     height: 100%;
-    @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
-    color: $font-color;
-    font-size: round($v-font-size * 0.9);
-    line-height: round($v-unit-size * 0.8);
-    border-right: valo-border($color: $bg);
+    padding-bottom: $v-unit-size;
+    overflow: auto;
+
+    &:first-child {
+      border-left: none;
+    }
+  }
+
+  .valo-menu-title,
+  .valo-menu-subtitle,
+  .valo-menu-item {
+    display: block;
+    line-height: inherit;
     white-space: nowrap;
+    position: relative;
+
+    .valo-menu-badge {
+      position: absolute;
+      right: round($v-unit-size/2);
+    }
+  }
 
-    .valo-menu-part {
-      border-left: valo-border($color: $bg, $strength: 0.6);
-      height: 100%;
-      padding-bottom: $v-unit-size;
-      overflow: auto;
+  .valo-menu-title {
+    @include valo-menu-title-style;
+    text-align: center;
 
-      &:first-child {
-        border-left: none;
-      }
+    .v-menubar.v-menubar {
+      background: transparent;
+      border-color: first-color(valo-border($color: $v-selection-color));
+      color: inherit;
+      @include box-shadow(none);
+      text-shadow: inherit;
     }
 
-    .valo-menu-title,
-    .valo-menu-subtitle,
-    .valo-menu-item {
-      display: block;
-      line-height: inherit;
-      white-space: nowrap;
-      position: relative;
+    .v-menubar-menuitem {
+      background: transparent;
+      @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient));
+      text-shadow: inherit;
+      font-size: $v-font-size;
+      border-color: inherit;
+    }
 
-      .valo-menu-badge {
-        position: absolute;
-        right: round($v-unit-size/2);
-      }
+    h1, .v-label-h1,
+    h2, .v-label-h2,
+    h3, .v-label-h3,
+    h4, .v-label-h4 {
+      margin-top: 0;
+      margin-bottom: 0;
+      color: inherit;
     }
+  }
 
-    .valo-menu-title {
-      line-height: 1.2;
-      @include valo-gradient($color: $v-selection-color);
-      $font-color: valo-font-color($v-selection-color, 1);
-      color: $font-color;
-      text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
-      padding: round($v-unit-size/3) round($v-unit-size/2);
-      font-size: round($v-font-size * 0.9);
-      border-bottom: valo-border($color: $v-selection-color);
-      @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
-
-      .v-menubar {
-        background: transparent;
-        border-color: first-color(valo-border($color: $v-selection-color));
-        color: inherit;
-        @include box-shadow(none);
-        text-shadow: inherit;
+  .v-menubar-user-menu {
+    @include valo-menubar-borderless-style;
+    margin: round($v-unit-size/2) round($v-unit-size/5);
+    display: block;
+    text-align: center;
+    height: auto;
+    color: inherit;
+
+    > .v-menubar-menuitem {
+      color: inherit;
+      white-space: normal;
+      line-height: 1.4;
+
+      img.v-icon {
+        width: round($v-unit-size * 1.5);
+        height: round($v-unit-size * 1.5);
+        border-radius: ceil($v-unit-size * 1.5 / 2);
+        box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow);
+        display: block;
+        margin: 0 auto .3em;
       }
+    }
 
-      .v-menubar-menuitem {
-        background: transparent;
-        @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient));
-        text-shadow: inherit;
-        font-size: $v-font-size;
-        border-color: inherit;
-      }
+    .v-menubar-menuitem-selected {
+      background: transparent;
+    }
+  }
+
+  .valo-menu-subtitle {
+    @include valo-menu-subtitle-style($bg);
+
+    .valo-menu-badge {
+      color: mix(valo-font-color($bg), $v-selection-color);
     }
+  }
+
+  .valo-menuitems {
+    display: block;
+  }
+
+  .valo-menu-item {
+    @include valo-menu-item-style($bg);
+  }
+
+  .valo-menu-part.large-icons {
+    @include valo-menu-large-icons-style($bg);
+  }
+
+  .valo-menu-logo {
+    @include valo-menu-logo-style;
+  }
+
+  @include valo-menu-responsive;
+
+}
 
-    .valo-menu-subtitle {
-      color: valo-font-color($bg, 0.33);
-      margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
-      border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone);
 
-      .valo-menu-badge {
-        color: mix(valo-font-color($bg), $v-selection-color);
+@mixin valo-menu-responsive {
+  .v-ui {
+    @include width-range($min: 801px, $max: 1100px) {
+      .valo-menu-part {
+        @include valo-menu-large-icons-style($valo-menu-background-color);
       }
     }
 
-    .valo-menu-item {
-      outline: none;
-      font-weight: $v-font-weight + 100;
-      padding: 0 round($v-unit-size) 0 round($v-unit-size/2);
-      cursor: pointer;
-      position: relative;
-      text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px);
-      @include transition(background-color 300ms, color 60ms);
+    @include width-range($max: 800px) {
+      padding-top: $v-unit-size;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+
+      .v-loading-indicator {
+        top: $v-unit-size;
+      }
+
+      > .v-widget {
+        position: relative !important
+      }
 
-      $diff: color-luminance($bg) - color-luminance($v-selection-color);
-      $active-color: $v-selection-color;
-      @if abs($diff) < 30 {
-        $active-color: lighten($v-selection-color, 10%);
+      .valo-menu {
+        border-right: none;
       }
 
-      .valo-menu-item-caption {
-        vertical-align: middle;
+      .valo-menu-toggle {
         display: inline-block;
-        width: 90%;
-        max-width: 15em;
-        padding-right: round($v-unit-size/2);
-        text-overflow: ellipsis;
-        overflow: hidden;
       }
 
-      &.selected {
-        background: darken($bg, 3%);
+      .valo-menu-title {
+        position: fixed;
+        z-index: 100;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: $v-unit-size !important;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
 
-        .v-icon {
-          color: $active-color;
+      .valo-menu .v-menubar-user-menu {
+        position: fixed;
+        z-index: 100;
+        top: 0;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        height: $v-unit-size;
+        color: valo-font-color($v-selection-color, 0.5);
+
+        .v-menubar-menuitem {
+          line-height: $v-unit-size - 1px;
         }
 
-        .valo-menu-badge {
-          @include valo-gradient($color: $active-color);
-          color: valo-font-color($active-color);
+        img.v-icon {
+          display: inline-block;
+          margin: 0 round($v-unit-size / 6) 0 0;
+          width: round($v-unit-size / 2);
+          height: round($v-unit-size / 2);
+          border-radius: ceil($v-unit-size / 4);
         }
       }
 
-      &:hover,
-      &.selected {
-        color: valo-font-color($bg, 1);
+      .valo-menuitems {
+        @include valo-menu-style;
+        position: fixed;
+        z-index: 200;
+        top: $v-unit-size;
+        bottom: 0;
+        height: auto;
+        max-width: 100%;
+        overflow: auto;
+        padding: round($v-unit-size / 2) 0;
+        @include transform(translatex(-100%));
+        @include transition(all 300ms);
       }
 
-      // Font icons
-      span.v-icon {
-        min-width: 1em;
-        margin-right: round($v-unit-size/2);
-        text-align: center;
-        vertical-align: middle;
+      .valo-menu-visible .valo-menuitems {
+        @include transform(translatex(0%));
+      }
+    }
 
-        + span {
-          margin-left: 0;
-        }
+    @include width-range($max: 500px) {
+      .valo-menu-toggle .v-button-caption {
+        display: none;
       }
 
-      .valo-menu-badge {
-        background: lighten($bg, 5%);
-        @include transition(background-color 300ms);
-        line-height: 1;
-        padding: round($v-unit-size/9) round($v-unit-size/6);
-        min-width: round($v-font-size/1.5);
-        text-align: center;
-        top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2;
-        border-radius: $v-border-radius;
+      .valo-menu .v-menubar-user-menu .v-menubar-menuitem-caption {
+        display: inline-block;
+        width: round($v-unit-size / 2);
+        overflow: hidden;
       }
     }
+  }
+}
 
-    .valo-menu-part.large-icons {
-      $bg: darken($bg, 4%);
-      background-color: $bg;
-
-      .valo-menu-item {
-        font-size: $v-unit-size;
-        line-height: 1;
-        padding: round($v-unit-size/3);
-        min-width: $v-unit-size * 2;
-        max-width: $v-unit-size * 3;
-        text-align: center;
-
-        .valo-menu-item-caption {
-          display: block;
-          width: auto;
-          margin: .3em 0 0;
-          padding: 0;
-          font-size: round($v-font-size * 0.7);
-        }
 
-        .v-icon {
-          margin: 0;
-        }
 
-        span.v-icon {
-          opacity: 0.8;
-        }
+@mixin valo-menu-style ($bg: $valo-menu-background-color) {
+  height: 100%;
+  @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
+  color: valo-font-color($bg, 0.5);
+  font-size: round($v-font-size * 0.9);
+  line-height: round($v-unit-size * 0.8);
+  border-right: valo-border($color: $bg);
+  white-space: nowrap;
+}
 
-        &.selected {
-          background: darken($bg, 3%);
 
-          .v-icon {
-            opacity: 1;
-          }
 
-          .valo-menu-badge {
-            border-color: darken($bg, 3%);
-          }
-        }
+@mixin valo-menu-title-style {
+  line-height: 1.2;
+  @include valo-gradient($color: $v-selection-color);
+  $font-color: valo-font-color($v-selection-color, 1);
+  color: $font-color;
+  text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
+  padding: round($v-unit-size/3) round($v-unit-size/2);
+  font-size: round($v-font-size * 0.9);
+  border-bottom: valo-border($color: $v-selection-color);
+  @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
+}
 
-        .valo-menu-badge {
-          padding-left: round($v-unit-size/9);
-          padding-right: round($v-unit-size/9);
-          top: round($v-unit-size/5);
-          right: round($v-unit-size/5);
-          border: 2px solid $bg;
-        }
-      }
+
+
+@mixin valo-menu-subtitle-style ($bg: $valo-menu-background-color) {
+  color: valo-font-color($bg, 0.33);
+  margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
+  border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone);
+}
+
+
+
+@mixin valo-menu-item-style ($bg: $valo-menu-background-color) {
+  $font-color: valo-font-color($bg, 0.5);
+  outline: none;
+  font-weight: $v-font-weight + 100;
+  padding: 0 round($v-unit-size) 0 round($v-unit-size/2);
+  cursor: pointer;
+  position: relative;
+  text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px);
+  @include transition(background-color 300ms, color 60ms);
+
+  $diff: color-luminance($bg) - color-luminance($v-selection-color);
+  $active-color: $v-selection-color;
+  @if abs($diff) < 30 {
+    $active-color: lighten($v-selection-color, 10%);
+  }
+
+  [class*="caption"] {
+    vertical-align: middle;
+    display: inline-block;
+    width: 90%;
+    max-width: 15em;
+    padding-right: round($v-unit-size/2);
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &.selected {
+    background: darken($bg, 3%);
+
+    .v-icon {
+      color: $active-color;
+    }
+
+    [class*="badge"] {
+      @include valo-badge-style($states: active, $active-color: $active-color);
+    }
+  }
+
+  &:focus,
+  &:hover,
+  &.selected {
+    color: valo-font-color($bg, 1);
+  }
+
+  // Font icons
+  span.v-icon {
+    min-width: 1em;
+    margin-right: round($v-unit-size/2);
+    text-align: center;
+    vertical-align: middle;
+
+    @if $v-gradient {
+      -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0.75)));
+    }
+
+    + span {
+      margin-left: 0;
     }
+  }
 
-    .valo-menu-logo {
+  [class*="badge"] {
+    @include valo-badge-style($states: inactive, $background-color: lighten($bg, 5%));
+  }
+}
+
+
+
+
+@mixin valo-badge-style ($states: inactive active, $background-color: null, $active-color: $v-selection-color) {
+  @if contains($states, inactive) {
+    background-color: $background-color;
+    @include transition(background-color 300ms);
+    line-height: 1;
+    padding: round($v-unit-size/9) round($v-unit-size/6);
+    min-width: round($v-font-size/1.5);
+    text-align: center;
+    top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2;
+    border-radius: $v-border-radius;
+  }
+
+  @if contains($states, active) {
+    @include valo-gradient($color: $active-color);
+    color: valo-font-color($active-color);
+  }
+}
+
+
+
+@mixin valo-menu-large-icons-style ($bg: darken($valo-menu-background-color, 4%)) {
+  background-color: $bg;
+  min-width: $v-unit-size * 2;
+  max-width: $v-unit-size * 3;
+
+  .valo-menu-title {
+    font-size: round($v-font-size * 0.75);
+
+    .v-label-undef-w {
+      white-space: normal;
+    }
+  }
+
+  .v-menubar-user-menu {
+    margin-left: 0;
+    margin-right: 0;
+    font-size: round($v-font-size * 0.7);
+
+    img.v-icon {
+      width: round($v-unit-size/1.3);
+      height: round($v-unit-size/1.3);
+    }
+  }
+
+  [class*="subtitle"] {
+    margin: round($v-unit-size/4) 0 0;
+    padding: round($v-unit-size/5) round($v-unit-size/1.5) round($v-unit-size/5) round($v-unit-size/4);
+    line-height: 1;
+    border: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    background: darken($bg, 6%);
+    font-size: round($v-font-size * 0.8);
+    box-shadow: valo-bevel-and-shadow($shadow: $v-shadow);
+
+    [class*="badge"] {
+      right: round($v-unit-size/4);
+    }
+
+    + .valo-menu-item {
+      border-top: none;
+    }
+  }
+
+  .valo-menu-item {
+    display: block;
+    font-size: round($v-font-size * 1.6);
+    line-height: 1;
+    padding: round($v-unit-size/3);
+    text-align: center;
+    border-top: valo-border($color: $bg, $strength: 0.2, $border: first-number($v-border) solid v-tone);
+
+    &:first-child {
+      border-top: none;
+    }
+
+    [class*="caption"] {
       display: block;
-      overflow: hidden;
-      width: round($v-unit-size * 1.2) !important;
-      height: round($v-unit-size * 1.2);
-      border-radius: $v-border-radius;
-      text-align: center;
-      @include valo-gradient($color: $v-selection-color);
-      color: valo-font-color($v-selection-color, 1);
-      font-size: round($v-unit-size/1.5);
-      line-height: round($v-unit-size * 1.2);
-      margin: round($v-unit-size/2) auto;
-      @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
+      width: auto;
+      margin: .3em 0 0;
+      padding: 0;
+      font-size: round($v-font-size * 0.7);
+      line-height: 1.3;
+    }
+
+    .v-icon {
+      margin: 0;
+    }
+
+    span.v-icon {
+      opacity: 0.8;
+    }
+
+    &.selected {
+      background: darken($bg, 3%);
+
+      .v-icon {
+        opacity: 1;
+      }
+
+      [class*="badge"] {
+        border-color: darken($bg, 3%);
+      }
+    }
+
+    [class*="badge"] {
+      padding-left: round($v-unit-size/9);
+      padding-right: round($v-unit-size/9);
+      top: round($v-unit-size/5);
+      right: round($v-unit-size/5);
+      border: 2px solid $bg;
     }
   }
+}
+
 
+
+@mixin valo-menu-logo-style {
+  display: block;
+  overflow: hidden;
+  width: round($v-unit-size * 1.2) !important;
+  height: round($v-unit-size * 1.2);
+  border-radius: $v-border-radius;
+  text-align: center;
+  @include valo-gradient($color: $v-selection-color);
+  color: valo-font-color($v-selection-color, 1);
+  font-size: round($v-unit-size/1.5);
+  line-height: round($v-unit-size * 1.2);
+  margin: round($v-unit-size/2) auto;
+  @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
+
+  &:focus {
+    outline: none;
+  }
 }
diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss
index 2f7b28b3ad..a510695560 100644
--- a/WebContent/VAADIN/themes/valo/util/_util.scss
+++ b/WebContent/VAADIN/themes/valo/util/_util.scss
@@ -25,3 +25,17 @@
   -webkit-touch-callout: none;
   cursor: pointer;
 }
+
+
+
+@mixin width-range($min: 0, $max: null) {
+  &[width-range~="#{$min}-#{$max}"] {
+    @content;
+  }
+}
+
+@mixin height-range($min: 0, $max: null) {
+  &[height-range~="#{$min}-#{$max}"] {
+    @content;
+  }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java
index 27a256665e..1f92265d9d 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java
@@ -36,13 +36,14 @@ import com.vaadin.navigator.ViewChangeListener;
 import com.vaadin.server.FontAwesome;
 import com.vaadin.server.Page;
 import com.vaadin.server.Resource;
+import com.vaadin.server.Responsive;
+import com.vaadin.server.ThemeResource;
 import com.vaadin.server.VaadinRequest;
 import com.vaadin.shared.ui.label.ContentMode;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.Button.ClickEvent;
 import com.vaadin.ui.Button.ClickListener;
-import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.ComponentContainer;
 import com.vaadin.ui.CssLayout;
@@ -53,6 +54,7 @@ import com.vaadin.ui.MenuBar.MenuItem;
 import com.vaadin.ui.NativeSelect;
 import com.vaadin.ui.Notification;
 import com.vaadin.ui.UI;
+import com.vaadin.ui.themes.ValoTheme;
 
 @Theme("tests-valo")
 @Title("Valo Theme Test")
@@ -74,6 +76,7 @@ public class ValoThemeUI extends UI {
     ValoMenuLayout root = new ValoMenuLayout();
     ComponentContainer viewDisplay = root.getContentContainer();
     CssLayout menu = new CssLayout();
+    CssLayout menuItemsLayout = new CssLayout();
     private Navigator navigator;
     private LinkedHashMap<String, String> menuItems = new LinkedHashMap<String, String>();
 
@@ -86,11 +89,12 @@ public class ValoThemeUI extends UI {
         // e.printStackTrace();
         // }
 
+        Responsive.makeResponsive(this);
+
         getPage().setTitle("Valo Theme Test");
         setContent(root);
         root.setWidth("100%");
 
-        root.addMenu(buildTestMenu());
         root.addMenu(buildMenu());
 
         navigator = new Navigator(this, viewDisplay);
@@ -131,13 +135,14 @@ public class ValoThemeUI extends UI {
 
             @Override
             public void afterViewChange(ViewChangeEvent event) {
-                for (Iterator<Component> it = menu.iterator(); it.hasNext();) {
+                for (Iterator<Component> it = menuItemsLayout.iterator(); it
+                        .hasNext();) {
                     it.next().removeStyleName("selected");
                 }
                 for (Entry<String, String> item : menuItems.entrySet()) {
                     if (event.getViewName().equals(item.getKey())) {
-                        for (Iterator<Component> it = menu.iterator(); it
-                                .hasNext();) {
+                        for (Iterator<Component> it = menuItemsLayout
+                                .iterator(); it.hasNext();) {
                             Component c = it.next();
                             if (c.getCaption() != null
                                     && c.getCaption().startsWith(
@@ -216,30 +221,43 @@ public class ValoThemeUI extends UI {
         menu.addComponent(top);
         menu.addComponent(createThemeSelect());
 
-        Label title = new Label("Vaadin<br><strong>Valo Theme Styles</strong>",
+        Button showMenu = new Button("Menu", new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                if (menu.getStyleName().contains("valo-menu-visible")) {
+                    menu.removeStyleName("valo-menu-visible");
+                } else {
+                    menu.addStyleName("valo-menu-visible");
+                }
+            }
+        });
+        showMenu.addStyleName(ValoTheme.BUTTON_PRIMARY);
+        showMenu.addStyleName(ValoTheme.BUTTON_SMALL);
+        showMenu.addStyleName("valo-menu-toggle");
+        showMenu.setIcon(FontAwesome.LIST);
+        menu.addComponent(showMenu);
+
+        Label title = new Label("<h3>Vaadin <strong>Valo Theme</strong></h3>",
                 ContentMode.HTML);
         title.setSizeUndefined();
         top.addComponent(title);
         top.setExpandRatio(title, 1);
 
         MenuBar settings = new MenuBar();
-        MenuItem settingsItem = settings.addItem("", FontAwesome.COG, null);
-        settingsItem.setStyleName("icon-only");
+        settings.addStyleName("user-menu");
+        StringGenerator sg = new StringGenerator();
+        MenuItem settingsItem = settings.addItem(
+                sg.nextString(true) + " " + sg.nextString(true)
+                        + sg.nextString(false), new ThemeResource(
+                        "../tests-valo/img/profile-pic-300px.jpg"), null);
         settingsItem.addItem("Edit Profile", null);
         settingsItem.addItem("Preferences", null);
         settingsItem.addSeparator();
         settingsItem.addItem("Sign Out", null);
-        top.addComponent(settings);
+        menu.addComponent(settings);
 
-        final CheckBox enabled = new CheckBox("Enabled", true);
-        enabled.setDescription("Enable or disable the components on the right side");
-        menu.addComponent(enabled);
-        enabled.addValueChangeListener(new ValueChangeListener() {
-            @Override
-            public void valueChange(ValueChangeEvent event) {
-                viewDisplay.setEnabled(enabled.getValue());
-            }
-        });
+        menuItemsLayout.setPrimaryStyleName("valo-menuitems");
+        menu.addComponent(menuItemsLayout);
 
         Label label = null;
         int count = -1;
@@ -249,7 +267,7 @@ public class ValoThemeUI extends UI {
                 label.setPrimaryStyleName("valo-menu-subtitle");
                 label.addStyleName("h4");
                 label.setSizeUndefined();
-                menu.addComponent(label);
+                menuItemsLayout.addComponent(label);
             }
             if (item.getKey().equals("panels")) {
                 label.setValue(label.getValue()
@@ -260,7 +278,7 @@ public class ValoThemeUI extends UI {
                 label.setPrimaryStyleName("valo-menu-subtitle");
                 label.addStyleName("h4");
                 label.setSizeUndefined();
-                menu.addComponent(label);
+                menuItemsLayout.addComponent(label);
             }
             if (item.getKey().equals("calendar")) {
                 label.setValue(label.getValue()
@@ -271,7 +289,7 @@ public class ValoThemeUI extends UI {
                 label.setPrimaryStyleName("valo-menu-subtitle");
                 label.addStyleName("h4");
                 label.setSizeUndefined();
-                menu.addComponent(label);
+                menuItemsLayout.addComponent(label);
             }
             Button b = new Button(item.getValue(), new ClickListener() {
                 @Override
@@ -286,7 +304,7 @@ public class ValoThemeUI extends UI {
             b.setHtmlContentAllowed(true);
             b.setPrimaryStyleName("valo-menu-item");
             b.setIcon(testIcon.get());
-            menu.addComponent(b);
+            menuItemsLayout.addComponent(b);
             count++;
         }
         label.setValue(label.getValue() + " <span class=\"valo-menu-badge\">"