collapse toc

This commit is contained in:
vcncolin
2024-07-02 15:00:13 +02:00
parent ec7434a5bc
commit 947c7e5b25
3 changed files with 33 additions and 10 deletions

View File

@@ -7,4 +7,4 @@ categories: index
# Sommaire Physique MPSI
[Come back later]("~/404.html")
[Come back later](~/404.html)

View File

@@ -5,13 +5,6 @@
<div class="footer-col-wrapper no-toc">
<div class="footer-col no-toc">
<p class="feed-subscribe no-toc">
<a href="{{ site.feed.path | default: 'feed.xml' | absolute_url }}">
<svg class="svg-icon orange no-toc">
<use xlink:href="{{ 'assets/minima-social-icons.svg#rss' | relative_url }}"></use>
</svg><span class="no-toc">Subscribe</span>
</a>
</p>
{%- if site.author %}
<ul class="contact-list no-toc">
{% if site.author.name -%}

View File

@@ -35,6 +35,25 @@
position: fixed;
height: 100%;
overflow-y: auto;
transition: transform 0.3s ease;
}
.toc.collapsed {
transform: translateX(-100%);
}
.toc-toggle-button {
position: fixed;
left: 250px;
top: 20px;
z-index: 1000;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
transition: left 0.3s ease;
}
.toc.collapsed + .toc-toggle-button {
left: 0;
}
.toc ul {
list-style-type: none;
@@ -48,6 +67,9 @@
padding: 20px;
flex: 1;
}
.toc.collapsed + .content {
margin-left: 20px;
}
</style>
<body>
@@ -60,6 +82,7 @@
<ul id="toc"></ul>
</nav>
</div>
<button class="toc-toggle-button">Toggle TOC</button>
<main class="content page-content" aria-label="Content">
<div class="wrapper">
@@ -71,12 +94,19 @@
<script>
document.addEventListener("DOMContentLoaded", function () {
const toc = document.getElementById("toc");
const toc = document.querySelector(".toc");
const toggleButton = document.querySelector(".toc-toggle-button");
toggleButton.addEventListener("click", function () {
toc.classList.toggle("collapsed");
});
const tocList = document.getElementById("toc");
const headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
const excludeClass = 'no-toc';
let currentLevel = 1;
let currentList = toc;
let currentList = tocList;
headers.forEach(header => {
if (header.classList.contains(excludeClass)) {