From 55eb001aa87941c2a5f8bde67568f29abc48fc6c Mon Sep 17 00:00:00 2001
From: Eike Kettner <eike.kettner@posteo.de>
Date: Sun, 14 Feb 2021 16:01:45 +0100
Subject: [PATCH] Make menus sticky when scrolling content

---
 website/site/templates/page.html    | 6 ++++--
 website/site/templates/pages.html   | 6 ++++--
 website/site/templates/section.html | 6 ++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/website/site/templates/page.html b/website/site/templates/page.html
index 376bccc2..09531b59 100644
--- a/website/site/templates/page.html
+++ b/website/site/templates/page.html
@@ -27,7 +27,8 @@
                 </div>
             </div>
         </section>
-        <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
+        <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"
+             style="position:sticky; top: 0; z-index:10;">
             <ul>
                 {% for parent in page.ancestors %}
                 {% set s = get_section(path = parent, metadata_only = true) %}
@@ -44,7 +45,8 @@
         <section class="section pt-2">
             <div class="columns is-desktop">
                 <div class="column is-3">
-                    <div class="menu">
+                    <div class="menu"
+                         style="position:sticky; top:2rem; z-index:10;">
                         <ul class="menu-list">
                             {% set last = page.ancestors | last %}
                             {% set s = get_section(path=last) %}
diff --git a/website/site/templates/pages.html b/website/site/templates/pages.html
index c3b30dc0..95c6bd66 100644
--- a/website/site/templates/pages.html
+++ b/website/site/templates/pages.html
@@ -27,7 +27,8 @@
                 </div>
             </div>
         </section>
-        <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
+        <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"
+             style="position:sticky; top: 0; z-index:10;" >
             <ul>
                 {% for parent in section.ancestors %}
                 {% set s = get_section(path = parent, metadata_only = true) %}
@@ -44,7 +45,8 @@
         <div class="container">
             <div class="columns">
                 <div class="column is-3">
-                    <aside class="menu">
+                    <aside class="menu"
+                           style="position:sticky; top:2rem; z-index:10;">
                         <p class="menu-label">
                             Contents
                         </p>
diff --git a/website/site/templates/section.html b/website/site/templates/section.html
index 3b992eb2..2a871a31 100644
--- a/website/site/templates/section.html
+++ b/website/site/templates/section.html
@@ -27,7 +27,8 @@
                 </div>
             </div>
         </section>
-        <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
+        <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"
+             style="position:sticky; top: 0; z-index:10;">
             <ul>
                 {% for parent in section.ancestors %}
                 {% set s = get_section(path = parent, metadata_only = true) %}
@@ -44,7 +45,8 @@
         <section class="section pt-2">
             <div class="columns is-desktop">
                 <div class="column is-3">
-                    <div class="menu">
+                    <div class="menu"
+                         style="position:sticky; top:2rem; z-index:10;">
                         <ul class="menu-list">
                             {% for header in section.toc %}
                             <li>