fix(page): hide PageSideBar onClick on mobile when isManagedSidebar (#4781)

* fix(page): hide PageSideBar onClick on mobile when isManagedSidebar

* fix lint

* update snapshot

* address feedback

* fix lint

* revert to 250ms

* use mainRef instead to fix trigger on button click

Author: redallen

packages/react-core/src/components/Page/Page.tsx

@@ -91,6 +91,7 @@ export class Page extends React.Component<PageProps, PageState> {
     isNotificationDrawerExpanded: false,
     onNotificationDrawerExpand: () => null
   };
+  mainRef = React.createRef<HTMLDivElement>();
 
   constructor(props: PageProps) {
     super(props);
@@ -107,30 +108,50 @@ export class Page extends React.Component<PageProps, PageState> {
   componentDidMount() {
     const { isManagedSidebar, onPageResize } = this.props;
     if (isManagedSidebar || onPageResize) {
-      window.addEventListener('resize', debounce(this.handleResize, 250));
+      window.addEventListener('resize', this.handleResize);
+      const currentRef = this.mainRef.current;
+      if (currentRef) {
+        currentRef.addEventListener('mousedown', this.handleMainClick);
+        currentRef.addEventListener('touchstart', this.handleMainClick);
+      }
       // Initial check if should be shown
-      this.handleResize();
+      this.resize();
     }
   }
 
   componentWillUnmount() {
     const { isManagedSidebar, onPageResize } = this.props;
     if (isManagedSidebar || onPageResize) {
-      window.removeEventListener('resize', debounce(this.handleResize, 250));
+      window.removeEventListener('resize', this.handleResize);
+      const currentRef = this.mainRef.current;
+      if (currentRef) {
+        currentRef.removeEventListener('mousedown', this.handleMainClick);
+        currentRef.removeEventListener('touchstart', this.handleMainClick);
+      }
     }
   }
 
-  handleResize = () => {
-    const { onPageResize } = this.props;
-    const windowSize = window.innerWidth;
+  isMobile = () =>
     // eslint-disable-next-line radix
-    const mobileView = windowSize < Number.parseInt(globalBreakpointXl.value, 10);
+    window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
+
+  resize = () => {
+    const { onPageResize } = this.props;
+    const mobileView = this.isMobile();
     if (onPageResize) {
-      onPageResize({ mobileView, windowSize });
+      onPageResize({ mobileView, windowSize: window.innerWidth });
     }
     this.setState({ mobileView });
   };
 
+  handleResize = debounce(this.resize, 250);
+
+  handleMainClick = (ev: any) => {
+    if (this.isMobile() && this.state.mobileIsNavOpen && this.mainRef.current) {
+      this.setState({ mobileIsNavOpen: false });
+    }
+  };
+
   onNavToggleMobile = () => {
     this.setState(prevState => ({
       mobileIsNavOpen: !prevState.mobileIsNavOpen
@@ -178,6 +199,7 @@ export class Page extends React.Component<PageProps, PageState> {
 
     const main = (
       <main
+        ref={this.mainRef}
         role={role}
         id={mainContainerId}
         className={css(styles.pageMain)}