Highlight current section in the nav

src/Elastic.Documentation.Site/Assets/styles.css

@@ -178,6 +178,82 @@ body {
 	@apply text-blue-elastic! font-semibold;
 }
 
+/* Grey-10 background for active sections */
+#pages-nav li {
+	position: relative;
+}
+
+/* Highlight the active section: parent li and all sibling li elements */
+#pages-nav li:has(ul a.current)::before,
+#pages-nav li:has(ul a.current) > ul > li::before {
+	content: '';
+	position: absolute;
+	top: -15px;
+	left: -15px;
+	right: 0;
+	bottom: -15px;
+	@apply bg-grey-10 rounded-sm;
+	z-index: -2;
+}
+
+/* Also highlight when the parent itself is the current item */
+#pages-nav li:has(> a.current)::before,
+#pages-nav li:has(> a.current) ~ li::before {
+	content: '';
+	position: absolute;
+	top: -15px;
+	left: -15px;
+	right: 0;
+	bottom: -15px;
+	@apply bg-grey-10 rounded-sm;
+	z-index: -2;
+}
+
+/* Also highlight all children when the parent itself is current */
+#pages-nav li:has(> div > a.current)::before,
+#pages-nav li:has(> div > a.current) > ul > li::before {
+	content: '';
+	position: absolute;
+	top: -15px;
+	left: -15px;
+	right: 0;
+	bottom: -15px;
+	@apply bg-grey-10 rounded-sm;
+	z-index: -2;
+}
+
+/* Grey-20 hover effect for all nav links - only direct child link */
+#pages-nav li:has(> a:hover):not(:has(> ul))::after,
+#pages-nav li:has(> div > a:hover):not(:has(> ul))::after {
+	content: '';
+	position: absolute;
+	top: -8px;
+	left: -8px;
+	right: 8px;
+	bottom: -8px;
+	@apply bg-grey-20 rounded-sm;
+	z-index: -1;
+}
+
+/* Position the parent link/div containers */
+#pages-nav li > a,
+#pages-nav li > div {
+	position: relative;
+}
+
+/* For parent items with children, apply hover only to the direct link/div area */
+#pages-nav li:has(> a:hover):has(> ul) > a::before,
+#pages-nav li:has(> div > a:hover):has(> ul) > div::before {
+	content: '';
+	position: absolute;
+	top: -8px;
+	left: -15px;
+	right: 0;
+	bottom: -8px;
+	@apply bg-grey-20 rounded-sm;
+	z-index: -1;
+}
+
 .markdown-content {
 	@apply font-body;
 }