feat(section-navigation): add section navigation component

src/resource-catalog.jsx

@@ -14,6 +14,7 @@ import resourceFiltersStyle from "./resource-filters.css?inline";
 import resourceGroupStyle from "./resource-group.css?inline";
 import resourceGroupEventStyle from "./resource-group-event.css?inline";
 import searchStyle from "./search.css?inline";
+import sectionNavigationStyle from "./section-navigation.css?inline";
 import tagsStyle from "./tags.css?inline";
 import tippyStyle from "tippy.js/dist/tippy.css?inline";
 
@@ -62,6 +63,7 @@ export function ResourceCatalog({
       <style>{resourceGroupStyle}</style>
       <style>{resourceGroupEventStyle}</style>
       <style>{searchStyle}</style>
+      <style>{sectionNavigationStyle}</style>
       <style>{tagsStyle}</style>
       <style>{tippyStyle}</style>
     </>

src/resource-group-detail.jsx

@@ -3,6 +3,7 @@ import ResourceGroupEvents from "./resource-group-events";
 import ResourceGroupQueueMetrics from "./resource-group-queue-metrics";
 import ResourceGroupResources from "./resource-group-resources";
 import ResourceGroupSoftware from "./resource-group-software";
+import SectionNavigation from "./section-navigation";
 
 export default function ResourceGroupDetail({ baseUri, resourceGroupId }) {
   return (
@@ -11,6 +12,7 @@ export default function ResourceGroupDetail({ baseUri, resourceGroupId }) {
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}
       />
+      <SectionNavigation />
       <ResourceGroupResources
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}

src/section-navigation.css

@@ -0,0 +1,25 @@
+.section-navigation {
+  border-bottom: 1px solid var(--contrast-8);
+  border-top: 1px solid var(--contrast-8);
+  display: flex;
+  flex-direction: row;
+  margin: 20px 0;
+}
+.section-navigation h2 {
+  flex: 0 0 auto;
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 20px 0;
+}
+.section-navigation ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 10px 0;
+}
+.section-navigation li {
+  list-style-type: none;
+  flex: 0 0 auto;
+  margin: 10px 0 10px 20px;
+}

src/section-navigation.jsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "preact/hooks";
+
+import Icon from "./icon";
+
+export default function SectionNavigation({ prompt = "Jump To:" }) {
+  const [sections, setSections] = useState([]);
+  const updateSections = () => {
+    const newSections = [];
+    for (let heading of document.querySelectorAll("[data-section-title]"))
+      newSections.push({
+        icon: heading.dataset.sectionIcon,
+        id: heading.id,
+        title: heading.dataset.sectionTitle,
+      });
+
+    setSections(newSections);
+  };
+  useEffect(() => {
+    updateSections();
+    document.addEventListener("accessci-update-sections", updateSections);
+  }, []);
+  return (
+    <nav class="section-navigation">
+      {prompt ? <h2>{prompt}</h2> : null}
+      <ul>
+        {sections.map(({ icon, id, title }) => (
+          <li>
+            <a href={`#${id}`}>
+              {icon ? (
+                <>
+                  <Icon name={icon} />{" "}
+                </>
+              ) : null}
+              {title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

src/section.jsx

@@ -1,5 +1,12 @@
+import { useLayoutEffect } from "preact/hooks";
+
 import Icon from "./icon";
 
+const fireUpdateEvent = () => {
+  const event = new Event("accessci-update-sections");
+  document.dispatchEvent(event);
+};
+
 export default function Section({
   children,
   headerComponents = null,
@@ -8,16 +15,20 @@ export default function Section({
   title,
 }) {
   const id = sectionId || title.toLowerCase().replace(/[^0-9a-z]+/g, "-");
+  useLayoutEffect(() => {
+    fireUpdateEvent();
+    return fireUpdateEvent;
+  }, []);
   return (
-    <>
+    <section id={id} data-section-title={title} data-section-icon={icon}>
       <div class="flex-header">
-        <h2 id={id}>
+        <h2>
           {icon ? <Icon name={icon} /> : null}
           {title}
         </h2>
         {headerComponents}
       </div>
       {children}
-    </>
+    </section>
   );
 }