Make sidebar hierarchy sticky

projectblacklight · Dec 5, 2023 · 64ff7fe · 64ff7fe
1 parent 7c1cc18
commit 64ff7fe
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/app/assets/stylesheets/arclight/modules/layout.scss b/app/assets/stylesheets/arclight/modules/layout.scss
@@ -61,10 +61,12 @@
 
 // offcanvas sidebar is scrollable for smaller screens
 #sidebar {
-  overflow-y: scroll;
-
   @include media-breakpoint-up(lg) {
-    overflow: hidden;
+    .sidebar-items {
+      height: 100vh;
+      overflow-y: auto;
+      position: sticky;
+    }
   }
 }
 

diff --git a/app/components/arclight/sidebar_component.html.erb b/app/components/arclight/sidebar_component.html.erb
@@ -1,9 +1,11 @@
 <div class="offcanvas-lg offcanvas-start p-3 p-lg-1" tabindex="-1" id="sidebar">
   <%= collection_context %>
   <%= render 'show_tools', document: document %>
-  <%= collection_sidebar %>
-  <div id="collection-context" class="sidebar-section">
-    <h2><%= t('arclight.views.show.has_content') %></h2>
-    <%= turbo_frame_tag "al-hierarchy-#{document.root}", loading: 'lazy', src: hierarchy_solr_document_path(id: document.root, nest_path: @document.nest_path, hierarchy: true) %>
+  <div class="sidebar-items">
+    <%= collection_sidebar %>
+    <div id="collection-context" class="sidebar-section">
+      <h2><%= t('arclight.views.show.has_content') %></h2>
+      <%= turbo_frame_tag "al-hierarchy-#{document.root}", loading: 'lazy', src: hierarchy_solr_document_path(id: document.root, nest_path: @document.nest_path, hierarchy: true) %>
+    </div>
   </div>
 </div>