Merge pull request #7 from wp-graphql/misc

Miscellaneous Changes

src/App.jsx

@@ -1,11 +1,14 @@
+import { useState } from '@wordpress/element';
 import { EditorDrawer } from './components/EditorDrawer';
 import { Editor } from './components/Editor';
 
 export function App() {
+	const [ drawerOpen, setDrawerOpen ] = useState( false );
+
 	return (
 		<div className="AppRoot">
-			<EditorDrawer>
-				<Editor />
+			<EditorDrawer open={ drawerOpen } setDrawerOpen={ setDrawerOpen }>
+				<Editor setDrawerOpen={ setDrawerOpen } />
 			</EditorDrawer>
 		</div>
 	);

src/components/Editor.jsx

@@ -1,5 +1,6 @@
 /* global WPGRAPHQL_IDE_DATA */
 import { GraphiQL } from 'graphiql';
+
 import 'graphiql/graphiql.min.css';
 
 const fetcher = async ( graphQLParams ) => {
@@ -17,10 +18,17 @@ const fetcher = async ( graphQLParams ) => {
 	return response.json();
 };
 
-export function Editor() {
+export function Editor( { setDrawerOpen } ) {
 	return (
-		<>
-			<GraphiQL fetcher={ fetcher } />
-		</>
+		<GraphiQL fetcher={ fetcher }>
+			<GraphiQL.Logo>
+				<button
+					className="button EditorDrawerCloseButton"
+					onClick={ () => setDrawerOpen( false ) }
+				>
+					X<span className="screen-reader-text">close drawer</span>
+				</button>
+			</GraphiQL.Logo>
+		</GraphiQL>
 	);
 }

src/components/EditorDrawer.jsx

@@ -1,11 +1,22 @@
 import { Drawer as VaulDrawer } from 'vaul';
 
-export function EditorDrawer( { shouldScaleBackground = false, children } ) {
+export function EditorDrawer( {
+	setDrawerOpen,
+	open = false,
+	shouldScaleBackground = false,
+	children,
+} ) {
 	const buttonLabel = 'GraphQL IDE';
 
 	return (
 		<div className="EditorDrawerRoot">
-			<VaulDrawer.Root shouldScaleBackground={ shouldScaleBackground }>
+			<VaulDrawer.Root
+				dismissible={ false }
+				closeThreshold={ 1 }
+				shouldScaleBackground={ shouldScaleBackground }
+				open={ open }
+				onOpenChange={ setDrawerOpen }
+			>
 				<VaulDrawer.Trigger className="EditorDrawerButton">
 					<span className="ab-icon" aria-hidden="true"></span>
 					{ buttonLabel }