From cc39b3c0c959dccabf88c458aab9f6e863a7acef Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Thu, 13 Jan 2022 01:35:44 +0000
Subject: [PATCH] Make sidebar section headers sticky

---
 src/components/sidebar/SidebarSection.vue | 19 +++++++++++++------
 src/scss/_placeholders.scss               |  4 ----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/sidebar/SidebarSection.vue b/src/components/sidebar/SidebarSection.vue
index e3976ce..ce07030 100644
--- a/src/components/sidebar/SidebarSection.vue
+++ b/src/components/sidebar/SidebarSection.vue
@@ -100,19 +100,27 @@ export default defineComponent({
 			user-select: none;
 			text-align: left;
 			align-items: center;
-			margin: 0;
+			position: sticky;
+			top: -0.2rem;
+			background-color: inherit;
+			z-index: 10;
+			border-radius: inherit;
+			margin: -1.5rem -1.5rem 0;
+
+			&, button {
+				padding: 1.5rem;
+			}
 
 			button {
 				display: flex;
 				font-size: 2rem;
-				padding: 1.5rem 1.5rem 1rem;
-				margin: -1.5rem -1.5rem 0;
 				background-color: transparent;
 				font-weight: 400;
 				color: inherit;
 				width: calc(100% + 3rem);
 				align-items: center;
 				text-shadow: var(--text-shadow);
+				margin: -1.5rem;
 
 				.svg-icon {
 					margin-left: auto;
@@ -122,7 +130,7 @@ export default defineComponent({
 			}
 
 			&:hover, &:focus-visible, &.focus-visible, &:active {
-				background-color: transparent;
+				background-color: inherit;
 			}
 		}
 
@@ -155,8 +163,7 @@ export default defineComponent({
 					transform: none;
 				}
 
-				.section__heading button {
-					padding-bottom: 1.5rem;
+				.section__heading, .section__heading button {
 					margin-bottom: -1.5rem;
 				}
 
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index e79e348..77dc66e 100644
--- a/src/scss/_placeholders.scss
+++ b/src/scss/_placeholders.scss
@@ -54,8 +54,4 @@
 	flex-direction: column;
 	padding: 1.5rem;
 	position: relative;
-
-	h2:first-child {
-		margin-top: 0;
-	}
 }