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

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

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