Add open state

docs/_react/bulma-customizer/src/App.jsx

@@ -138,6 +138,7 @@ const PAGE_IDS = {
 };
 
 export const CustomizerContext = createContext({
+  isOpen: false,
   cssvars: {},
   currentTab: "",
   currentPage: "",
@@ -150,6 +151,7 @@ export const CustomizerContext = createContext({
 function App() {
   const styleRef = useRef();
   const initialContext = {
+    isOpen: true,
     cssvars: {},
     currentTab: "Global Variables",
     currentPage: "delete",
@@ -201,6 +203,17 @@ function App() {
     context.changePage(pageId);
   };
 
+  const handleOpening = (event) => {
+    event.preventDefault();
+
+    setContext((context) => {
+      return {
+        ...context,
+        isOpen: !context.isOpen,
+      };
+    });
+  };
+
   useEffect(() => {
     const styles = {
       root: window.getComputedStyle(document.documentElement),
@@ -400,10 +413,21 @@ function App() {
     "--bulma-tabs-link-active-color": "var(--bulma-primary)",
   };
 
+  const appClass = classNames({
+    [cn.app]: true,
+    [cn.open]: context.isOpen,
+  });
+
+  const buttonClass = classNames({
+    [cn.button]: true,
+    "button is-primary": true,
+  });
+
   return (
     <CustomizerContext.Provider value={context}>
       <style ref={styleRef} />
-      <div className={cn.app}>
+
+      <div className={appClass}>
         <div className={cn.controls}>
           <div className="select" style={tabsStyle}>
             <select onChange={handleTabChange} value={context.currentTab}>
@@ -437,6 +461,10 @@ function App() {
 
         {PAGE_TO_COMPONENT[context.currentPage]}
       </div>
+
+      <button className={buttonClass} onClick={handleOpening}>
+        {context.isOpen ? "Close Customizer" : "Open Customizer"}
+      </button>
     </CustomizerContext.Provider>
   );
 }

docs/_react/bulma-customizer/src/App.module.css

@@ -3,6 +3,16 @@
   --var-item-slider-width: 30rem;
   --var-item-padding: 1rem;
   --var-item-gap: 1rem;
+  transform-origin: bottom right;
+  transition-duration: 300ms;
+  transition-property: opacity, transform;
+  transform: scale(0.9);
+  opacity: 0;
+}
+
+.open {
+  opacity: 1;
+  transform: none;
 }
 
 .controls {
@@ -11,3 +21,9 @@
   gap: 0.5rem;
   padding: 1.5rem;
 }
+
+.button {
+  bottom: 1rem;
+  right: 1rem;
+  position: fixed;
+}