Animate sidebar only after user interaction

zuplo · Aug 20, 2024 · f68311e · f68311e
1 parent c3b9d55
commit f68311e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/zudoku/src/lib/components/navigation/SidebarCategory.tsx b/packages/zudoku/src/lib/components/navigation/SidebarCategory.tsx
@@ -18,6 +18,7 @@ export const SidebarCategory = ({
 }) => {
   const topNavItem = useTopNavigationItem();
   const isCategoryOpen = useIsCategoryOpen(category);
+  const [hasInteracted, setHasInteracted] = useState(false);
 
   const isCollapsible = category.collapsible ?? true;
   const isCollapsed = category.collapsed ?? true;
@@ -40,11 +41,15 @@ export const SidebarCategory = ({
       onClick={(e) => {
         e.preventDefault();
         setOpen((prev) => !prev);
+        setHasInteracted(true);
       }}
     >
       <ChevronRightIcon
         size={16}
-        className="transition shrink-0 group-data-[state=open]:rotate-90"
+        className={cn(
+          hasInteracted && "transition",
+          "shrink-0 group-data-[state=open]:rotate-90",
+        )}
       />
     </button>
   );
@@ -88,7 +93,13 @@ export const SidebarCategory = ({
           </div>
         )}
       </Collapsible.Trigger>
-      <Collapsible.Content className="CollapsibleContent ms-[calc(var(--padding-nav-item)*1.125)]">
+      <Collapsible.Content
+        className={cn(
+          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
+          hasInteracted && "CollapsibleContent",
+          "ms-[calc(var(--padding-nav-item)*1.125)]",
+        )}
+      >
         <ul className="mt-1 border-l ps-2">
           {category.items.map((item) => (
             <SidebarItem

diff --git a/packages/zudoku/src/lib/plugins/markdown/MdxPage.tsx b/packages/zudoku/src/lib/plugins/markdown/MdxPage.tsx
@@ -23,7 +23,6 @@ const MarkdownHeadings = {
   ),
   h3: ({ children, id }) => (
     <Heading level={3} id={id} registerSidebarAnchor>
-      {" "}
       {children}
     </Heading>
   ),