From 60374f3496bdbea77a6636af1539984e52d4052f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Knezi=C4=87?= <davidknezic@gmail.com>
Date: Tue, 8 Nov 2016 11:57:22 +0100
Subject: [PATCH 1/3] Make mobile-menu a collapsible only tree-menu

---
 docs/_partials/menu.hbs                       |  10 +-
 docs/_partials/page.hbs                       |   4 +-
 scss/style.scss                               |   2 +-
 scss/style/_mixins.scss                       |   2 +-
 scss/style/_tree-menu.scss                    | 138 ++++++++++++
 scss/style/blocks/mobile-menu.scss            | 196 ------------------
 .../{word-break.scss => _word-break.scss}     |   0
 7 files changed, 147 insertions(+), 205 deletions(-)
 create mode 100644 scss/style/_tree-menu.scss
 delete mode 100644 scss/style/blocks/mobile-menu.scss
 rename scss/style/mixins/{word-break.scss => _word-break.scss} (100%)

diff --git a/docs/_partials/menu.hbs b/docs/_partials/menu.hbs
index f399626e..990a5b6b 100644
--- a/docs/_partials/menu.hbs
+++ b/docs/_partials/menu.hbs
@@ -1,15 +1,15 @@
 {{#each childrenArray}}
-  <li class="mobile-menu__item">
-    <a class="mobile-menu__link{{#if children}} mobile-menu__link--parent{{/if}}"
+  <li class="tree-menu__item">
+    <a class="tree-menu__link{{#if children}} tree-menu__link--parent{{/if}}"
       data-link
       href={{#unless children}}{{#with file}}"{{relative link}}"{{/with}}{{else}}"#"{{/unless}}>
-      <span class="mobile-menu__text">{{#with file}}{{title}}{{/with}}</span>
+      <span class="tree-menu__text">{{#with file}}{{title}}{{/with}}</span>
       {{#if childrenArray}}
-        {{> icon name="arrow-right" classes="mobile-menu__link__parent-icon icon"}}
+        {{> icon name="arrow-right" classes="tree-menu__link__parent-icon"}}
       {{/if}}
     </a>
     {{#if childrenArray}}
-      <ul class="mobile-menu__level" data-level>
+      <ul class="tree-menu__level" data-level>
         {{> menu }}
       </ul>
     {{/if}}
diff --git a/docs/_partials/page.hbs b/docs/_partials/page.hbs
index 6faec0b2..8544430a 100644
--- a/docs/_partials/page.hbs
+++ b/docs/_partials/page.hbs
@@ -94,8 +94,8 @@
         </div>
       </div>
 
-      <nav class="col-md-12 mobile-menu mobile-menu--collapsing" data-menu="collapsing">
-        <ul class="mobile-menu__level" data-level>
+      <nav class="col-md-12 tree-menu" data-menu="collapsing">
+        <ul class="tree-menu__level" data-level>
           {{#with menu.side}}
             {{> menu}}
           {{/with}}
diff --git a/scss/style.scss b/scss/style.scss
index 22a16b57..82ac3a5a 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -69,6 +69,7 @@
 @import 'style/sliding-menu';
 @import 'style/table';
 @import 'style/table-of-contents';
+@import 'style/tree-menu';
 @import 'style/type';
 
 // To be refactored and migrated to style/xyz
@@ -124,7 +125,6 @@
 @import 'style/blocks/meta-menu';
 @import 'style/blocks/mobile-actions';
 @import 'style/blocks/mobile-languages';
-@import 'style/blocks/mobile-menu';
 @import 'style/blocks/mobile';
 @import 'style/blocks/modal';
 @import 'style/blocks/modal2';
diff --git a/scss/style/_mixins.scss b/scss/style/_mixins.scss
index 23481430..5db49e96 100644
--- a/scss/style/_mixins.scss
+++ b/scss/style/_mixins.scss
@@ -1,5 +1,6 @@
 @import 'mixins/breakpoints';
 @import 'mixins/unstyle-list';
+@import 'mixins/word-break';
 
 @import 'mixins/btn';
 @import 'mixins/button';
@@ -16,4 +17,3 @@
 @import 'mixins/make-row';
 @import 'mixins/richtext';
 @import 'mixins/target';
-@import 'mixins/word-break';
diff --git a/scss/style/_tree-menu.scss b/scss/style/_tree-menu.scss
new file mode 100644
index 00000000..31726a78
--- /dev/null
+++ b/scss/style/_tree-menu.scss
@@ -0,0 +1,138 @@
+.tree-menu {
+  width: 100%;
+  margin: 0;
+  padding: 0 0 1px 0;
+
+  list-style-type: none;
+}
+
+.tree-menu__item {
+  margin-bottom: -1px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.tree-menu__link {
+  @extend .typo-16;
+
+  display: flex;
+  align-items: center;
+
+  height: 60px;
+
+  padding: 0 30px;
+
+  border-top: 1px solid $color-gray--lighter;
+  border-bottom: 1px solid $color-gray--lighter;
+  color: $color-light-blue;
+
+  line-height: 1.3;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: $color-blue;
+    text-decoration: none;
+  }
+}
+
+.tree-menu__link.is-active {
+  color: $color-blue;
+}
+
+.tree-menu__text {
+  @include word-break();
+
+  flex-grow: 1;
+  order: 2;
+  pointer-events: none;
+}
+
+.tree-menu__link__parent-icon {
+  order: 3;
+
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  margin-left: 20px;
+
+  fill: currentColor;
+  pointer-events: none;
+}
+
+// Level 1
+.tree-menu__level .tree-menu__link {
+  background: $color-white;
+}
+
+.tree-menu__level .tree-menu__link.is-active {
+  background: $color-white;
+}
+
+// Level 2
+.tree-menu__level .tree-menu__level .tree-menu__link {
+  padding-left: (30px + 24px);
+  background-color: $color-white;
+}
+
+.tree-menu__level .tree-menu__level .tree-menu__link.is-active {
+  background-color: $color-white;
+}
+
+// Level 3
+.tree-menu__level .tree-menu__level .tree-menu__level .tree-menu__link {
+  height: 41px;
+  padding-top: 10px;
+  padding-bottom: 9px;
+  border-top: none;
+  border-bottom: 1px solid $color-tbd-13;
+
+  background-color: $color-tbd-12;
+  color: $color-tbd-9;
+}
+
+.tree-menu__level .tree-menu__level .tree-menu__level .tree-menu__link.is-active {
+  background-color: $color-tbd-12;
+}
+
+.tree-menu__level {
+  width: 100%;
+  max-height: 0px;
+
+  margin: 0;
+  padding: 0;
+
+  // Watch out: prevent delayed closing with a bezier
+  transition: max-height $transition-normal cubic-bezier(0, 1.05, 0, 1), visibility $transition-normal;
+
+  overflow: hidden;
+  visibility: hidden;
+  list-style-type: none;
+}
+
+.tree-menu__level.is-open {
+  // Watch out: work around, since no transition to `height: auto` is possible
+  max-height: 3999px;
+
+  transition: max-height $transition-normal cubic-bezier(0.01, 0, 1, 0), visibility $transition-normal;
+  visibility: visible;
+}
+
+.tree-menu__item {
+}
+
+.tree-menu__item--back {
+  display: none;
+}
+
+.tree-menu__link__parent-icon {
+  transform: rotate(0);
+  transition: transform $transition-normal ease;
+}
+
+.tree-menu__link--parent.is-active .tree-menu__link__parent-icon {
+  transform: rotate(90deg);
+  transition: transform $transition-normal ease;
+}
diff --git a/scss/style/blocks/mobile-menu.scss b/scss/style/blocks/mobile-menu.scss
deleted file mode 100644
index 244edb86..00000000
--- a/scss/style/blocks/mobile-menu.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-// TODO: Destroy hierarchies with more BEM
-
-.mobile-menu {
-  @include unstyle-list();
-
-  width: 100%;
-  padding-bottom: 1px;
-}
-
-.mobile-menu--sliding {
-  position: relative;
-  overflow: hidden;
-}
-
-.mobile-menu--sliding .mobile-menu__level {
-  @include unstyle-list();
-
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 100%;
-  visibility: hidden;
-
-  width: 100%;
-  padding-bottom: 1px;
-
-  transition: left $transition-normal $transition-default, visibility $transition-normal;
-
-  &.is-previous {
-  }
-
-  &.is-current {
-    visibility: visible;
-  }
-}
-
-.mobile-menu--sliding .mobile-menu__item {
-}
-
-.mobile-menu__item {
-  margin-bottom: -1px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.mobile-menu__item--section {
-}
-
-.mobile-menu__link {
-  @extend .typo-16;
-
-  line-height: 1.3;
-
-  display: flex;
-  align-items: center;
-
-  height: 60px;
-
-  padding: 0 30px;
-
-  color: $color-light-blue;
-  border-top: 1px solid $color-gray--lighter;
-  border-bottom: 1px solid $color-gray--lighter;
-
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: $color-blue;
-    text-decoration: none;
-  }
-}
-
-.mobile-menu__link.is-active {
-  color: $color-blue;
-}
-
-.mobile-menu__text {
-  flex-grow: 1;
-  order: 2;
-  pointer-events: none;
-  @include word-break();
-}
-
-.mobile-menu__link__parent-icon {
-  order: 3;
-
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  margin-left: 20px;
-}
-
-.mobile-menu__link--back {
-}
-
-.mobile-menu__link__back-icon {
-  order: 1;
-
-  height: 24px;
-  width: 24px;
-  min-width: 24px;
-  margin-right: 8px;
-}
-
-.mobile-menu__link--section {
-  padding: 9px 30px;
-  color: $color-white;
-  background-color: $color-blue;
-
-  &:hover {
-    color: $color-white;
-  }
-}
-
-  // Level 1
-.mobile-menu--collapsing .mobile-menu__level .mobile-menu__link {
-  background: $color-white;
-}
-
-.mobile-menu--collapsing .mobile-menu__level .mobile-menu__link.is-active {
-  background: $color-white;
-}
-
-  // Level 2
-.mobile-menu--collapsing .mobile-menu__level .mobile-menu__level .mobile-menu__link {
-  padding-left: (30px + 24px);
-  background-color: $color-white;
-}
-
-.mobile-menu--collapsing .mobile-menu__level .mobile-menu__level .mobile-menu__link.is-active {
-  background-color: $color-white;
-}
-
-  // Level 3
-.mobile-menu--collapsing .mobile-menu__level .mobile-menu__level .mobile-menu__level .mobile-menu__link {
-  height: 41px;
-  padding-top: 10px;
-  padding-bottom: 9px;
-  border-top: none;
-  border-bottom: 1px solid $color-tbd-13;
-
-  background-color: $color-tbd-12;
-  color: $color-tbd-9;
-}
-
-.mobile-menu--collapsing .mobile-menu__level .mobile-menu__level .mobile-menu__level .mobile-menu__link.is-active {
-  background-color: $color-tbd-12;
-}
-
-.mobile-menu--collapsing .mobile-menu__level {
-  padding: 0;
-  margin: 0;
-  visibility: hidden;
-
-  width: 100%;
-  max-height: 0px;
-
-  overflow: hidden;
-
-  list-style-type: none;
-
-  // Watch out: prevent delayed closing with a bezier
-  transition: max-height $transition-normal cubic-bezier(0, 1.05, 0, 1), visibility $transition-normal;
-}
-
-.mobile-menu--collapsing .mobile-menu__level.is-open {
-  transition: max-height $transition-normal cubic-bezier(0.01, 0, 1, 0), visibility $transition-normal;
-  visibility: visible;
-
-  // Watch out: work around, since no transition to `height: auto` is possible
-  max-height: 3999px;
-}
-
-.mobile-menu--collapsing .mobile-menu__item {
-}
-
-.mobile-menu--collapsing .mobile-menu__item--back {
-  display: none;
-}
-
-.mobile-menu--collapsing .mobile-menu__link__parent-icon {
-  transition: transform $transition-normal ease;
-  transform: rotate(0);
-}
-
-.mobile-menu--collapsing .mobile-menu__link--parent.is-active {
-  .mobile-menu__link__parent-icon {
-    transition: transform $transition-normal ease;
-    transform: rotate(90deg);
-  }
-}
-
-// Copyright AXA Versicherungen AG 2015
diff --git a/scss/style/mixins/word-break.scss b/scss/style/mixins/_word-break.scss
similarity index 100%
rename from scss/style/mixins/word-break.scss
rename to scss/style/mixins/_word-break.scss

From ecfe3558be2dc21043ab96311e2d3cbeff26df90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Knezi=C4=87?= <davidknezic@gmail.com>
Date: Tue, 8 Nov 2016 12:37:27 +0100
Subject: [PATCH 2/3] Simplify the styles of the tree menu

---
 scss/style/_tree-menu.scss | 70 ++++++++++----------------------------
 1 file changed, 18 insertions(+), 52 deletions(-)

diff --git a/scss/style/_tree-menu.scss b/scss/style/_tree-menu.scss
index 31726a78..55c9d796 100644
--- a/scss/style/_tree-menu.scss
+++ b/scss/style/_tree-menu.scss
@@ -1,14 +1,12 @@
 .tree-menu {
   width: 100%;
   margin: 0;
-  padding: 0 0 1px 0;
+  padding: 0;
 
   list-style-type: none;
 }
 
 .tree-menu__item {
-  margin-bottom: -1px;
-
   &:last-child {
     margin-bottom: 0;
   }
@@ -20,28 +18,30 @@
   display: flex;
   align-items: center;
 
-  height: 60px;
+  height: 50px;
 
-  padding: 0 30px;
+  padding: 0 20px;
 
-  border-top: 1px solid $color-gray--lighter;
-  border-bottom: 1px solid $color-gray--lighter;
-  color: $color-light-blue;
+  transition: color $transition-fast $transition-easeout, background-color $transition-fast $transition-easeout;
+
+  background-color: $color-white;
+  color: $color-dark-indigo;
 
   line-height: 1.3;
   text-decoration: none;
 
   &:hover,
-  &:focus {
-    color: $color-blue;
+  &:focus,
+  &:active,
+  &.is-active {
+    transition: color $transition-fast $transition-easein, background-color $transition-fast $transition-easein;
+
+    background-color: $color-wild-sand;
+    color: $color-axa-blue;
     text-decoration: none;
   }
 }
 
-.tree-menu__link.is-active {
-  color: $color-blue;
-}
-
 .tree-menu__text {
   @include word-break();
 
@@ -62,39 +62,12 @@
   pointer-events: none;
 }
 
-// Level 1
-.tree-menu__level .tree-menu__link {
-  background: $color-white;
-}
-
-.tree-menu__level .tree-menu__link.is-active {
-  background: $color-white;
-}
-
 // Level 2
 .tree-menu__level .tree-menu__level .tree-menu__link {
-  padding-left: (30px + 24px);
-  background-color: $color-white;
-}
+  padding-left: (20px + 15px);
 
-.tree-menu__level .tree-menu__level .tree-menu__link.is-active {
-  background-color: $color-white;
-}
-
-// Level 3
-.tree-menu__level .tree-menu__level .tree-menu__level .tree-menu__link {
-  height: 41px;
-  padding-top: 10px;
-  padding-bottom: 9px;
-  border-top: none;
-  border-bottom: 1px solid $color-tbd-13;
-
-  background-color: $color-tbd-12;
-  color: $color-tbd-9;
-}
-
-.tree-menu__level .tree-menu__level .tree-menu__level .tree-menu__link.is-active {
-  background-color: $color-tbd-12;
+  &.is-active {
+  }
 }
 
 .tree-menu__level {
@@ -114,19 +87,12 @@
 
 .tree-menu__level.is-open {
   // Watch out: work around, since no transition to `height: auto` is possible
-  max-height: 3999px;
+  max-height: 2999px;
 
   transition: max-height $transition-normal cubic-bezier(0.01, 0, 1, 0), visibility $transition-normal;
   visibility: visible;
 }
 
-.tree-menu__item {
-}
-
-.tree-menu__item--back {
-  display: none;
-}
-
 .tree-menu__link__parent-icon {
   transform: rotate(0);
   transition: transform $transition-normal ease;

From b27ad35946f792bafb735cd4422ae23432042695 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Knezi=C4=87?= <davidknezic@gmail.com>
Date: Fri, 25 Nov 2016 10:30:14 +0100
Subject: [PATCH 3/3] Add tree menu doc page, slightly restyle

---
 docs/components/tree-menu/index.hbs           | 59 +++++++++++++++++++
 .../tree-menu/snippets/tree-menu.hbs          | 45 ++++++++++++++
 scss/style/_tree-menu.scss                    | 13 +++-
 3 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/tree-menu/index.hbs
 create mode 100644 docs/components/tree-menu/snippets/tree-menu.hbs

diff --git a/docs/components/tree-menu/index.hbs b/docs/components/tree-menu/index.hbs
new file mode 100644
index 00000000..5c6a27d8
--- /dev/null
+++ b/docs/components/tree-menu/index.hbs
@@ -0,0 +1,59 @@
+---
+title: Tree menu
+description: A collapsible tree menu.
+nav: side/components/tree-menu
+order: 3
+lunr: true
+toc:
+  - title: Overview
+    slug: overview
+---
+
+{{#> page}}
+  {{#*inline "content"}}
+
+    <h1 class="docs-h2">{{title}}</h1>
+
+    <p class="lead">Use the Tree menu component to display a two-level
+    menu in a simple, vertically expanding way. The component
+    is most commonly used inside a mobile navigation drawer.</p>
+
+    {{> table-of-contents data=toc}}
+
+    <h2 id="overview" class="docs-h3">Overview</h2>
+
+    <p></p>
+
+    {{> example path="/components/tree-menu/demos/tree-menu.html"}}
+
+    {{#code-snippet "html"}}
+      <nav class="tree-menu" data-menu="collapsing">
+
+        <!-- first menu level -->
+        <ul class="tree-menu__level is-open" data-level>
+          <li class="tree-menu__item">
+            <a class="tree-menu__link" data-link href="#">
+              <span class="tree-menu__text">Simple item</span>
+            </a>
+          </li>
+          <li class="tree-menu__item">
+            <a class="tree-menu__link tree-menu__link--parent" data-link href="#">
+              <span class="tree-menu__text">Parent item</span>
+              {{> icon name="arrow-right" classes="tree-menu__link__parent-icon"}}
+            </a>
+
+            <!-- second menu level -->
+            <ul class="tree-menu__level" data-level>
+              <li class="tree-menu__item">
+                <a class="tree-menu__link" data-link href="#">
+                  <span class="tree-menu__text">Child item</span>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    {{/code-snippet}}
+
+  {{/inline}}
+{{/page}}
diff --git a/docs/components/tree-menu/snippets/tree-menu.hbs b/docs/components/tree-menu/snippets/tree-menu.hbs
new file mode 100644
index 00000000..3777e13d
--- /dev/null
+++ b/docs/components/tree-menu/snippets/tree-menu.hbs
@@ -0,0 +1,45 @@
+---
+title: Tree menu
+layout: demo.hbs
+data:
+  - title: First parent
+    children:
+      - title: First child
+      - title: Second child
+      - title: Third child
+  - title: Second parent
+    children:
+      - title: First child
+      - title: Second child
+      - title: Third child
+  - title: Third parent
+    children:
+      - title: First child
+      - title: Second child
+      - title: Third child
+---
+<nav class="tree-menu" data-menu="collapsing">
+  <ul class="tree-menu__level is-open" data-level>
+    {{#each data}}
+      <li class="tree-menu__item">
+        <a class="tree-menu__link{{#if children}} tree-menu__link--parent{{/if}}" data-link href="#">
+          <span class="tree-menu__text">{{title}}</span>
+          {{#if children}}
+            {{> icon name="arrow-right" classes="tree-menu__link__parent-icon"}}
+          {{/if}}
+        </a>
+        {{#if children}}
+          <ul class="tree-menu__level" data-level>
+            {{#each children}}
+              <li class="tree-menu__item">
+                <a class="tree-menu__link" data-link href="#">
+                  <span class="tree-menu__text">{{title}}</span>
+                </a>
+              </li>
+            {{/each}}
+          </ul>
+        {{/if}}
+      </li>
+    {{/each}}
+  </ul>
+</nav>
diff --git a/scss/style/_tree-menu.scss b/scss/style/_tree-menu.scss
index 55c9d796..e87af97f 100644
--- a/scss/style/_tree-menu.scss
+++ b/scss/style/_tree-menu.scss
@@ -25,7 +25,7 @@
   transition: color $transition-fast $transition-easeout, background-color $transition-fast $transition-easeout;
 
   background-color: $color-white;
-  color: $color-dark-indigo;
+  color: $color-mineshaft;
 
   line-height: 1.3;
   text-decoration: none;
@@ -64,9 +64,18 @@
 
 // Level 2
 .tree-menu__level .tree-menu__level .tree-menu__link {
-  padding-left: (20px + 15px);
+  height: 40px;
+  padding-left: (20px + 25px);
 
+  background-color: inherit;
+  color: inherit;
+
+  &:hover,
+  &:focus,
+  &:active,
   &.is-active {
+    background-color: inherit;
+    color: $color-axa-blue;
   }
 }