From 4c99485781e04018779fbb8cadf7549a1e59a5bd Mon Sep 17 00:00:00 2001
From: Brandon Romano <BrandonRRomano@gmail.com>
Date: Fri, 20 Dec 2024 13:53:05 -0800
Subject: [PATCH] Only highlight the first sidecar item

---
 src/components/sidecar/index.tsx | 61 ++++++++++++++++++++------------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/components/sidecar/index.tsx b/src/components/sidecar/index.tsx
index a9b0b2e7..c754c52d 100644
--- a/src/components/sidecar/index.tsx
+++ b/src/components/sidecar/index.tsx
@@ -15,41 +15,56 @@ interface SidecarProps {
   inViewHeaderIDs: string[];
 }
 
+// If there's less items than this, the sidecar content won't render
+// it does not make sense to have a single item in the sidecar.
+const MIN_SIDECAR_ITEMS = 2;
+
 export default function Sidecar({
   className,
   title,
   items,
   inViewHeaderIDs,
 }: SidecarProps) {
+  // Calculate the first header that's in view
+  var activeHeaderID: null | string;
+  for (const item of items) {
+    if (inViewHeaderIDs.includes(item.id.substring(1))) {
+      activeHeaderID = item.id;
+      break;
+    }
+  }
   return (
     <div className={classNames(s.sidecar, className)}>
-      <H6 className={s.title}>{title}</H6>
-      <ul>
-        {items.map(({ id, title, depth }) => {
-          // TODO: make just be the first one that appears
-          const active = inViewHeaderIDs.includes(id.substring(1));
-          return (
-            <li
-              key={`${id}${active}`}
-              className={classNames({ [s.active]: active })}
-              style={
-                {
-                  "--depth": depth,
-                } as React.CSSProperties
-              }
-            >
-              {/* Intentionally using an a tag and not next/link:
+      {items.length > MIN_SIDECAR_ITEMS && (
+        <>
+          <H6 className={s.title}>{title}</H6>
+          <ul>
+            {items.map(({ id, title, depth }) => {
+              const active = id === activeHeaderID;
+              return (
+                <li
+                  key={`${id}${active}`}
+                  className={classNames({ [s.active]: active })}
+                  style={
+                    {
+                      "--depth": depth,
+                    } as React.CSSProperties
+                  }
+                >
+                  {/* Intentionally using an a tag and not next/link:
               as we want our :target selectors to trigger here.
               See: https://github.com/vercel/next.js/issues/51346
               Also, we're remaining on the same page always here,
               so no client-side routing handing is needed. */}
-              <a href={id}>
-                <P weight={active ? "medium" : "regular"}>{title}</P>
-              </a>
-            </li>
-          );
-        })}
-      </ul>
+                  <a href={id}>
+                    <P weight={active ? "medium" : "regular"}>{title}</P>
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      )}
     </div>
   );
 }