From 0d3ffee8cfb7dd373ab5f268f2e80024b3cf4c40 Mon Sep 17 00:00:00 2001
From: Rahul Kumar <rahulptl2022@gmail.com>
Date: Sat, 8 Mar 2025 00:52:00 +0530
Subject: [PATCH 1/2] ensure side panel closes on outside click on mobile

---
 public/css/docs/layout.css                  | 11 +++++++++++
 src/components/top-nav/side-menu/drawer.jsx |  4 +++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/public/css/docs/layout.css b/public/css/docs/layout.css
index df018470c..cc534c81e 100644
--- a/public/css/docs/layout.css
+++ b/public/css/docs/layout.css
@@ -1418,6 +1418,17 @@ h2 {
 	margin: 12px;
 }
 
+@media screen and (max-width: 640px) {
+	.side-menu-head .icon-button.side-menu-close-button {
+		border: none;
+	}
+	.side-menu-head .icon-button.side-menu-close-button .icon {
+		width: 24px;
+		height: 24px;
+		margin: 0px;
+	}
+}
+
 .side-menu-wrapper {
 	width: 0;
 }
diff --git a/src/components/top-nav/side-menu/drawer.jsx b/src/components/top-nav/side-menu/drawer.jsx
index 5cc6cee6c..b46b0dbd2 100644
--- a/src/components/top-nav/side-menu/drawer.jsx
+++ b/src/components/top-nav/side-menu/drawer.jsx
@@ -798,12 +798,14 @@ class SideMenuDrawer extends React.Component {
 	* @returns {ReactElement} React element
 	*/
 	render() {
+		const isMobile = typeof window !== 'undefined' && window.innerWidth <= 640;
 		return (
 			<Drawer
 				className="side-menu-drawer"
-				variant="persistent"
+				variant={isMobile ? 'temporary' : 'persistent'}
 				anchor="left"
 				open={ this.props.open }
+				onClose={isMobile ? this._onMenuClose : undefined}
 				classes={{
 					paper: 'side-menu-drawer'
 				}}

From 6855b99c19ac4c0c4a140552e4e6b1d6b1f6b234 Mon Sep 17 00:00:00 2001
From: Rahul Kumar <rahulptl2022@gmail.com>
Date: Sun, 9 Mar 2025 02:05:15 +0530
Subject: [PATCH 2/2] use viewport-width module for mobile detection

---
 src/components/top-nav/side-menu/drawer.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/top-nav/side-menu/drawer.jsx b/src/components/top-nav/side-menu/drawer.jsx
index b46b0dbd2..892bf1a17 100644
--- a/src/components/top-nav/side-menu/drawer.jsx
+++ b/src/components/top-nav/side-menu/drawer.jsx
@@ -34,6 +34,7 @@ import namespaces from 'namespace-list';
 import filter from 'filter-pkg-tree';
 import deprefix from 'deprefix-pkg-name';
 import log from 'log';
+import viewportWidth from 'viewport-width';
 import VersionMenu from './version_menu.jsx';
 import Head from './head.jsx';
 import Filter from './filter.jsx';
@@ -798,7 +799,7 @@ class SideMenuDrawer extends React.Component {
 	* @returns {ReactElement} React element
 	*/
 	render() {
-		const isMobile = typeof window !== 'undefined' && window.innerWidth <= 640;
+		const isMobile = viewportWidth() <= 640;
 		return (
 			<Drawer
 				className="side-menu-drawer"