Only close sidebar if the event target is in body (#64)

* Only close sidebar if the event target is in body

The svg for the left/right arrows were being swapped when the nav bar expanded.
If this happened on click, the svg clicked would no longer be in the document
and the nav bar would collapse immediately after expanding.

Add a menu item to the sidebar story

* Stop propagation

Author: TylerZeroMaster

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",

src/components/SidebarNav.stories.tsx

@@ -10,7 +10,8 @@ import { BodyPortal } from "./BodyPortal";
 import { NavBar } from "./NavBar";
 import { NavBarLogo } from "./NavBarLogo";
 import React from "react";
-import { breakpoints } from "../../src/theme";
+import { breakpoints, colors } from "../../src/theme";
+import { NavBarPopoverButton, PopoverContainer } from "./NavBarMenuButtons";
 
 const GlobalStyle = createGlobalStyle`
   html, body, #ladle-root {
@@ -212,6 +213,15 @@ const SidebarNavAndMain = () => {
   );
 };
 
+const InfoMenuButton = styled(NavBarPopoverButton)`
+  &:hover {
+    svg path {
+      fill: ${colors.palette.lightBlue};
+    }
+  }
+`;
+
+
 const BodyPortalSidebarNavAndMain = () => {
   return (
     <BodyPortalSlotsContext.Provider value={["sidebar", "nav", "main"]}>
@@ -229,6 +239,12 @@ const BodyPortalSidebarNavAndMain = () => {
         </StyledBodyPortalSidebarNav>
         <NavBar>
           <h1>Title</h1>
+          <InfoMenuButton label="Menu">
+            <PopoverContainer>
+              <button>Example button</button>
+              <button>Another button</button>
+            </PopoverContainer>
+          </InfoMenuButton>
         </NavBar>
         <StyledBodyPortalMain tagName="main" slot="main">
           <h1>

src/components/SidebarNav/index.tsx

@@ -65,7 +65,8 @@ export const SidebarNavBase = ({
         isMobile &&
         !navIsCollapsed &&
         sidebarNavRef?.current &&
-        !sidebarNavRef.current.contains(event.target)
+        !sidebarNavRef.current.contains(event.target) &&
+        document.body.contains(event.target)
       ) {
         setNavIsCollapsed(true);
       }
@@ -116,8 +117,9 @@ export const SidebarNavBase = ({
         ref={toggleButtonRef}
         data-testid="sidebarnav-toggle"
         className={classNames({ collapsed: navIsCollapsed })}
-        onClick={() => {
+        onClick={(e) => {
           setNavIsCollapsed(!navIsCollapsed);
+          e.stopPropagation();
         }}
         aria-label={
           navIsCollapsed ? "Expand navigation" : "Collapse navigation"