Make sidebar sticky (#26)

* Make sidebar sticky * regenerated css/js --------- Co-authored-by: GitHub Actions <[email protected]>
LearnToDiscover · May 31, 2024 · 593fa51 · 593fa51
1 parent 828cf36
commit 593fa51
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 9 deletions.
diff --git a/inst/pkgdown/assets/assets/scripts.js b/inst/pkgdown/assets/assets/scripts.js
diff --git a/inst/pkgdown/assets/assets/styles.css b/inst/pkgdown/assets/assets/styles.css
diff --git a/inst/pkgdown/assets/assets/styles.css.map b/inst/pkgdown/assets/assets/styles.css.map
diff --git a/inst/pkgdown/templates/navbar.html b/inst/pkgdown/templates/navbar.html
@@ -1,20 +1,20 @@
 <!-- START: inst/pkgdown/templates/navbar.html -->
 <div id="sidebar-col" class="col-lg-4{{#overview}} overview-sidebar{{/overview}}">
-    <div id="sidebar" class="sidebar">
+    <div id="sidebar" class="sidebar" style="display: flex">
         <nav aria-labelledby="flush-headingEleven">
             <button
                 role="button"
                 aria-label="{{ translate.CloseMenu }}"
                 alt="{{ translate.CloseMenu }}"
                 aria-expanded="true"
                 aria-controls="sidebar"
-                class="collapse-toggle"
+                class="collapse-toggle sticky-top"
                 data-collapse="{{ translate.Collapse }} "
                 data-episodes="{{ translate.Episodes }} "
             >
                 <i class="search-icon" data-feather="x" role="img"></i>
             </button>
-            <div class="sidebar-inner">
+            <div class="sidebar-inner sticky-top">
                 <div class="row mobile-row">
                     <div class="col">
                         <div class="sidenav-view-selector">

diff --git a/source/javascripts/custom/menu.js b/source/javascripts/custom/menu.js
@@ -199,15 +199,15 @@ function showSidebarMobile(){
     setSidebarVisible(true);
     if (window.innerWidth < 768) {
         $sidebar.css({
-            display: '',
+            display: 'flex',
             position: 'absolute',
             top: '150px',
             left: '0px',
             right: '0px'
         });
     } else {
         $sidebar.css({
-            display: '',
+            display: 'flex',
             position: 'absolute',
             top: '200px',
             left: '0px',
@@ -242,6 +242,7 @@ function showSidebarDesktop(){
     var $sidebarInner   = $('.sidebar-inner');
     var $collapseToggle = $('.collapse-toggle');
     $sidebar.css({
+        display: 'flex',
         position: 'relative',
         top: '0px'
     });

diff --git a/source/stylesheets/sidenav.scss b/source/stylesheets/sidenav.scss
@@ -80,6 +80,7 @@
 }
 
 .collapse-toggle {
+  top: 10px;
   float: right;
   margin-right: 10px;
   margin-top: -25px;
@@ -99,6 +100,7 @@
 }
 
 .sidebar-inner {
+  top: 50px; // MM 2024-05-29: offset so it doesn't overlap with the "collapse" button
   margin-left: 65px;
   margin-right: 60px;
   padding-left: 20px;
@@ -154,7 +156,7 @@
 @include media-breakpoint-up(xl) {
 
   .sidebar {
-    display: block;
+    display: flex;
     position: relative;
     top: 0px;
     height:100%;