chore(website): [playground] move config panel to secondary menu (#5131)

packages/website/src/components/OptionsSelector.tsx

@@ -1,6 +1,11 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useCallback } from 'react';
 
+import {
+  NavbarSecondaryMenuFiller,
+  useWindowSize,
+} from '@docusaurus/theme-common';
+
 import Expander from './layout/Expander';
 import Dropdown from './inputs/Dropdown';
 import Checkbox from './inputs/Checkbox';
@@ -29,7 +34,7 @@ const ASTOptions = [
   { value: 'scope', label: 'Scope' },
 ] as const;
 
-function OptionsSelector({
+function OptionsSelectorContent({
   state,
   setState,
   tsVersions,
@@ -154,4 +159,17 @@ function OptionsSelector({
   );
 }
 
+function OptionsSelector(props: OptionsSelectorParams): JSX.Element {
+  const windowSize = useWindowSize();
+  if (windowSize === 'mobile') {
+    return (
+      <NavbarSecondaryMenuFiller
+        component={OptionsSelectorContent}
+        props={props}
+      />
+    );
+  }
+  return <OptionsSelectorContent {...props} />;
+}
+
 export default OptionsSelector;

packages/website/src/components/Playground.module.css

@@ -88,7 +88,7 @@
   }
 
   .options {
-    width: 100%;
+    display: none;
   }
 
   .tabCode {

packages/website/src/components/layout/Expander.module.css

@@ -39,14 +39,14 @@
 
 .arrow {
   margin: 0 0.5rem 0 0;
-  transform: rotateZ(-90deg);
+  transform: rotateZ(0deg);
   transition: transform 250ms ease-in-out;
   width: 1rem;
   height: 1rem;
 }
 
-.expandedArrow {
-  transform: rotateZ(0deg);
+.arrow.expandedArrow {
+  transform: rotateZ(90deg);
 }
 
 .children {

packages/website/src/components/layout/Expander.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
+import clsx from 'clsx';
+import { useCollapsible, Collapsible } from '@docusaurus/theme-common';
 import styles from './Expander.module.css';
 
 import ArrowIcon from '@site/src/icons/arrow.svg';
@@ -10,23 +12,21 @@ export interface ExpanderProps {
 }
 
 function Expander(props: ExpanderProps): JSX.Element {
-  const [isExpanded, setIsExpanded] = useState<boolean>(true);
-
-  const handleToggle = (): void => {
-    setIsExpanded(!isExpanded);
-  };
+  const { collapsed, toggleCollapsed } = useCollapsible({
+    initialState: false,
+  });
 
   return (
-    <div className={`${styles.expander} ${props.className ?? ''}`}>
-      <button className={styles.heading} onClick={handleToggle}>
+    <div className={clsx(styles.expander, props.className)}>
+      <button className={styles.heading} onClick={toggleCollapsed}>
         <ArrowIcon
-          className={`${styles.arrow} ${
-            isExpanded ? styles.expandedArrow : ''
-          }`}
+          className={clsx(styles.arrow, !collapsed && styles.expandedArrow)}
         />
         <span className={styles.headerLabel}>{props.label}</span>
       </button>
-      {isExpanded && <div className={styles.children}>{props.children}</div>}
+      <Collapsible lazy={false} as="div" collapsed={collapsed}>
+        <div className={styles.children}>{props.children}</div>
+      </Collapsible>
     </div>
   );
 }