From cc59d042deca5342d4fb0d32298b593e90776f3d Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 1 Jun 2022 11:27:36 +0800
Subject: [PATCH 1/3] chore(website): [playground] move config panel to
 secondary menu

---
 .../src/components/OptionsSelector.tsx        | 20 ++++++++++++-
 .../src/components/Playground.module.css      |  2 +-
 .../src/components/layout/Expander.module.css |  4 +--
 .../src/components/layout/Expander.tsx        | 29 +++++++++++--------
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index f3a579df30b4..f57f2600f49c 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/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;
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index b6c4e1904c03..771da57e32d7 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -88,7 +88,7 @@
   }
 
   .options {
-    width: 100%;
+    display: none;
   }
 
   .tabCode {
diff --git a/packages/website/src/components/layout/Expander.module.css b/packages/website/src/components/layout/Expander.module.css
index bd7df1af6644..59e6cadbac6c 100644
--- a/packages/website/src/components/layout/Expander.module.css
+++ b/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);
+  transform: rotateZ(90deg);
 }
 
 .children {
diff --git a/packages/website/src/components/layout/Expander.tsx b/packages/website/src/components/layout/Expander.tsx
index 23d632be3b33..3e3df3d3c638 100644
--- a/packages/website/src/components/layout/Expander.tsx
+++ b/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,26 @@ 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"
+        className={styles.children}
+        collapsed={collapsed}
+      >
+        {props.children}
+      </Collapsible>
     </div>
   );
 }

From 23efd467d9d6adaf4aaa04d19e0061abdccc8dc8 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 1 Jun 2022 12:04:33 +0800
Subject: [PATCH 2/3] fix transitions

---
 packages/website/src/components/layout/Expander.module.css | 7 +++++--
 packages/website/src/components/layout/Expander.tsx        | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/website/src/components/layout/Expander.module.css b/packages/website/src/components/layout/Expander.module.css
index 59e6cadbac6c..09a16db84f24 100644
--- a/packages/website/src/components/layout/Expander.module.css
+++ b/packages/website/src/components/layout/Expander.module.css
@@ -45,12 +45,15 @@
   height: 1rem;
 }
 
-.expandedArrow {
+.arrow.expandedArrow {
   transform: rotateZ(90deg);
 }
 
 .children {
   display: flex;
   flex-direction: column;
-  padding: 0 0.5rem 0.5rem;
+}
+
+.childrenContent {
+  margin: 0 0.5rem 0.5rem;
 }
diff --git a/packages/website/src/components/layout/Expander.tsx b/packages/website/src/components/layout/Expander.tsx
index 3e3df3d3c638..92cc0588219f 100644
--- a/packages/website/src/components/layout/Expander.tsx
+++ b/packages/website/src/components/layout/Expander.tsx
@@ -30,7 +30,7 @@ function Expander(props: ExpanderProps): JSX.Element {
         className={styles.children}
         collapsed={collapsed}
       >
-        {props.children}
+        <div className={styles.childrenContent}>{props.children}</div>
       </Collapsible>
     </div>
   );

From d9b8239b316242f71e786755c4128f740efad09f Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 1 Jun 2022 12:23:45 +0800
Subject: [PATCH 3/3] fix...

---
 .../website/src/components/layout/Expander.module.css    | 5 +----
 packages/website/src/components/layout/Expander.tsx      | 9 ++-------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/website/src/components/layout/Expander.module.css b/packages/website/src/components/layout/Expander.module.css
index 09a16db84f24..28640f9c69ff 100644
--- a/packages/website/src/components/layout/Expander.module.css
+++ b/packages/website/src/components/layout/Expander.module.css
@@ -52,8 +52,5 @@
 .children {
   display: flex;
   flex-direction: column;
-}
-
-.childrenContent {
-  margin: 0 0.5rem 0.5rem;
+  padding: 0 0.5rem 0.5rem;
 }
diff --git a/packages/website/src/components/layout/Expander.tsx b/packages/website/src/components/layout/Expander.tsx
index 92cc0588219f..247b972d0df2 100644
--- a/packages/website/src/components/layout/Expander.tsx
+++ b/packages/website/src/components/layout/Expander.tsx
@@ -24,13 +24,8 @@ function Expander(props: ExpanderProps): JSX.Element {
         />
         <span className={styles.headerLabel}>{props.label}</span>
       </button>
-      <Collapsible
-        lazy={false}
-        as="div"
-        className={styles.children}
-        collapsed={collapsed}
-      >
-        <div className={styles.childrenContent}>{props.children}</div>
+      <Collapsible lazy={false} as="div" collapsed={collapsed}>
+        <div className={styles.children}>{props.children}</div>
       </Collapsible>
     </div>
   );