diff --git a/sidebars.js b/sidebars.js index f62472a4..c2a5919c 100644 --- a/sidebars.js +++ b/sidebars.js @@ -195,11 +195,12 @@ const sidebars = { { type: 'category', label: 'Tutorials', - link: { - type: 'doc', - id: 'tutorials/index', - }, items: [ + { + type: 'doc', + id: 'tutorials/index', + label: 'Overview', + }, { type: 'category', label: 'Prediction market', diff --git a/src/theme/DocSidebarItem/Category/index.tsx b/src/theme/DocSidebarItem/Category/index.tsx index 50c966ce..6b741160 100644 --- a/src/theme/DocSidebarItem/Category/index.tsx +++ b/src/theme/DocSidebarItem/Category/index.tsx @@ -1,4 +1,4 @@ -import React, {type ComponentProps, useEffect, useMemo, useState} from 'react'; +import React, {type ComponentProps, useEffect, useMemo} from 'react'; import clsx from 'clsx'; import { ThemeClassNames, @@ -219,6 +219,7 @@ export default function DocSidebarItemCategory({ {href && collapsible && ( { e.preventDefault(); @@ -240,20 +241,19 @@ export default function DocSidebarItemCategory({ ); } -const SecondLevelItemIcon = ({onClick}:{onClick: (e) => void}) => { - const [isRotated, setIsRotated] = useState(false); - +const SecondLevelItemIcon = ({collapsed, onClick}:{collapsed: boolean; onClick: (e) => void}) => { + // Match the default caret orientation used by sibling categories: + // collapsed -> points right (90deg), expanded -> points down (180deg). + // Driven by the real `collapsed` state so it stays in sync whether the + // category is toggled via the label link, this icon, or auto-collapse. return ( { - setIsRotated(!isRotated) - onClick(e) - }} + onClick={onClick} src='/img/site/GreenFiChevronUp.svg' alt='arrow icon' /> )