[Merged by Bors] - Improve side menu in Book, Assets & Example

sass/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin flex-center() {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

sass/_vars.scss

@@ -28,6 +28,10 @@ $syntax-theme-background-hover: #414247;
 $default-image-background-color: #1b1b1b;
 $card-hover-background: #2f3033;
 
+// Animation
+$duration-fast: 100ms;
+$duration: 250ms;
+
 // General
 $content-top-margin: 30px;
 $default-padding: 15px;

sass/components/_book-nav.scss

@@ -1,7 +1,7 @@
 $inactive-nav-color: #999999;
 $book-nav-width: 210px;
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 980px) {
     #show-book-nav:not(:checked) + .book-nav {
         transform: translateX(calc(0px - #{$book-nav-width}));
     }
@@ -16,10 +16,12 @@ $book-nav-width: 210px;
 }
 
 .book-nav {
+    box-sizing: border-box;
     margin-top: $default-padding;
     flex: 0 0 $book-nav-width;
     user-select: none;
     transition: transform 0.3s;
+    padding-left: 8px;
 }
 
 .book-nav-sections {

sass/components/_tree-menu.scss

@@ -0,0 +1,106 @@
+.tree-menu {
+    $hover-color: rgba($color-white, 0.1);
+    $item-height: 32px;
+    $border-radius: 4px;
+
+    margin: 0;
+    padding: 0;
+    position: relative;
+
+    // TODO: REMOVE THIS SNIPPET ONCE THE HEADER IS REFACTORED
+    // vvv
+    z-index: 2;
+
+    * {
+        box-sizing: border-box;
+    }
+    // ^^^
+
+    &__state {
+        display: none;
+    }
+
+    &__item {
+        list-style: none;
+
+        > .tree-menu {
+            display: none;
+            padding-left: 16px;
+        }
+    }
+
+    &__label {
+        display: flex;
+        border-radius: $border-radius;
+        margin-bottom: 2px;
+        opacity: 0.6;
+
+        &:hover {
+            opacity: 1.0;
+            background-color: $hover-color;
+        }
+
+        &--with-chevron {
+            .tree-menu__link {
+                padding-right: 4px;
+            }
+        }
+    }
+
+    &__link {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        padding: 4px 16px;
+        min-height: $item-height;
+        text-decoration: none;
+        line-height: 1.25;
+        font-size: 1rem;
+
+        &, &:focus, &:active, &:hover, &:link, &:visited {
+            color: $color-white;
+        }
+    }
+
+    &__toggle {
+        @include flex-center;
+
+        flex-shrink: 0;
+        width: 44px;
+        cursor: pointer;
+        border-radius: $border-radius;
+        user-select: none;
+
+        &:hover {
+            background-color: $hover-color;
+        }
+    }
+
+    &__chevron {
+        transition: transform $duration;
+        transform: rotate(-90deg);
+    }
+
+    &__item--active {
+        // Target just the first label, ignore subsection labels
+        > .tree-menu__label {
+            background-color: $hover-color;
+            opacity: 1.0;
+
+            .tree-menu__link {
+                color: $color-white;
+            }
+        }
+    }
+
+    // Sub-menu open state
+    &__state:checked + .tree-menu__item {
+        > .tree-menu__label .tree-menu__chevron {
+            transform: rotate(0deg);
+        }
+
+        > .tree-menu {
+            display: block;
+        }
+    }
+}

sass/pages/_book.scss

@@ -66,14 +66,15 @@ $pager-bar-background-color-in: #29292c;
     height: 100%;
     width: $pager-bar-width;
     transition: 0.2s;
+    z-index: 1;
 }
 
 .book-pager-bar-previous:hover {
-    background-image: linear-gradient(to right, #00000000, rgba($pager-bar-background-color-in, 100), rgba($pager-bar-background-color-in, 255));
+    background-image: linear-gradient(to right, #00000000, rgba($pager-bar-background-color-in, 0.75));
 }
 
 .book-pager-bar-next:hover {
-    background-image: linear-gradient(to left, #00000000, rgba($pager-bar-background-color-in, 100), rgba($pager-bar-background-color-in, 255));
+    background-image: linear-gradient(to left, #00000000, rgba($pager-bar-background-color-in, 0.75));
 }
 
 .book-pager-bar-previous {
@@ -118,4 +119,4 @@ $pager-bar-icon-width: 200px;
 .book-pager-bar-icon-next {
     position: absolute;
     left: -$pager-bar-icon-width;
-}
+}

sass/site.scss

@@ -2,6 +2,7 @@
 
 // Core
 @import 'vars';
+@import 'mixins';
 
 // Fonts
 @import 'fonts/firamono';
@@ -24,6 +25,7 @@
 @import "components/sponsors";
 @import "components/item-grid";
 @import "components/syntax-theme";
+@import "components/tree-menu";
 
 // Pages
 // - Page specific CSS

templates/assets.html

@@ -5,29 +5,7 @@
 <div class="assets">
     <input type="checkbox" style="display: none" id="show-book-nav" />
     <nav class="book-nav" role="navigation">
-        <ul class="book-nav-sections-container book-nav-sections">
-            {% for subsection in section.subsections %}
-            {% set section = get_section(path=subsection) %}
-            <li class="book-nav-section">
-                <a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
-                {% if section.subsections %}
-                <ul class="book-nav-sections book-nav-sections-indented">
-                    {% set subsections = section.subsections %}
-                    {% if section.extra.sort_order_reversed %}
-                    {% set subsections = section.subsections | reverse %}
-                    {% endif %}
-                    {% for subsection in subsections %}
-                    {% set section = get_section(path=subsection) %}
-                    <li class="book-nav-section">
-                        <a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
-                    </li>
-
-                    {% endfor %}
-                </ul>
-                {% endif %}
-            </li>
-            {% endfor %}
-        </ul>
+        {{assets_macros::assets_menu(prefix="page-menu", root=section)}}
     </nav>
     <div class="book-content">
         {% for subsection in section.subsections %}

templates/book-section.html

@@ -9,14 +9,7 @@
 <div class="book-page">
     <input type="checkbox" style="display: none" id="show-book-nav" />
     <nav class="book-nav" role="navigation">
-        {% block menu %}
-        {% set index = get_section(path="learn/book/_index.md") %}
-        <ul class="book-nav-sections-container book-nav-sections">
-            {% for s in index.subsections %}
-            {{ book_macros::book_nav_section(section_path=s, section_number=loop.index) }}
-            {% endfor %}
-        </ul>
-        {% endblock menu %}
+        {{book_macros::book_menu(prefix="page-menu", root=get_section(path="learn/book/_index.md"))}}
     </nav>
     <div class="book-content">
         {% set root_section = get_section(path="learn/book/_index.md") %}

templates/examples.html

@@ -1,32 +1,11 @@
 {% extends "layouts/base.html" %}
+{% import "macros/assets.html" as assets_macros %}
 
 {% block content %}
 <div class="assets">
     <input type="checkbox" style="display: none" id="show-book-nav" />
     <nav class="book-nav" role="navigation">
-        <ul class="book-nav-sections-container book-nav-sections">
-            {% for subsection in section.subsections %}
-            {% set section = get_section(path=subsection) %}
-            <li class="book-nav-section">
-                <a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
-                {% if section.subsections %}
-                <ul class="book-nav-sections book-nav-sections-indented">
-                    {% set subsections = section.subsections %}
-                    {% if section.extra.sort_order_reversed %}
-                    {% set subsections = section.subsections | reverse %}
-                    {% endif %}
-                    {% for subsection in subsections %}
-                    {% set section = get_section(path=subsection) %}
-                    <li class="book-nav-section">
-                        <a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
-                    </li>
-
-                    {% endfor %}
-                </ul>
-                {% endif %}
-            </li>
-            {% endfor %}
-        </ul>
+        {{assets_macros::assets_menu(prefix="page-menu", root=section)}}
     </nav>
     <div class="book-content">
         {% for subsection in section.subsections %}

templates/macros/assets.html

@@ -15,3 +15,40 @@
     </a>
 </div>
 {% endmacro card %}
+
+{% macro assets_menu_row(prefix, section_path) %}
+    {% set section = get_section(path=section_path) %}
+    {% set id = prefix ~ '-' ~ section.path | slugify %}
+    {% set label_class = "tree-menu__label" %}
+
+    {% if section.subsections %}
+        {% set label_class = label_class ~ " tree-menu__label--with-chevron" %}
+        <input id="{{id}}" class="tree-menu__state" type="checkbox" checked>
+    {% endif %}
+
+    <li class="tree-menu__item">
+        <div class="{{label_class}}">
+            <a class="tree-menu__link" href="#{{section.title | slugify}}">{{ section.title }}</a>
+            {% if section.subsections %}
+                <label class="tree-menu__toggle" for="{{id}}">
+                    <img class="tree-menu__chevron" src="/assets/icon-chevron-down.svg">
+                </label>
+            {% endif %}
+        </div>
+        {% if section.subsections %}
+            <ul class="tree-menu">
+                {% for s in section.subsections %}
+                    {{ self::assets_menu_row(prefix=prefix, section_path=s) }}
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </li>
+{% endmacro %}
+
+{% macro assets_menu(root, prefix) %}
+    <ul class="tree-menu">
+        {% for s in root.subsections %}
+            {{ self::assets_menu_row(prefix=prefix, section_path=s)}}
+        {% endfor %}
+    </ul>
+{% endmacro %}

templates/macros/book.html

@@ -1,17 +1,43 @@
-{% macro book_nav_section(section_path, section_number) %}
-{% set section = get_section(path=section_path) %}
-<li class="book-nav-section">
-    <a href="{{ section.path }}" {% if current_path == section.path %}class="book-nav-section-title-active book-nav-section-title" {% else %}class="book-nav-section-title"{% endif %}>
-        <strong class="book-nav-section-number">{{ section_number }}.</strong>
-        {{ section.title | lower }}
-    </a>
-    {% if section.subsections and section.path in current_path %}
-    <ul class="book-nav-sections book-nav-sections-indented">
-        {% for s in section.subsections %}
-        {% set subsection_number = section_number ~ "." ~ loop.index %}
-        {{ book_macros::book_nav_section(section_path=s, section_number=subsection_number) }}
+{% macro book_menu_row(prefix, section_path) %}
+    {% set section = get_section(path=section_path) %}
+    {% set is_in_branch = section.path in current_path %}
+    {% set is_active = current_path == section.path %}
+    {% set id = prefix ~ '-' ~ section.path | slugify %}
+    {% set class = "tree-menu__item" %}
+    {% set label_class = "tree-menu__label" %}
+
+    {% if is_active %}
+        {% set class = class ~ " tree-menu__item--active" %}
+    {% endif %}
+
+    {% if section.subsections %}
+        {% set label_class = label_class ~ " tree-menu__label--with-chevron" %}
+        <input id="{{id}}" class="tree-menu__state" type="checkbox" {% if is_in_branch %}checked{% endif %}>
+    {% endif %}
+
+    <li class="{{class}}">
+        <div class="{{label_class}}">
+            <a class="tree-menu__link" href="{{section.path}}">{{ section.title }}</a>
+            {% if section.subsections %}
+                <label class="tree-menu__toggle" for="{{id}}">
+                    <img class="tree-menu__chevron" src="/assets/icon-chevron-down.svg">
+                </label>
+            {% endif %}
+        </div>
+        {% if section.subsections %}
+            <ul class="tree-menu">
+                {% for s in section.subsections %}
+                    {{ self::book_menu_row(prefix=prefix, section_path=s) }}
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </li>
+{% endmacro book_menu_row %}
+
+{% macro book_menu(root, prefix) %}
+    <ul class="tree-menu">
+        {% for s in root.subsections %}
+            {{ self::book_menu_row(prefix=prefix, section_path=s) }}
         {% endfor %}
     </ul>
-    {% endif %}
-</li>
-{% endmacro book_nav_section %}
+{% endmacro %}