From d7d30e039dad05edeb35b8b74028e7bc7ee2331a Mon Sep 17 00:00:00 2001
From: Alex Skene <510285+skenaja@users.noreply.github.com>
Date: Fri, 21 Aug 2026 18:16:08 +0100
Subject: [PATCH] apply correct chevron styling in sidebar to tutorial, and fix
 default orientation on sub-menus when closed

---
 sidebars.js                                 |  9 +++++----
 src/theme/DocSidebarItem/Category/index.tsx | 18 +++++++++---------
 2 files changed, 14 insertions(+), 13 deletions(-)

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({
         </Link>
         {href && collapsible && (
           <SecondLevelItemIcon
+            collapsed={collapsed}
             onClick={
             (e) => {
               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 (
     <img
       style={{
-        transform: isRotated ? 'rotate(90deg)' : 'rotate(180deg)',
+        transform: collapsed ? 'rotate(90deg)' : 'rotate(180deg)',
         transition: 'transform 0.3s ease',
       }}
       className={styles.secondLevelItemIcon}
-      onClick={(e) => {
-        setIsRotated(!isRotated)
-        onClick(e)
-      }}
+      onClick={onClick}
       src='/img/site/GreenFiChevronUp.svg' alt='arrow icon'
     />
   )