add close button on drawer

src/pages/popover/_styles.module.css

@@ -88,6 +88,21 @@ html:has(.drawer:popover-open) {
   }
 }
 
+.drawerFooterButton {
+  background: rgb(var(--gray-600));
+  border: 1px solid rgb(var(--gray-400) / 10%);
+  color: rgb(var(--gray-100));
+  font-size: 0.925rem;
+  padding: 0.3rem 0.75rem;
+}
+
+@media (min-width: 768px) {
+  .drawerFooterButton {
+    font-size: 1.0625rem;
+    padding: 0.5rem 1rem;
+  }
+}
+
 .toastButton {
   background: rgb(var(--gray-700));
   border: 1px solid rgb(var(--gray-600));

src/pages/popover/index.astro

@@ -41,13 +41,18 @@ const title = "popover";
       class={styles.drawerButton}
       popovertarget="drawerTarget">show drawer</button
     >
-    <div id="drawerTarget" class={styles.drawer} popover autofocus>
+    <div id="drawerTarget" class={styles.drawer} popover>
       <div class={styles.drawerInner}>
         <div class={styles.drawerHeader}>how to close this drawer</div>
         <div class={styles.drawerMain}>
           you can close the drawer by pressing the <Code code="esc" inline /> key,
           and you can also be dismissed by selecting outside the drawer area too.
         </div>
+        <div class={styles.drawerFooter}>
+          <button type="button" class={styles.drawerFooterButton} autofocus
+            >close drawer</button
+          >
+        </div>
       </div>
     </div>
   </PageSection>
@@ -90,6 +95,21 @@ const title = "popover";
 
   let selector = "";
 
+  // drawer
+  selector = "#drawerTarget";
+  const drawer = document.querySelector<HTMLElement>(selector);
+  if (!drawer) throw new Error(`${selector} does not exists.`);
+
+  selector = `.${styles.drawerFooterButton}`;
+  const drawerFooterButton =
+    document.querySelector<HTMLButtonElement>(selector);
+  if (!drawerFooterButton) throw new Error(`${selector} does not exists.`);
+
+  drawerFooterButton.addEventListener("click", () => {
+    drawer.hidePopover();
+  });
+
+  // toast
   selector = "#toastButton";
   const toastButton = document.querySelector<HTMLButtonElement>(selector);
   if (!toastButton) throw new Error(`${selector} does not exists.`);