Skip to content

Conversation

@pranay911
Copy link

Description

Adds a close button (×) inside the amp-sidebar component in the responsive menu example to improve user experience. Previously, users could only close the sidebar by clicking the hamburger button again, which wasn't intuitive. Now there's a dedicated, clearly visible close button inside the sidebar.

Changes

  • Added close button with × symbol inside the amp-sidebar element
  • Positioned absolutely at top-right corner with proper styling
  • Button uses on="tap:sidebar.close" to close the sidebar
  • Added CSS styling for better visibility:
    • White background with border and shadow for contrast
    • Hover states for better UX
    • Focus outline for accessibility
    • Proper z-index to ensure visibility above content
  • Added padding-top to sidebar to prevent content overlap with close button

Testing

  • Tested locally at http://localhost:8000/examples/responsive-menu.amp.html
  • Verified button appears correctly in the top-right corner of the sidebar
  • Verified button closes the sidebar when clicked
  • Verified button is visible and accessible with proper styling
  • Tested on responsive viewport sizes

Screenshots

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant