From 6c35dd9e7ff5bd0cca01a8da9264ba946a885f51 Mon Sep 17 00:00:00 2001
From: Pranay Gaikwad <pranaygaikwad1432@gmail.com>
Date: Tue, 2 Dec 2025 23:47:06 +0530
Subject: [PATCH]    Add close button to responsive menu sidebar

---
 examples/responsive-menu.amp.html | 41 +++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/examples/responsive-menu.amp.html b/examples/responsive-menu.amp.html
index ac47236be165..928e8ba1182d 100644
--- a/examples/responsive-menu.amp.html
+++ b/examples/responsive-menu.amp.html
@@ -83,10 +83,45 @@
     }
     #sidebar {
       width: 350px;
+      position: relative;
+      background: white;
+      padding-top: 60px;
+    }
+    #sidebar amp-list {
+      position: relative;
+      z-index: 1;
     }
     #sidebar section[expanded] {
       background: white;
     }
+    #sidebar .close-button {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      padding: 10px 15px;
+      font-size: 2em;
+      line-height: 1;
+      background: rgba(255, 255, 255, 0.95);
+      border: 2px solid #333;
+      border-radius: 4px;
+      color: #333;
+      cursor: pointer;
+      z-index: 9999;
+      min-width: 40px;
+      min-height: 40px;
+      display: block;
+      text-align: center;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    }
+    #sidebar .close-button:hover {
+      color: #000;
+      background: #fff;
+      border-color: #000;
+    }
+    #sidebar .close-button:focus {
+      outline: 2px solid #005fcc;
+      outline-offset: 2px;
+    }
     @media (max-width: 1024px) {
       #megamenu {
         display: none;
@@ -144,6 +179,12 @@ <h4 class="submenu-heading" aria-hidden="true">{{title}}</h4>
   </header>
 
   <amp-sidebar id="sidebar" layout="nodisplay">
+    <button
+        class="close-button"
+        on="tap:sidebar.close"
+        aria-label="Click to close sidebar">
+      ×
+    </button>
     <amp-list layout="fill" src="https://api.myjson.com/bins/11znw2" items="." single-item>
       <template type="amp-mustache">
         <amp-accordion layout="container" expand-single-section>