Merge pull request #288 from GBSL-Informatik:polish-sidebar-progress

polish sidebar progress icon

Author: lebalz

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

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;
+            }
+        }
+    }
 }