rushjs.io-website/_layouts/page.html

49 строки
1.7 KiB
HTML

---
layout: default
---
<div class="container-fluid docsite-main">
<div class="row">
{% comment %} Only for large displays, appears behind scripted-sidebar to reserve its space {% endcomment %}
<div class="docsite-sidebar-placeholder d-none d-md-block col-3"> </div>
{% comment %} Only for large displays {% endcomment %}
<nav id="scripted-sidebar" class="d-none d-md-block docsite-sidebar">
{% include base/side_nav.html %}
</nav>
{% comment %} Used instead for small displays {% endcomment %}
<div class="col-1 d-block d-md-none"></div>
{% comment %} For small displays this takes 10 columns, for large displays 8 columns {% endcomment %}
<article role="main" class="col-10 col-md-8 px-4">
<div class="pt-3 pb-2 mb-3">
<h1>{{ page.title }}</h1>
<div class="entry">
{{ content }}
</div>
</div>
</article>
<div class="col-1"></div>
</div>
</div>
<script>
function updateScriptedSidebar() {
let sidebar = document.getElementById('scripted-sidebar');
let mainFooter = document.getElementById('scripted-footer');
if (sidebar && mainFooter) {
// When the footer scrolls into view, reduce the sidebar height so that it
// doesn't overlap the footer. Bootstrap 4 removed the "Affix" plugin, so
// we need custom script for this.
let nudge = Math.max(window.innerHeight - mainFooter.getBoundingClientRect().top, 0);
sidebar.style.setProperty('--scripted-sidebar-nudge', nudge + 'px');
}
}
window.addEventListener("scroll", updateScriptedSidebar);
window.addEventListener("resize", updateScriptedSidebar);
window.addEventListener("load", updateScriptedSidebar);
</script>