Hare/Decodal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Number manual sidebar navigation

Browse Source
This commit is contained in:
Keisuke Hirata 2026-06-17 13:37:53 +09:00
parent 4ab47e5719
commit aa6e5c51c1
No known key found for this signature in database
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
site/decodal-site/src/layouts/ManualLayout.astro
View File

@ -4,13 +4,14 @@ import '../style.css';
const { title = 'Decodal', active = '', playground = false } = Astro.props;
function renderNav(items) {
function renderNav(items, prefix = []) {
return `<ul class="nav-tree">${items
.map((item) => {
.map((item, index) => {
const number = [...prefix, index + 1];
const href = `/docs/${item.slug}/`;
const activeClass = active === item.slug ? ' class="active"' : '';
const children = item.children ? renderNav(item.children) : '';
return `<li><a${activeClass} href="${href}">${item.title}</a>${children}</li>`;
const children = item.children ? renderNav(item.children, number) : '';
return `<li><a${activeClass} href="${href}"><span class="nav-number">${number.join('.')}.</span>${item.title}</a>${children}</li>`;
})
.join('')}</ul>`;
}

13
site/decodal-site/src/style.css
View File

@ -80,18 +80,29 @@ a:hover {
.nav-tree a {
border-radius: 6px;
color: #374151;
display: block;
display: flex;
font-size: 14px;
gap: 6px;
line-height: 1.35;
padding: 4px 8px;
}
.nav-number {
color: #94a3b8;
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
}
.nav-tree a.active {
background: #dbeafe;
color: #1d4ed8;
font-weight: 600;
}
.nav-tree a.active .nav-number {
color: #2563eb;
}
main {
min-width: 0;
padding: 36px;