zudoku 0.3.0-dev.61 → 0.3.0-dev.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.61",
+  "version": "0.3.0-dev.63",
   "type": "module",
   "files": [
     "dist",

package/src/app/main.css

@@ -137,10 +137,10 @@
     --slide-offset: -0.75rem;
     @apply overflow-hidden;
   }
-  .CollapsibleContent[data-state="open"] {
+  [data-animate="true"] .CollapsibleContent[data-state="open"] {
     animation: slideDown 300ms var(--easing);
   }
-  .CollapsibleContent[data-state="closed"] {
+  [data-animate="true"] .CollapsibleContent[data-state="closed"] {
     animation: slideUp 300ms var(--easing);
   }
 

package/src/lib/components/Header.tsx

@@ -54,28 +54,32 @@ export const Header = memo(function HeaderInner() {
     <header className="fixed top-0 w-full z-10 bg-background/80 backdrop-blur">
       <div className="max-w-screen-2xl mx-auto">
         <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]">
-          <div className="flex items-center gap-3.5">
-            {page?.logo && (
-              <>
-                <img
-                  src={page.logo.src.light}
-                  alt={page.logo.alt ?? page.pageTitle}
-                  style={{ width: page.logo.width }}
-                  className={cn("h-10", isDark && "hidden")}
-                  loading="lazy"
-                />
-                <img
-                  src={page.logo.src.dark}
-                  alt={page.logo.alt ?? page.pageTitle}
-                  style={{ width: page.logo.width }}
-                  className={cn("h-10", !isDark && "hidden")}
-                  loading="lazy"
-                />
-              </>
-            )}
-            <span className="font-bold text-2xl text-foreground/85 tracking-wide">
-              {page?.pageTitle}
-            </span>
+          <div className="flex">
+            <Link to="/">
+              <div className="flex items-center gap-3.5">
+                {page?.logo && (
+                  <>
+                    <img
+                      src={page.logo.src.light}
+                      alt={page.logo.alt ?? page.pageTitle}
+                      style={{ width: page.logo.width }}
+                      className={cn("h-10", isDark && "hidden")}
+                      loading="lazy"
+                    />
+                    <img
+                      src={page.logo.src.dark}
+                      alt={page.logo.alt ?? page.pageTitle}
+                      style={{ width: page.logo.width }}
+                      className={cn("h-10", !isDark && "hidden")}
+                      loading="lazy"
+                    />
+                  </>
+                )}
+                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                  {page?.pageTitle}
+                </span>
+              </div>
+            </Link>
           </div>
           <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
             <div className="w-full max-w-prose">

package/src/lib/components/navigation/SideNavigationCategory.tsx

@@ -21,7 +21,7 @@ export const SideNavigationCategory = ({
 
   const isCollapsible = category.collapsible ?? true;
 
-  const [isOpen, setIsOpen] = useNavigationCollapsibleState({
+  const collapsibleProps = useNavigationCollapsibleState({
     item: category,
     path: navItem?.path ?? "",
     defaultOpen: () =>
@@ -31,11 +31,7 @@ export const SideNavigationCategory = ({
   });
 
   return (
-    <Collapsible.Root
-      key={category.label}
-      open={isOpen}
-      onOpenChange={() => setIsOpen((prev) => !prev)}
-    >
+    <Collapsible.Root key={category.label} {...collapsibleProps}>
       {category.label.length > 0 ? (
         <Collapsible.Trigger asChild={isCollapsible} disabled={!isCollapsible}>
           <h5

package/src/lib/components/navigation/SideNavigationItem.tsx

@@ -14,7 +14,7 @@ import { AnchorLink } from "../AnchorLink.js";
 import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
 import { checkHasActiveItem, isLinkItem, isPathItem } from "./util.js";
 
-export const navigationListItem = cva(
+const navigationListItem = cva(
   "flex px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
   {
     variants: {
@@ -48,10 +48,10 @@ export const SideNavigationItem = ({
   const currentPath = isPathItem(item) ? joinPath(basePath, item.path) : "";
   const location = useLocation();
 
-  const [isOpen, setIsOpen] = useNavigationCollapsibleState({
+  const collapsibleProps = useNavigationCollapsibleState({
     item,
     path: currentPath,
-    defaultOpen: () => checkHasActiveItem(item, location.pathname, currentPath),
+    defaultOpen: () => checkHasActiveItem(item, location.pathname, basePath),
   });
 
   if (isLinkItem(item)) {
@@ -100,11 +100,7 @@ export const SideNavigationItem = ({
   return (
     <li title={typeof item.label === "string" ? item.label : item.title}>
       {item.children ? (
-        <Collapsible.Root
-          open={isOpen}
-          onOpenChange={() => setIsOpen((prev) => !prev)}
-          className="flex flex-col"
-        >
+        <Collapsible.Root {...collapsibleProps} className="flex flex-col">
           <Collapsible.Trigger
             className={cn(
               "group text-start",

package/src/lib/components/navigation/useNavigationCollapsibleState.ts

@@ -1,3 +1,4 @@
+import type { CollapsibleProps } from "@radix-ui/react-collapsible";
 import { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import type { NavigationNode } from "../../util/traverseNavigation.js";
@@ -11,17 +12,31 @@ export const useNavigationCollapsibleState = ({
   item: NavigationNode;
   defaultOpen: () => boolean;
   path: string;
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
+}): Partial<CollapsibleProps> & { "data-animate": boolean } => {
+  const [open, setOpen] = useState(defaultOpen);
   const location = useLocation();
   const previousLocationPath = useRef(location.pathname);
+  const [shouldAnimate, setShouldAnimate] = useState(false);
 
   useEffect(() => {
-    if (!isOpen && previousLocationPath.current !== location.pathname) {
-      setIsOpen(checkHasActiveItem(item, location.pathname, path));
+    if (!open && previousLocationPath.current !== location.pathname) {
+      setOpen(checkHasActiveItem(item, location.pathname, path));
     }
     previousLocationPath.current = location.pathname;
-  }, [isOpen, item, path, location.pathname]);
+  }, [open, item, path, location.pathname]);
 
-  return [isOpen, setIsOpen] as const;
+  const onOpenChange = () => {
+    setShouldAnimate(true);
+    setOpen((prev) => !prev);
+  };
+
+  useEffect(() => {
+    setShouldAnimate(false);
+  }, []);
+
+  return {
+    open,
+    onOpenChange,
+    "data-animate": shouldAnimate,
+  };
 };