feat: allow navigable header sections in sidebar w/ link param (#165)

wevm · May 18, 2024 · 191ca5c · 191ca5c
1 parent 5bbc87f
commit 191ca5c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -181,12 +181,12 @@ function flattenSidebar(sidebar: SidebarItem[]) {
   const items: SidebarItem[] = []
 
   for (const item of sidebar) {
+    if (item.link) {
+      items.push(item)
+    }
     if (item.items) {
       items.push(...flattenSidebar(item.items))
-      continue
     }
-
-    items.push(item)
   }
 
   return items

diff --git a/src/app/components/Sidebar.css.ts b/src/app/components/Sidebar.css.ts
@@ -195,6 +195,20 @@ export const sectionTitle = style(
   'sectionTitle',
 )
 
+export const sectionTitleLink = style(
+  {
+    selectors: {
+      '&:hover': {
+        color: primitiveColorVars.text,
+      },
+      '&[data-active="true"]': {
+        color: primitiveColorVars.textAccent,
+      },
+    },
+  },
+  'sectionTitleLink',
+)
+
 export const sectionCollapse = style(
   {
     color: primitiveColorVars.text3,

diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
@@ -198,7 +198,7 @@ function SidebarItem(props: {
                   data-active={Boolean(match)}
                   onClick={onClick}
                   className={clsx(
-                    depth === 0 ? styles.sectionTitle : styles.item,
+                    depth === 0 ? [styles.sectionTitle, styles.sectionTitleLink] : styles.item,
                     hasActiveChildItem && styles.sectionHeaderActive,
                   )}
                   to={item.link}