fix(web): smooth settings sidebar transitions#9811

@@ -114,6 +116,27 @@ function SettingsSectionIcon({ to }: { to: SettingsPath }) {
   return <Icon className="mt-0.5 size-3.5 shrink-0 text-sidebar-muted-foreground/60" />;
 }
 
+function SettingsSubmenuCollapse({
+  open,
+  children,
+}: {
+  readonly open: boolean;
+  readonly children: ReactNode;
+}) {
+  return (
+    <div
+      aria-hidden={open ? undefined : true}
+      inert={open ? undefined : true}
+      className={cn(
+        "grid transition-[grid-template-rows] duration-150 ease-out motion-reduce:transition-none",
+        open ? "grid-rows-[1fr]" : "pointer-events-none grid-rows-[0fr]",
+      )}
+    >
+      <div className="min-h-0 overflow-hidden">{children}</div>
+    </div>
+  );