Remove overlay div

src/pages/examples/index.css

@@ -55,10 +55,10 @@
     background: lightblue;
 }
 
-.examples .content-container.open {
+/* .examples .content-container.open {
     opacity: 0.4;
     pointer-events: none;
-}
+} */
 
 .examples .content-container iframe {
     width: 100%;
@@ -66,7 +66,7 @@
     overflow: hidden;
 }
 
-.examples .content-overlay {
+/* .examples .content-overlay {
     position: absolute;
     z-index: 7;
     padding: 0;
@@ -81,7 +81,7 @@
 
 .examples .content-overlay.open {
     pointer-events: all;
-}
+} */
 
 .examples .page-title {
     position: absolute;

src/pages/examples/index.tsx

@@ -27,9 +27,12 @@ function Examples() {
         iframeRef.current = document.createElement("iframe") as HTMLIFrameElement;
         preview.appendChild(iframeRef.current);
         if(code) {
-            iframeRef.current.contentWindow?.document.open();
-            iframeRef.current.contentWindow?.document.write(code);
-            iframeRef.current.contentWindow?.document.close();
+            const doc = iframeRef.current.contentWindow?.document;
+            if (doc) {
+                doc.open();
+                doc.write(code);
+                doc.close();
+            }
         }
     }
 
@@ -83,7 +86,7 @@ function Examples() {
                 {!collapsed ?  <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
             </button>
             <div className={`page-title${collapsed? " open" : ""}`}>{title}</div>
-            <div className={`content-overlay${collapsed? " open" : ""}`} onClick={toggleCollapsed}></div>
+            {/* <div className={`content-overlay${collapsed? " open" : ""}`} onClick={toggleCollapsed}></div> */}
             <div className={`content-container${collapsed? " open" : ""}`} id="preview"></div>
             <div className={`menu${collapsed? " open" : ""}`}>
                 <div id="index">