From ea0ee1cbca0af0d5ea2a57f3e660528914dd5fbb Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Sat, 11 Apr 2026 15:56:28 +0200
Subject: [PATCH] polish sidebar progress icon

enhance sidebar interaction and styling for category items
---
 .../components/TaskableState/index.tsx        |  9 +++++-
 src/theme/DocSidebarItem/styles.module.scss   | 28 +++++++++++++++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/tdev/page-index/components/TaskableState/index.tsx b/packages/tdev/page-index/components/TaskableState/index.tsx
index 3133b4d04..d561f0eb1 100644
--- a/packages/tdev/page-index/components/TaskableState/index.tsx
+++ b/packages/tdev/page-index/components/TaskableState/index.tsx
@@ -35,7 +35,14 @@ const TaskableState = observer((props: Props) => {
             title={`Progress: ${page.progress} / ${page.totalSteps}`}
             onClick={(e) => {
                 const thisElement = e.currentTarget;
-                thisElement.parentElement?.querySelector('a')?.click();
+                const categoryButton = thisElement.parentElement?.querySelector<HTMLButtonElement>(
+                    '&>li.theme-doc-sidebar-item-category>div.menu__list-item-collapsible>button'
+                );
+                if (categoryButton) {
+                    categoryButton.click();
+                } else {
+                    thisElement.parentElement?.querySelector('a')?.click();
+                }
             }}
         >
             <Icon
diff --git a/src/theme/DocSidebarItem/styles.module.scss b/src/theme/DocSidebarItem/styles.module.scss
index 2df830a7a..c63e1a959 100644
--- a/src/theme/DocSidebarItem/styles.module.scss
+++ b/src/theme/DocSidebarItem/styles.module.scss
@@ -5,9 +5,6 @@
         right: 0.5em;
         top: 0;
         z-index: 0;
-        &.category {
-            right: 3em;
-        }
     }
     &:has(> .icon:hover) {
         > li:has(+ .icon:hover) {
@@ -17,4 +14,29 @@
             }
         }
     }
+    &:has(> .icon) {
+        > li:global(.theme-doc-sidebar-item-category) {
+            &::after {
+                content: '';
+                position: absolute;
+                right: 0.5em;
+                top: 0;
+                height: 2em;
+                width: 2em;
+                background: var(--ifm-color-gray-600);
+                clip-path: polygon(83% 12%, 90% 21%, 90% 42%, 100% 50%, 90% 58%, 90% 79%, 83% 88%);
+                transform: rotate(90deg);
+                transition: transform 0.3s ease;
+                transition-delay: 0.2s;
+            }
+            &:global(.menu__list-item--collapsed) {
+                &::after {
+                    transform: rotate(0deg);
+                }
+            }
+            button:global(.clean-btn.menu__caret) {
+                opacity: 0;
+            }
+        }
+    }
 }