This version introduces an off-canvas panel for mobile users. By tapping the "[INDEX]" button in the top-left, the manuscript index slides in without displacing the content you are currently reading.
The layout uses CSS Transitions to ensure the movement feels like a physical drawer sliding open. Note how the "Tox Typewriter" font remains the focal point, even in the UI buttons.
// Navigation Toggle
function toggleMenu() {
const side = document.getElementById('sidebar');
const over = document.getElementById('overlay');
side.classList.toggle('open');
over.classList.toggle('active');
}
To ensure the best experience, an overlay appears behind the menu when it's open, allowing the reader to tap anywhere on the article to "close the drawer" and return to the text.