Skip to content

Commit c5ab6fa

Browse files
author
Laurian Avrigeanu
committed
Make docs tree expandable and simplify header
1 parent 35d008f commit c5ab6fa

File tree

5 files changed

+107
-70
lines changed

5 files changed

+107
-70
lines changed

‎site/docs/docs.css‎

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@
1818
gap: 12px;
1919
}
2020

21-
.sidebar-toggle {
21+
.header-link {
22+
display: inline-flex;
23+
align-items: center;
24+
justify-content: center;
2225
min-height: 44px;
2326
padding: 0 16px;
2427
border: 1px solid rgba(255, 255, 255, 0.1);
@@ -27,11 +30,10 @@
2730
color: var(--text);
2831
font: inherit;
2932
font-weight: 700;
30-
cursor: pointer;
3133
}
3234

33-
.sidebar-toggle:hover,
34-
.sidebar-toggle:focus-visible {
35+
.header-link:hover,
36+
.header-link:focus-visible {
3537
background: rgba(255, 255, 255, 0.08);
3638
}
3739

@@ -42,10 +44,6 @@
4244
align-items: start;
4345
}
4446

45-
.sidebar-collapsed .docs-layout {
46-
grid-template-columns: minmax(0, 1fr);
47-
}
48-
4947
.docs-sidebar,
5048
.docs-content {
5149
background: var(--panel);
@@ -61,10 +59,6 @@
6159
padding: 20px 18px;
6260
}
6361

64-
.sidebar-collapsed .docs-sidebar {
65-
display: none;
66-
}
67-
6862
.sidebar-label {
6963
margin: 0 0 14px;
7064
color: var(--accent-cool);
@@ -81,18 +75,42 @@
8175
}
8276

8377
.tree-node > a,
84-
.tree-node ul a {
78+
.tree-node ul a,
79+
.tree-group-toggle {
8580
display: block;
81+
width: 100%;
8682
padding: 10px 12px;
8783
border-radius: 12px;
8884
color: var(--text);
8985
}
9086

91-
.tree-node > a {
87+
.tree-node > a,
88+
.tree-group-toggle {
9289
background: rgba(255, 255, 255, 0.04);
9390
font-weight: 700;
9491
}
9592

93+
.tree-group-toggle {
94+
position: relative;
95+
border: 0;
96+
text-align: left;
97+
font: inherit;
98+
cursor: pointer;
99+
}
100+
101+
.tree-group-toggle::after {
102+
position: absolute;
103+
top: 50%;
104+
right: 12px;
105+
transform: translateY(-50%);
106+
color: var(--muted);
107+
content: "+";
108+
}
109+
110+
.tree-group-toggle[aria-expanded="true"]::after {
111+
content: "-";
112+
}
113+
96114
.tree-node ul {
97115
margin-top: 10px;
98116
padding-left: 14px;
@@ -106,7 +124,9 @@
106124

107125
.tree-nav a:hover,
108126
.tree-nav a:focus-visible,
109-
.tree-nav a.active {
127+
.tree-nav a.active,
128+
.tree-group-toggle:hover,
129+
.tree-group-toggle:focus-visible {
110130
background: rgba(255, 255, 255, 0.05);
111131
color: var(--text);
112132
}

‎site/docs/docs.js‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
11
document.addEventListener("DOMContentLoaded", () => {
2-
const body = document.body;
3-
const toggleButtons = document.querySelectorAll("[data-sidebar-toggle]");
2+
const toggleButtons = document.querySelectorAll("[data-tree-toggle]");
43

5-
function syncButtons()
6-
{
7-
const isCollapsed = body.classList.contains("sidebar-collapsed");
8-
toggleButtons.forEach((button) =>
9-
{
10-
button.setAttribute("aria-expanded", (!isCollapsed).toString());
11-
button.textContent = isCollapsed ? "Show navigation" : "Hide navigation";
12-
});
13-
}
4+
toggleButtons.forEach((button) => {
5+
const targetId = button.getAttribute("aria-controls");
6+
if (!targetId) {
7+
return;
8+
}
9+
10+
const target = document.getElementById(targetId);
11+
if (!target) {
12+
return;
13+
}
1414

15-
toggleButtons.forEach((button) =>
16-
{
17-
button.addEventListener("click", () =>
18-
{
19-
body.classList.toggle("sidebar-collapsed");
20-
syncButtons();
15+
button.addEventListener("click", () => {
16+
const isExpanded = button.getAttribute("aria-expanded") === "true";
17+
button.setAttribute("aria-expanded", (!isExpanded).toString());
18+
target.hidden = isExpanded;
2119
});
2220
});
23-
24-
syncButtons();
2521
});

‎site/docs/getting-started.html‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,7 @@
2929
</span>
3030
</a>
3131
<div class="docs-header-controls">
32-
<button
33-
type="button"
34-
class="sidebar-toggle"
35-
data-sidebar-toggle
36-
aria-controls="docs-sidebar"
37-
aria-expanded="true">
38-
Hide navigation
39-
</button>
32+
<a class="header-link" href="./index.html">Docs</a>
4033
</div>
4134
</header>
4235

@@ -49,17 +42,31 @@
4942
<a href="./index.html">Docs Home</a>
5043
</li>
5144
<li class="tree-node expanded">
52-
<a href="./getting-started.html" class="active">Getting Started</a>
53-
<ul>
45+
<button
46+
type="button"
47+
class="tree-group-toggle"
48+
data-tree-toggle
49+
aria-controls="tree-getting-started"
50+
aria-expanded="false">
51+
Getting Started
52+
</button>
53+
<ul id="tree-getting-started" hidden>
5454
<li><a href="#wpf-mental-model">How WPF-style UI maps here</a></li>
5555
<li><a href="#without-viewmodel">Hello World without a ViewModel</a></li>
5656
<li><a href="#with-viewmodel">Hello World with a ViewModel</a></li>
5757
<li><a href="#host-it">Hooking the view into MonoGame</a></li>
5858
</ul>
5959
</li>
6060
<li class="tree-node expanded">
61-
<a href="./rendersurface.html">RenderSurface</a>
62-
<ul>
61+
<button
62+
type="button"
63+
class="tree-group-toggle"
64+
data-tree-toggle
65+
aria-controls="tree-rendersurface"
66+
aria-expanded="false">
67+
RenderSurface
68+
</button>
69+
<ul id="tree-rendersurface" hidden>
6370
<li><a href="./rendersurface.html#rendersurface-story">Why it exists</a></li>
6471
<li><a href="./rendersurface.html#rendersurface-modes">The three modes</a></li>
6572
<li><a href="./rendersurface.html#rendersurface-layout">Sizing and layout</a></li>

‎site/docs/index.html‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,7 @@
2929
</span>
3030
</a>
3131
<div class="docs-header-controls">
32-
<button
33-
type="button"
34-
class="sidebar-toggle"
35-
data-sidebar-toggle
36-
aria-controls="docs-sidebar"
37-
aria-expanded="true">
38-
Hide navigation
39-
</button>
32+
<a class="header-link" href="../index.html">Home</a>
4033
</div>
4134
</header>
4235

@@ -49,17 +42,31 @@
4942
<a href="./index.html" class="active">Docs Home</a>
5043
</li>
5144
<li class="tree-node expanded">
52-
<a href="./getting-started.html">Getting Started</a>
53-
<ul>
45+
<button
46+
type="button"
47+
class="tree-group-toggle"
48+
data-tree-toggle
49+
aria-controls="tree-getting-started"
50+
aria-expanded="false">
51+
Getting Started
52+
</button>
53+
<ul id="tree-getting-started" hidden>
5454
<li><a href="./getting-started.html#wpf-mental-model">How WPF-style UI maps here</a></li>
5555
<li><a href="./getting-started.html#without-viewmodel">Hello World without a ViewModel</a></li>
5656
<li><a href="./getting-started.html#with-viewmodel">Hello World with a ViewModel</a></li>
5757
<li><a href="./getting-started.html#host-it">Hooking the view into MonoGame</a></li>
5858
</ul>
5959
</li>
6060
<li class="tree-node expanded">
61-
<a href="./rendersurface.html">RenderSurface</a>
62-
<ul>
61+
<button
62+
type="button"
63+
class="tree-group-toggle"
64+
data-tree-toggle
65+
aria-controls="tree-rendersurface"
66+
aria-expanded="false">
67+
RenderSurface
68+
</button>
69+
<ul id="tree-rendersurface" hidden>
6370
<li><a href="./rendersurface.html#rendersurface-story">Why it exists</a></li>
6471
<li><a href="./rendersurface.html#rendersurface-modes">The three modes</a></li>
6572
<li><a href="./rendersurface.html#rendersurface-layout">Sizing and layout</a></li>

‎site/docs/rendersurface.html‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,7 @@
2929
</span>
3030
</a>
3131
<div class="docs-header-controls">
32-
<button
33-
type="button"
34-
class="sidebar-toggle"
35-
data-sidebar-toggle
36-
aria-controls="docs-sidebar"
37-
aria-expanded="true">
38-
Hide navigation
39-
</button>
32+
<a class="header-link" href="./index.html">Docs</a>
4033
</div>
4134
</header>
4235

@@ -49,17 +42,31 @@
4942
<a href="./index.html">Docs Home</a>
5043
</li>
5144
<li class="tree-node expanded">
52-
<a href="./getting-started.html">Getting Started</a>
53-
<ul>
45+
<button
46+
type="button"
47+
class="tree-group-toggle"
48+
data-tree-toggle
49+
aria-controls="tree-getting-started"
50+
aria-expanded="false">
51+
Getting Started
52+
</button>
53+
<ul id="tree-getting-started" hidden>
5454
<li><a href="./getting-started.html#wpf-mental-model">How WPF-style UI maps here</a></li>
5555
<li><a href="./getting-started.html#without-viewmodel">Hello World without a ViewModel</a></li>
5656
<li><a href="./getting-started.html#with-viewmodel">Hello World with a ViewModel</a></li>
5757
<li><a href="./getting-started.html#host-it">Hooking the view into MonoGame</a></li>
5858
</ul>
5959
</li>
6060
<li class="tree-node expanded">
61-
<a href="./rendersurface.html" class="active">RenderSurface</a>
62-
<ul>
61+
<button
62+
type="button"
63+
class="tree-group-toggle"
64+
data-tree-toggle
65+
aria-controls="tree-rendersurface"
66+
aria-expanded="false">
67+
RenderSurface
68+
</button>
69+
<ul id="tree-rendersurface" hidden>
6370
<li><a href="#rendersurface-story">Why it exists</a></li>
6471
<li><a href="#rendersurface-modes">The three modes</a></li>
6572
<li><a href="#rendersurface-layout">Sizing and layout</a></li>

0 commit comments

Comments
 (0)