fix: expand sidebar items with links

wevm · Aug 14, 2024 · d29b41e · d29b41e
1 parent 71f0ab3
commit d29b41e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/.changeset/cyan-toes-lick.md b/.changeset/cyan-toes-lick.md
@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Expand collapsed sidebar items when they have a link and are pressed.
diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
@@ -136,23 +136,16 @@ function SidebarItem(props: {
     if (hasActiveChildItem) return false
     return Boolean(item.collapsed)
   })
+
   const isCollapsable = item.collapsed !== undefined && item.items !== undefined
-  const onCollapseInteraction = useCallback(
-    (event: KeyboardEvent | MouseEvent) => {
-      if ('key' in event && event.key !== 'Enter') return
-      if (item.link) return
-      setCollapsed((x) => !x)
-    },
-    [item.link],
-  )
-  const onCollapseTriggerInteraction = useCallback(
-    (event: KeyboardEvent | MouseEvent) => {
-      if ('key' in event && event.key !== 'Enter') return
-      if (!item.link) return
-      setCollapsed((x) => !x)
-    },
-    [item.link],
-  )
+  const onCollapseInteraction = useCallback((event: KeyboardEvent | MouseEvent) => {
+    if ('key' in event && event.key !== 'Enter') return
+    setCollapsed((x) => !x)
+  }, [])
+  const onCollapseTriggerInteraction = useCallback((event: KeyboardEvent | MouseEvent) => {
+    if ('key' in event && event.key !== 'Enter') return
+    setCollapsed((x) => !x)
+  }, [])
 
   const active = useRef(true)
   useEffect(() => {
@@ -196,7 +189,10 @@ function SidebarItem(props: {
               (item.link ? (
                 <RouterLink
                   data-active={Boolean(match)}
-                  onClick={onClick}
+                  onClick={(e) => {
+                    onClick?.(e)
+                    onCollapseInteraction(e)
+                  }}
                   className={clsx(
                     depth === 0 ? [styles.sectionTitle, styles.sectionTitleLink] : styles.item,
                     hasActiveChildItem && styles.sectionHeaderActive,