target page toggle button for mobile click handling instead of masthead

Author: kmcfaul

packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -74,12 +74,12 @@ export const CompassDockDemo: React.FunctionComponent = () => {
     }
 
     const dockedMastheadElement = document.getElementById('docked-masthead');
-    const dockedMobileMasthead = document.getElementById('mobile-masthead');
+    const dockedMobileMastheadToggle = document.getElementById('mobile-masthead-toggle');
 
     if (
       dockedMastheadElement &&
       !dockedMastheadElement.contains(event.target as Node) &&
-      !dockedMobileMasthead?.contains(event.target as Node) &&
+      !dockedMobileMastheadToggle?.contains(event.target as Node) &&
       (isDockExpandableExpanded || isDockExpanded)
     ) {
       setIsDockExpandableExpanded(false);
@@ -280,6 +280,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
             isSidebarOpen={isDockExpanded}
             onSidebarToggle={onMobileToggle}
             isHamburgerButton
+            id="mobile-masthead-toggle"
           />
         </MastheadToggle>
         <MastheadBrand>

packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx

@@ -77,12 +77,12 @@ export const NavDockedNav: React.FunctionComponent = () => {
     }
 
     const dockedMastheadElement = document.getElementById('docked-masthead');
-    const dockedMobileMasthead = document.getElementById('mobile-masthead');
+    const dockedMobileMastheadToggle = document.getElementById('mobile-masthead-toggle');
 
     if (
       dockedMastheadElement &&
       !dockedMastheadElement.contains(event.target as Node) &&
-      !dockedMobileMasthead?.contains(event.target as Node) &&
+      !dockedMobileMastheadToggle?.contains(event.target as Node) &&
       (isDockExpandableExpanded || isDockExpanded)
     ) {
       setIsDockExpandableExpanded(false);
@@ -300,6 +300,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
             isSidebarOpen={isDockExpanded}
             onSidebarToggle={onMobileToggle}
             isHamburgerButton
+            id="mobile-masthead-toggle"
           />
         </MastheadToggle>
         <MastheadBrand>