WIP: Introduce the tree-menu, make it nicer

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}}

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}}

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}}

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>

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';

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';

scss/style/_tree-menu.scss

@@ -0,0 +1,113 @@
+.tree-menu {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
+  list-style-type: none;
+}
+
+.tree-menu__item {
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.tree-menu__link {
+  @extend .typo-16;
+
+  display: flex;
+  align-items: center;
+
+  height: 50px;
+
+  padding: 0 20px;
+
+  transition: color $transition-fast $transition-easeout, background-color $transition-fast $transition-easeout;
+
+  background-color: $color-white;
+  color: $color-mineshaft;
+
+  line-height: 1.3;
+  text-decoration: none;
+
+  &:hover,
+  &: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__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 2
+.tree-menu__level .tree-menu__level .tree-menu__link {
+  height: 40px;
+  padding-left: (20px + 25px);
+
+  background-color: inherit;
+  color: inherit;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.is-active {
+    background-color: inherit;
+    color: $color-axa-blue;
+  }
+}
+
+.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: 2999px;
+
+  transition: max-height $transition-normal cubic-bezier(0.01, 0, 1, 0), visibility $transition-normal;
+  visibility: visible;
+}
+
+.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;
+}