Add fullscreen mode for API demo panel

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/FullScreenModal/_FullScreenModal.scss

@@ -0,0 +1,20 @@
+.openapi-explorer__demo-modal-content {
+  padding: 1rem;
+  border: thin solid var(--ifm-toc-border-color);
+  border-radius: var(--ifm-global-radius);
+  max-width: 95%;
+  width: 90vw;
+  height: 90vh;
+  background-color: var(--ifm-background-color);
+  overflow: auto;
+}
+
+.openapi-explorer__demo-modal-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 201;
+}

packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
@@ -20,6 +20,9 @@ import CodeBlock from "@theme/CodeBlock";
 import type { Props } from "@theme/DocItem";
 import DocItemMetadata from "@theme/DocItem/Metadata";
 import SkeletonLoader from "@theme/SkeletonLoader";
+import FloatingButton from "@theme/ApiExplorer/FloatingButton";
+import ExitButton from "@theme/ApiExplorer/ApiCodeBlock/ExitButton";
+import Modal from "react-modal";
 import clsx from "clsx";
 import {
   ParameterObject,
@@ -85,6 +88,11 @@ export default function ApiItem(props: Props): JSX.Element {
   const options = themeConfig.api;
   const isBrowser = useIsBrowser();
 
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  useEffect(() => {
+    Modal.setAppElement("body");
+  }, []);
+
   // Regex for 2XX status
   const statusRegex = new RegExp("(20[0-9]|2[1-9][0-9])");
 
@@ -170,12 +178,36 @@ export default function ApiItem(props: Props): JSX.Element {
                   <MDXComponent />
                 </div>
                 <div className="col col--5 openapi-right-panel__container">
+                  <FloatingButton
+                    label="Full Screen"
+                    onClick={() => setIsFullScreen(true)}
+                  >
+                    <BrowserOnly fallback={<SkeletonLoader size="lg" />}>
+                      {() => {
+                        return <ApiExplorer item={api} infoPath={infoPath} />;
+                      }}
+                    </BrowserOnly>
+                  </FloatingButton>
+                </div>
+                <Modal
+                  className="openapi-explorer__demo-modal-content"
+                  overlayClassName="openapi-explorer__demo-modal-overlay"
+                  isOpen={isFullScreen}
+                  onRequestClose={() => setIsFullScreen(false)}
+                  contentLabel="API Demo"
+                >
+                  <div style={{ textAlign: "right" }}>
+                    <ExitButton
+                      className="openapi-explorer__code-block-exit-btn"
+                      handler={() => setIsFullScreen(false)}
+                    />
+                  </div>
                   <BrowserOnly fallback={<SkeletonLoader size="lg" />}>
                     {() => {
                       return <ApiExplorer item={api} infoPath={infoPath} />;
                     }}
                   </BrowserOnly>
-                </div>
+                </Modal>
               </div>
             </Provider>
           </DocItemLayout>

packages/docusaurus-theme-openapi-docs/src/theme/styles.scss

@@ -18,6 +18,7 @@
 @use "./ApiExplorer/Request/Request";
 @use "./ApiExplorer/Response/Response";
 @use "./ApiExplorer/Server/Server";
+@use "./ApiExplorer/FullScreenModal/FullScreenModal";
 
 /* Api Demo Panel / ApiCodeBlock */
 @use "./ApiExplorer/ApiCodeBlock/Container/Container";