Skip to content

Commit af7104f

Browse files
doupdoup
committed
Improve side menu in Book, Assets & Example (#327)
- In preparation for #315, add new `tree-menu` CSS component - Update Books, Assets & Example to use this new component - In Books only the active book section is automatically opened, other sections with sub-sections start closed - Assets/Examples are always open, but are collapsible https://user-images.githubusercontent.com/188612/162277066-bf9ab366-79ce-402e-af02-691ed2c4a279.mp4 https://user-images.githubusercontent.com/188612/162277084-cbbd3a9a-d436-4388-a7df-8e34d77433f0.mp4 https://user-images.githubusercontent.com/188612/162277125-924d7f84-b66a-47fb-ae08-c771a6a80a5a.mp4
1 parent c013524 commit af7104f

12 files changed

Lines changed: 209 additions & 73 deletions

File tree

‎sass/_mixins.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@mixin flex-center() {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
}

‎sass/_vars.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ $syntax-theme-background-hover: #414247;
2828
$default-image-background-color: #1b1b1b;
2929
$card-hover-background: #2f3033;
3030

31+
// Animation
32+
$duration-fast: 100ms;
33+
$duration: 250ms;
34+
3135
// General
3236
$content-top-margin: 30px;
3337
$default-padding: 15px;

‎sass/components/_book-nav.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
$inactive-nav-color: #999999;
22
$book-nav-width: 210px;
33

4-
@media screen and (max-width: 900px) {
4+
@media screen and (max-width: 980px) {
55
#show-book-nav:not(:checked) + .book-nav {
66
transform: translateX(calc(0px - #{$book-nav-width}));
77
}
@@ -16,10 +16,12 @@ $book-nav-width: 210px;
1616
}
1717

1818
.book-nav {
19+
box-sizing: border-box;
1920
margin-top: $default-padding;
2021
flex: 0 0 $book-nav-width;
2122
user-select: none;
2223
transition: transform 0.3s;
24+
padding-left: 8px;
2325
}
2426

2527
.book-nav-sections {

‎sass/components/_tree-menu.scss‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
.tree-menu {
2+
$hover-color: rgba($color-white, 0.1);
3+
$item-height: 32px;
4+
$border-radius: 4px;
5+
6+
margin: 0;
7+
padding: 0;
8+
position: relative;
9+
10+
// TODO: REMOVE THIS SNIPPET ONCE THE HEADER IS REFACTORED
11+
// vvv
12+
z-index: 2;
13+
14+
* {
15+
box-sizing: border-box;
16+
}
17+
// ^^^
18+
19+
&__state {
20+
display: none;
21+
}
22+
23+
&__item {
24+
list-style: none;
25+
26+
> .tree-menu {
27+
display: none;
28+
padding-left: 16px;
29+
}
30+
}
31+
32+
&__label {
33+
display: flex;
34+
border-radius: $border-radius;
35+
margin-bottom: 2px;
36+
opacity: 0.6;
37+
38+
&:hover {
39+
opacity: 1.0;
40+
background-color: $hover-color;
41+
}
42+
43+
&--with-chevron {
44+
.tree-menu__link {
45+
padding-right: 4px;
46+
}
47+
}
48+
}
49+
50+
&__link {
51+
display: flex;
52+
align-items: center;
53+
flex-grow: 1;
54+
padding: 4px 16px;
55+
min-height: $item-height;
56+
text-decoration: none;
57+
line-height: 1.25;
58+
font-size: 1rem;
59+
60+
&, &:focus, &:active, &:hover, &:link, &:visited {
61+
color: $color-white;
62+
}
63+
}
64+
65+
&__toggle {
66+
@include flex-center;
67+
68+
flex-shrink: 0;
69+
width: 44px;
70+
cursor: pointer;
71+
border-radius: $border-radius;
72+
user-select: none;
73+
74+
&:hover {
75+
background-color: $hover-color;
76+
}
77+
}
78+
79+
&__chevron {
80+
transition: transform $duration;
81+
transform: rotate(-90deg);
82+
}
83+
84+
&__item--active {
85+
// Target just the first label, ignore subsection labels
86+
> .tree-menu__label {
87+
background-color: $hover-color;
88+
opacity: 1.0;
89+
90+
.tree-menu__link {
91+
color: $color-white;
92+
}
93+
}
94+
}
95+
96+
// Sub-menu open state
97+
&__state:checked + .tree-menu__item {
98+
> .tree-menu__label .tree-menu__chevron {
99+
transform: rotate(0deg);
100+
}
101+
102+
> .tree-menu {
103+
display: block;
104+
}
105+
}
106+
}

‎sass/pages/_book.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,15 @@ $pager-bar-background-color-in: #29292c;
6666
height: 100%;
6767
width: $pager-bar-width;
6868
transition: 0.2s;
69+
z-index: 1;
6970
}
7071

7172
.book-pager-bar-previous:hover {
72-
background-image: linear-gradient(to right, #00000000, rgba($pager-bar-background-color-in, 100), rgba($pager-bar-background-color-in, 255));
73+
background-image: linear-gradient(to right, #00000000, rgba($pager-bar-background-color-in, 0.75));
7374
}
7475

7576
.book-pager-bar-next:hover {
76-
background-image: linear-gradient(to left, #00000000, rgba($pager-bar-background-color-in, 100), rgba($pager-bar-background-color-in, 255));
77+
background-image: linear-gradient(to left, #00000000, rgba($pager-bar-background-color-in, 0.75));
7778
}
7879

7980
.book-pager-bar-previous {
@@ -118,4 +119,4 @@ $pager-bar-icon-width: 200px;
118119
.book-pager-bar-icon-next {
119120
position: absolute;
120121
left: -$pager-bar-icon-width;
121-
}
122+
}

‎sass/site.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
// Core
44
@import 'vars';
5+
@import 'mixins';
56

67
// Fonts
78
@import 'fonts/firamono';
@@ -24,6 +25,7 @@
2425
@import "components/sponsors";
2526
@import "components/item-grid";
2627
@import "components/syntax-theme";
28+
@import "components/tree-menu";
2729

2830
// Pages
2931
// - Page specific CSS

‎static/assets/icon-chevron-down.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎templates/assets.html‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,7 @@
55
<div class="assets">
66
<input type="checkbox" style="display: none" id="show-book-nav" />
77
<nav class="book-nav" role="navigation">
8-
<ul class="book-nav-sections-container book-nav-sections">
9-
{% for subsection in section.subsections %}
10-
{% set section = get_section(path=subsection) %}
11-
<li class="book-nav-section">
12-
<a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
13-
{% if section.subsections %}
14-
<ul class="book-nav-sections book-nav-sections-indented">
15-
{% set subsections = section.subsections %}
16-
{% if section.extra.sort_order_reversed %}
17-
{% set subsections = section.subsections | reverse %}
18-
{% endif %}
19-
{% for subsection in subsections %}
20-
{% set section = get_section(path=subsection) %}
21-
<li class="book-nav-section">
22-
<a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
23-
</li>
24-
25-
{% endfor %}
26-
</ul>
27-
{% endif %}
28-
</li>
29-
{% endfor %}
30-
</ul>
8+
{{assets_macros::assets_menu(prefix="page-menu", root=section)}}
319
</nav>
3210
<div class="book-content">
3311
{% for subsection in section.subsections %}

‎templates/book-section.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,7 @@
99
<div class="book-page">
1010
<input type="checkbox" style="display: none" id="show-book-nav" />
1111
<nav class="book-nav" role="navigation">
12-
{% block menu %}
13-
{% set index = get_section(path="learn/book/_index.md") %}
14-
<ul class="book-nav-sections-container book-nav-sections">
15-
{% for s in index.subsections %}
16-
{{ book_macros::book_nav_section(section_path=s, section_number=loop.index) }}
17-
{% endfor %}
18-
</ul>
19-
{% endblock menu %}
12+
{{book_macros::book_menu(prefix="page-menu", root=get_section(path="learn/book/_index.md"))}}
2013
</nav>
2114
<div class="book-content">
2215
{% set root_section = get_section(path="learn/book/_index.md") %}

‎templates/examples.html‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,11 @@
11
{% extends "layouts/base.html" %}
2+
{% import "macros/assets.html" as assets_macros %}
23

34
{% block content %}
45
<div class="assets">
56
<input type="checkbox" style="display: none" id="show-book-nav" />
67
<nav class="book-nav" role="navigation">
7-
<ul class="book-nav-sections-container book-nav-sections">
8-
{% for subsection in section.subsections %}
9-
{% set section = get_section(path=subsection) %}
10-
<li class="book-nav-section">
11-
<a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
12-
{% if section.subsections %}
13-
<ul class="book-nav-sections book-nav-sections-indented">
14-
{% set subsections = section.subsections %}
15-
{% if section.extra.sort_order_reversed %}
16-
{% set subsections = section.subsections | reverse %}
17-
{% endif %}
18-
{% for subsection in subsections %}
19-
{% set section = get_section(path=subsection) %}
20-
<li class="book-nav-section">
21-
<a href="#{{ section.title | slugify }}" class="book-nav-section-title">{{ section.title }}</a>
22-
</li>
23-
24-
{% endfor %}
25-
</ul>
26-
{% endif %}
27-
</li>
28-
{% endfor %}
29-
</ul>
8+
{{assets_macros::assets_menu(prefix="page-menu", root=section)}}
309
</nav>
3110
<div class="book-content">
3211
{% for subsection in section.subsections %}

0 commit comments

Comments
 (0)