diff --git a/_static/css/rtd_theme_mods.css b/_static/css/rtd_theme_mods.css index b9efc90..ea8f540 100644 --- a/_static/css/rtd_theme_mods.css +++ b/_static/css/rtd_theme_mods.css @@ -125,3 +125,83 @@ aside.sidebar { width: 40%; float: right; } + +/* Desktop sidebar toggle. RTD switches to its mobile navigation at 768px. */ +.wy-breadcrumbs > .desktop-sidebar-toggle-item { + display: none; +} + +@media screen and (min-width: 769px) { + html.desktop-sidebar-toggle-ready .wy-breadcrumbs > li { + vertical-align: middle; + } + + html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle-item { + position: fixed; + top: 1.618em; + left: 8px; + z-index: 201; + display: block; + padding: 0; + /* Keep the control in the content gutter beside RTD's 300px sidebar. */ + transform: translateX(300px); + transition: transform 0.3s ease; + } + + html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle { + display: inline-flex; + width: 32px; + height: 32px; + align-items: center; + justify-content: center; + padding: 0; + border: 0; + border-radius: 3px; + background: transparent; + color: #646464; + cursor: pointer; + font-size: 16px; + line-height: 1; + transition: color 0.15s ease, background-color 0.15s ease; + } + + html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle:hover { + background: #eef4f8; + color: #2980b9; + } + + html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle:focus-visible { + outline: 2px solid #2980b9; + outline-offset: 2px; + } + + html.desktop-sidebar-toggle-ready .wy-nav-side { + transition: transform 0.3s ease, visibility 0s linear; + } + + html.desktop-sidebar-toggle-ready .wy-nav-content-wrap { + transition: margin-left 0.3s ease; + } + + html.sidebar-collapsed .wy-nav-side { + transform: translateX(-100%); + visibility: hidden; + transition-delay: 0s, 0.3s; + } + + html.sidebar-collapsed .wy-nav-content-wrap { + margin-left: 0; + } + + html.sidebar-collapsed .desktop-sidebar-toggle-item { + transform: translateX(0); + } + + @media (prefers-reduced-motion: reduce) { + html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle-item, + html.desktop-sidebar-toggle-ready .wy-nav-side, + html.desktop-sidebar-toggle-ready .wy-nav-content-wrap { + transition: none; + } + } +} diff --git a/_static/js/desktop-sidebar.js b/_static/js/desktop-sidebar.js new file mode 100644 index 0000000..62364c7 --- /dev/null +++ b/_static/js/desktop-sidebar.js @@ -0,0 +1,47 @@ +(function () { + 'use strict'; + + var storageKey = '7e-sidebar-collapsed'; + var root = document.documentElement; + + function initializeSidebarToggle() { + var toggle = document.querySelector('.desktop-sidebar-toggle'); + var sidebar = document.querySelector('.wy-nav-side'); + + if (!toggle || !sidebar) { + return; + } + + if (!sidebar.id) { + sidebar.id = 'wy-nav-side'; + } + toggle.setAttribute('aria-controls', sidebar.id); + + function updateToggle() { + var expanded = !root.classList.contains('sidebar-collapsed'); + var label = expanded ? 'Hide navigation sidebar' : 'Show navigation sidebar'; + toggle.setAttribute('aria-expanded', String(expanded)); + toggle.setAttribute('aria-label', label); + toggle.setAttribute('title', label); + } + + updateToggle(); + + toggle.addEventListener('click', function () { + var collapsed = root.classList.toggle('sidebar-collapsed'); + updateToggle(); + + try { + window.localStorage.setItem(storageKey, String(collapsed)); + } catch (error) { + // The current page still works if browser storage is unavailable. + } + }); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeSidebarToggle, { once: true }); + } else { + initializeSidebarToggle(); + } +})(); diff --git a/_templates/breadcrumbs.html b/_templates/breadcrumbs.html new file mode 100644 index 0000000..2c8406b --- /dev/null +++ b/_templates/breadcrumbs.html @@ -0,0 +1,11 @@ +{% extends "!breadcrumbs.html" %} +{% block breadcrumbs %} +
  • + +
  • +{{ super() }} +{% endblock %} diff --git a/_templates/layout.html b/_templates/layout.html index 577c6dc..3b52a0a 100644 --- a/_templates/layout.html +++ b/_templates/layout.html @@ -1,4 +1,20 @@ {% extends "!layout.html" %} +{% block extrahead %} +{{ super() }} + +{% endblock %} {% block navigation %} {{ super() }}