Tweak interface in prep for intersection observers

ghostty-org · Dec 20, 2024 · 7b1629b · 7b1629b
1 parent 4b470a7
commit 7b1629b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/components/sidecar/Sidecar.module.css b/src/components/sidecar/Sidecar.module.css
@@ -10,6 +10,9 @@
     list-style: none;
     & li {
       --item-color: var(--gray-4);
+      &:hover {
+        --item-color: var(--gray-6);
+      }
       &.active {
         --item-color: var(--gray-8);
       }

diff --git a/src/components/sidecar/index.tsx b/src/components/sidecar/index.tsx
@@ -6,21 +6,27 @@ interface SidecarItem {
   id: string;
   title: string;
   depth: number;
-  active?: boolean;
 }
 
 interface SidecarProps {
   className?: string;
   title: string;
   items: SidecarItem[];
+  activeItemID: string;
 }
 
-export default function Sidecar({ className, title, items }: SidecarProps) {
+export default function Sidecar({
+  className,
+  title,
+  items,
+  activeItemID,
+}: SidecarProps) {
   return (
     <div className={classNames(s.sidecar, className)}>
       <H6 className={s.title}>{title}</H6>
       <ul>
-        {items.map(({ id, title, active = false }) => {
+        {items.map(({ id, title }) => {
+          const active = activeItemID === id;
           return (
             <li className={classNames({ [s.active]: active })}>
               {/* Intentionally using an a tag and not next/link:

diff --git a/src/pages/docs/[...path]/index.tsx b/src/pages/docs/[...path]/index.tsx
@@ -118,6 +118,7 @@ export default function DocsPage({
           </div>
 
           <Sidecar
+            activeItemID={pageHeaders[0].id}
             className={s.sidecar}
             title="On this page"
             items={pageHeaders}