Merge pull request #1814 from insectengine/docs_stickytoc

refactor TOC to be sticky
quarkusio · Oct 18, 2023 · e6ef9f4 · e6ef9f4
2 parents 65d0650 + 1428a36
commit e6ef9f4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/_layouts/guides.html b/_layouts/guides.html
@@ -48,13 +48,11 @@
 </section>
 
 <div class="grid-wrapper guide">
-  <div class="grid__item width-12-12 width-12-12-mobile">
+  <div class="grid__item width-8-12 width-12-12-m">
     <h1 class="text-caps">{{page.title}} {{page.docversion}}</h1>
+    {{ content }}
   </div>
-  <div class="width-12-12">
+  <div class="grid__item width-4-12 width-12-12-m tocwrapper">
     <div class="hide-mobile toc">{{ page.document | tocify_asciidoc: 2 }}</div>
-    <div>
-      {{ content }}
-    </div>
   </div>
 </div>
diff --git a/_sass/layouts/guide.scss b/_sass/layouts/guide.scss
@@ -20,14 +20,23 @@ body.guides-configuration-reference div.guides-configuration-reference {
   }
   .line-through{ color: $dark-blue-alt; text-decoration:line-through}
 
+  .tocwrapper {
+  display: flex;
+  }
+
   .toc {
-    float: right;
-    width: 350px;
-    padding-right: 20px;
-    margin-left: 20px;
-    margin-bottom: 20px;
+    position: sticky;
+    top: 1rem;
+    padding: 1rem 1.5rem 1rem 0rem;
+    margin: 1rem;
     background-color: $grey-0;
     word-wrap: break-word;
+    max-height: 90vh;
+    overflow-y: auto;
+    width: 100%;
+    align-self: start;
+
+
     ul {
       list-style: none;
     }