Smooth side panel transition with CSS grid animation

apps/dashboard/src/components/layouts/dashboard-layout.tsx

@@ -1,15 +1,18 @@
 import { useQuery } from "@tanstack/react-query";
 import { getRouteApi, Outlet } from "@tanstack/react-router";
+import { motion } from "motion/react";
 import { lazy, Suspense } from "react";
 import {
 	githubMyIssuesQueryOptions,
 	githubMyPullsQueryOptions,
 } from "#/lib/github.query";
 import { useGitHubRevalidation } from "#/lib/use-github-revalidation";
 import { useHasMounted } from "#/lib/use-has-mounted";
+import { useMediaQuery } from "#/lib/use-media-query";
 import { DashboardBottomBar } from "./dashboard-bottombar";
 import { DashboardMobileNav } from "./dashboard-mobile-nav";
 import {
+	SIDE_PANEL_WIDTH,
 	SidePanelProvider,
 	SidePanelSlot,
 	SidePanelToggle,
@@ -61,6 +64,8 @@ export function DashboardLayout() {
 	const tabsReady = hasMounted && Boolean(pullsQuery.data && issuesQuery.data);
 
 	const sidePanel = useSidePanelSlot();
+	const isXl = useMediaQuery("(min-width: 1280px)");
+	const showPanel = isXl && sidePanel.hasContent && !sidePanel.collapsed;
 
 	return (
 		<div className="isolate flex h-dvh flex-col bg-muted">
@@ -83,19 +88,29 @@ export function DashboardLayout() {
 					toggle: sidePanel.toggle,
 				}}
 			>
-				<div className="flex flex-1 overflow-hidden p-2 pt-0">
-					<div className="relative flex-1 overflow-hidden rounded-xl border bg-card shadow-[0_1px_4px_0_rgba(0,0,0,0.03)]">
+				<motion.div
+					initial={false}
+					animate={{
+						gridTemplateColumns: showPanel
+							? `minmax(0, 1fr) ${SIDE_PANEL_WIDTH}px`
+							: "minmax(0, 1fr) 0px",
+					}}
+					transition={{ type: "spring", stiffness: 400, damping: 35 }}
+					className="grid flex-1 overflow-hidden p-2 pt-0"
+				>
+					<div className="relative overflow-hidden rounded-xl border bg-card shadow-[0_1px_4px_0_rgba(0,0,0,0.03)]">
 						<div className="h-full">
 							<Outlet />
 						</div>
 						<SidePanelToggle />
 					</div>
+
 					<SidePanelSlot
 						slotRef={sidePanel.setNode}
 						collapsed={sidePanel.collapsed}
 						onHasContent={sidePanel.setHasContent}
 					/>
-				</div>
+				</motion.div>
 			</SidePanelProvider>
 			<DashboardBottomBar />
 			<DashboardMobileNav

apps/dashboard/src/components/layouts/dashboard-side-panel.tsx

@@ -10,6 +10,9 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 
+// w-72 (288px) + pl-2 (8px)
+export const SIDE_PANEL_WIDTH = 296;
+
 type SidePanelState = {
 	node: HTMLDivElement | null;
 	collapsed: boolean;
@@ -66,6 +69,8 @@ export function SidePanelSlot({
 }) {
 	const [hasChildren, setHasChildren] = useState(false);
 	const innerRef = useRef<HTMLDivElement | null>(null);
+	const ghostRef = useRef<HTMLDivElement | null>(null);
+	const exitTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
 	const refCallback = useCallback(
 		(el: HTMLDivElement | null) => {
@@ -86,31 +91,52 @@ export function SidePanelSlot({
 		};
 
 		check();
-		const observer = new MutationObserver(check);
+		const observer = new MutationObserver((mutations) => {
+			const has = el.childNodes.length > 0;
+
+			if (!has && ghostRef.current) {
+				// Content removed — clone into ghost for exit animation
+				ghostRef.current.innerHTML = "";
+				for (const mutation of mutations) {
+					for (const node of mutation.removedNodes) {
+						ghostRef.current.appendChild(node.cloneNode(true));
+					}
+				}
+				if (exitTimer.current) clearTimeout(exitTimer.current);
+				exitTimer.current = setTimeout(() => {
+					if (ghostRef.current) ghostRef.current.innerHTML = "";
+				}, 500);
+			} else if (has && ghostRef.current) {
+				// Content added — clear ghost
+				ghostRef.current.innerHTML = "";
+				if (exitTimer.current) clearTimeout(exitTimer.current);
+			}
+
+			setHasChildren(has);
+			onHasContent(has);
+		});
 		observer.observe(el, { childList: true });
 		el.addEventListener("sidepanel-content", check);
 		return () => {
 			observer.disconnect();
 			el.removeEventListener("sidepanel-content", check);
+			if (exitTimer.current) clearTimeout(exitTimer.current);
 		};
 	}, [onHasContent]);
 
 	const show = hasChildren && !collapsed;
 
 	return (
-		<motion.div
-			animate={{ width: show ? "auto" : 0 }}
-			transition={{ type: "spring", stiffness: 400, damping: 35 }}
-			className="hidden shrink-0 overflow-hidden xl:block"
-		>
+		<div className="hidden overflow-hidden xl:block">
 			<motion.div
 				animate={{ opacity: show ? 1 : 0 }}
 				transition={{ duration: show ? 0.2 : 0.1, delay: show ? 0.1 : 0 }}
 				className="h-full overflow-y-auto overflow-x-hidden pb-2 pl-2"
 			>
 				<div ref={refCallback} />
+				<div ref={ghostRef} className="pointer-events-none" aria-hidden />
 			</motion.div>
-		</motion.div>
+		</div>
 	);
 }
 

apps/dashboard/src/lib/use-media-query.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string) {
+	const [matches, setMatches] = useState(false);
+
+	useEffect(() => {
+		const mq = window.matchMedia(query);
+		setMatches(mq.matches);
+		const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, [query]);
+
+	return matches;
+}