feat: add TOC sidebar for README and Markdown files

- Add floating TOC panel that displays table of contents for README and markdown files
- Implement toggle button to show/hide TOC panel
- Add localStorage persistence for TOC panel visibility state
- Support both README in repo root and individual markdown file views
- Add responsive design for mobile screens
This commit is contained in:
hamki committed 2026-01-26 16:50:40 +08:00
1 parent 4c8f6dfa4e
commit 3b4f74cbf1
6 files changed
+199 -43

No files matched your search

+89
View File
@@ -105,3 +105,92 @@
padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
text-decoration: none;
}
/* File view with TOC sidebar */
.file-view-container {
position: relative;
}
.file-view-container .file-view {
width: 100%;
}
/* TOC as a floating sidebar panel */
.file-view-toc {
position: fixed;
top: 60px;
right: 0;
width: 280px;
max-height: calc(100vh - 80px);
overflow-y: auto;
padding: 1rem;
background: var(--color-body);
border: 1px solid var(--color-secondary);
border-right: none;
border-radius: var(--border-radius) 0 0 var(--border-radius);
box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
z-index: 100;
transform: translateX(0);
transition: transform 0.25s ease-in-out;
}
/* Hidden state - using custom class to avoid Tailwind conflicts */
.file-view-toc.toc-panel-hidden {
transform: translateX(100%);
}
.file-view-toc details {
font-size: 13px;
}
.file-view-toc summary {
font-weight: 600;
cursor: pointer;
padding: 8px 0;
color: var(--color-text);
border-bottom: 1px solid var(--color-secondary);
margin-bottom: 8px;
}
.file-view-toc ul {
margin: 0;
list-style: none;
padding: 5px 0 5px 1em;
}
.file-view-toc ul ul {
border-left: 1px dashed var(--color-secondary);
}
.file-view-toc a {
display: block;
padding: 6px 10px;
color: var(--color-text);
text-decoration: none;
font-size: 13px;
line-height: 1.4;
border-radius: var(--border-radius);
}
.file-view-toc a:hover {
color: var(--color-primary);
background: var(--color-hover);
}
/* TOC toggle button active state - when TOC is visible */
#toggle-toc-btn.active {
color: var(--color-primary);
background: var(--color-hover);
}
/* Hide TOC sidebar on small screens */
@media (max-width: 768px) {
.file-view-toc {
width: 100%;
max-width: 300px;
}
#toggle-toc-btn {
display: none;
}
}