Make TOC sticky on guides

kamranahmedse · kamranahmedse · commit 266d357e2af7 · 2024-11-27T21:44:33.000+05:00
diff --git a/src/components/Guide/GuideContent.astro b/src/components/Guide/GuideContent.astro
@@ -22,7 +22,7 @@ const { frontmatter: guideFrontmatter, author } = guide;
 <article class='lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]'>
   {
     (showTableOfContent || showRelatedGuides) && (
-      <div class='bg-gradient-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
+      <div class='sticky top-0 lg:relative bg-gradient-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
         <RelatedGuides
           relatedTitle={guideFrontmatter?.relatedTitle}
           relatedGuides={guide?.relatedGuides || {}}

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ const { frontmatter: guideFrontmatter, author } = guide;`
`22`	`22`	`<article class='lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]'>`
`23`	`23`	`{`
`24`	`24`	`(showTableOfContent \|\| showRelatedGuides) && (`
`25`		`- <div class='bg-gradient-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>`
	`25`	`+ <div class='sticky top-0 lg:relative bg-gradient-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>`
`26`	`26`	`<RelatedGuides`
`27`	`27`	`relatedTitle={guideFrontmatter?.relatedTitle}`
`28`	`28`	`relatedGuides={guide?.relatedGuides \|\| {}}`