From fb3ba0953f5b03bb52a71582216867df924d2007 Mon Sep 17 00:00:00 2001
From: Josh Kriese <joshua.kriese@automox.com>
Date: Tue, 6 Sep 2022 10:29:13 -0400
Subject: [PATCH 1/2] Adding sticky header functionality for mobile sizes

---
 inst/resources/bs4_book/bs4_book.css | 48 +++++++++++++++++++++++++++-
 inst/templates/bs4_book.html         |  4 +--
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/inst/resources/bs4_book/bs4_book.css b/inst/resources/bs4_book/bs4_book.css
index 0bc45a0b1..c79a0bdd3 100644
--- a/inst/resources/bs4_book/bs4_book.css
+++ b/inst/resources/bs4_book/bs4_book.css
@@ -58,7 +58,53 @@ main {margin-top: 1rem;}
     padding-left: 1rem;
   }
   .sidebar-book {
-    margin-top: 1rem;
+    background-color: #fff;
+    padding-top: 1rem;
+    position: relative;
+    transition: .5s ease top;
+    top: -4rem;
+    transform: translateY(4rem);
+    z-index: 1
+  }
+  .sidebar-book .nav-toggle-btn {
+    height: 2.5rem;
+    /*! margin-left: 1rem; */
+  }
+  .sidebar-chapter #toc {
+    margin-top: 0;
+    transition: .5s ease margin-top;
+  }
+
+  .scrolled-to-toc .book-title {
+    width: calc(100% - 3rem);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 0;
+  }
+
+  .scrolled-to-toc .book-title a {
+    line-height: 2.5rem;
+  }
+
+  .scrolled-to-toc .book-title a::before {
+    display: none;
+  }
+
+  .scrolled-to-toc .sidebar-book {
+    background-color: #fff;
+    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
+    left: 0;
+    padding-bottom: .5rem;
+    padding-top: .5rem;
+    position: sticky;
+    top: 0;
+    transform: none;
+    z-index: 1
+  }
+
+  .scrolled-to-toc .sidebar-chapter #toc {
+    margin-top: 4rem;
   }
 }
 @media (min-width: 992px) {
diff --git a/inst/templates/bs4_book.html b/inst/templates/bs4_book.html
index 68578084c..b95fe0878 100644
--- a/inst/templates/bs4_book.html
+++ b/inst/templates/bs4_book.html
@@ -83,11 +83,11 @@
     <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
 
     <div class="d-flex align-items-start justify-content-between">
-      <h1>
+      <h1 class="book-title">
         <a href="index.html" title="$subtitle$">$title$</a>$if(subtitle)$:
         <small class="text-muted">$subtitle$</small>$endif$
       </h1>
-      <button class="btn btn-outline-primary d-lg-none ml-2 mt-1" type="button" data-toggle="collapse" data-target="#main-nav" aria-expanded="true" aria-controls="main-nav"><i class="fas fa-bars"></i><span class="sr-only">Show table of contents</span></button>
+      <button class="btn btn-outline-primary d-lg-none nav-toggle-btn" type="button" data-toggle="collapse" data-target="#main-nav" aria-expanded="true" aria-controls="main-nav"><i class="fas fa-bars"></i><span class="sr-only">Show table of contents</span></button>
     </div>
 
     <div id="main-nav" class="collapse-lg">

From 97d8d445fdd4891eb0d7a0e665a720acaf52d38a Mon Sep 17 00:00:00 2001
From: Josh Kriese <joshua.kriese@automox.com>
Date: Sat, 17 Sep 2022 16:11:17 -0400
Subject: [PATCH 2/2] update js and css to apply sticky nav for mobile

---
 inst/resources/bs4_book/bs4_book.css | 10 ++++----
 inst/resources/bs4_book/bs4_book.js  | 35 +++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/inst/resources/bs4_book/bs4_book.css b/inst/resources/bs4_book/bs4_book.css
index c79a0bdd3..85e2b3431 100644
--- a/inst/resources/bs4_book/bs4_book.css
+++ b/inst/resources/bs4_book/bs4_book.css
@@ -75,7 +75,7 @@ main {margin-top: 1rem;}
     transition: .5s ease margin-top;
   }
 
-  .scrolled-to-toc .book-title {
+  .scrolled-to-main .book-title {
     width: calc(100% - 3rem);
     white-space: nowrap;
     overflow: hidden;
@@ -83,15 +83,15 @@ main {margin-top: 1rem;}
     margin-bottom: 0;
   }
 
-  .scrolled-to-toc .book-title a {
+  .scrolled-to-main .book-title a {
     line-height: 2.5rem;
   }
 
-  .scrolled-to-toc .book-title a::before {
+  .scrolled-to-main .book-title a::before {
     display: none;
   }
 
-  .scrolled-to-toc .sidebar-book {
+  .scrolled-to-main .sidebar-book {
     background-color: #fff;
     box-shadow: 0 3px 8px rgba(0,0,0,0.3);
     left: 0;
@@ -103,7 +103,7 @@ main {margin-top: 1rem;}
     z-index: 1
   }
 
-  .scrolled-to-toc .sidebar-chapter #toc {
+  .scrolled-to-main .sidebar-chapter #toc {
     margin-top: 4rem;
   }
 }
diff --git a/inst/resources/bs4_book/bs4_book.js b/inst/resources/bs4_book/bs4_book.js
index 348d18285..0bdd89b32 100644
--- a/inst/resources/bs4_book/bs4_book.js
+++ b/inst/resources/bs4_book/bs4_book.js
@@ -20,7 +20,40 @@ $(function () {
     sanitize: false,
   });
   $('[data-toggle="tooltip"]').tooltip();
-})
+});
+
+// Sticky Nav ------------------------------------------------------------------
+
+$(function () {
+  const main = document.getElementById('content');
+  const header = document.querySelector('.sidebar-book');
+  let dist = 0;
+
+  // calculate distance to the content so we know when to transition to sticky mode
+  const setDist = () => {
+    dist = main.getBoundingClientRect().top + window.scrollY;
+  }
+
+  const toggleStickyLayoutClass = () => {
+    if (window.innerWidth > 991) return;
+    if (dist < window.scrollY) {
+      if (!document.body.classList.contains('scrolled-to-main')) {
+        main.style.paddingTop = 
+          `${Math.round(header.getBoundingClientRect().height - 56)}px`;
+        document.body.classList.add('scrolled-to-main');
+      }
+    } else if (document.body.classList.contains('scrolled-to-main')) {
+      document.body.classList.remove('scrolled-to-main');
+      main.style.paddingTop = null;
+    }
+  };
+
+  // set initial value
+  setDist();
+
+  window.addEventListener('scroll', toggleStickyLayoutClass);
+  window.addEventListener('resize', setDist);
+});
 
 // Search ----------------------------------------------------------------------