@thecb/components 11.2.14-beta.0 → 11.2.14-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.14-beta.0",
+  "version": "11.2.14-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -4,7 +4,7 @@ import { Box, Motion } from "../../atoms/layouts";
 import { fallbackValues } from "./NavMenu.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 
-// Use transforms (x) rather than left/right
+// Animate with transforms (x) instead of left/right
 const menuVariants = {
   invisible: {
     x: "-100vw",
@@ -23,10 +23,16 @@ const menuVariants = {
 };
 
 const ImposterMenu = styled(Motion)`
+  /* Full-screen fixed overlay */
   position: fixed;
-  top: ${({ headerSize }) => headerSize};
+  top: 0;
   left: 0;
   right: 0;
+  bottom: 0;
+  /* Semi-transparent gray overlay color */
+  background: ${({ themeValues }) =>
+    themeValues?.overlayColor || "rgba(0, 0, 0, 0.5)"};
+  z-index: 9999; /* ensure it's above other content */
 `;
 
 const NavMenuMobile = ({
@@ -42,15 +48,19 @@ const NavMenuMobile = ({
       variants={menuVariants}
       initial="invisible"
       animate={visible ? "visible" : "invisible"}
-      headerSize={headerSize}
+      themeValues={themeValues}
     >
+      {/*
+        The Box is the “menu” portion.
+        It’s narrower, but the parent ImposterMenu is full-screen & gray.
+      */}
       <Box
-        width="100vw"
+        width="100%"
+        maxWidth="400px"
         padding="1rem 0.5rem"
         extraStyles={`
           position: relative;
-          max-width: 400px;
-          height: calc(100vh - 72px);
+          height: 100%;
         `}
         background={themeValues.backgroundColor}
       >

package/src/components/molecules/nav-menu/NavMenuMobile.stories.js

@@ -88,12 +88,12 @@ export const ProfileMenu = {
     };
 
     return (
-      <Box>
+      <>
         <ButtonWithAction onClick={toggleMenu}>
           {visible ? "Hide Menu" : "Show Menu"}
         </ButtonWithAction>
         <NavMenuMobile {...args} visible={visible} />
-      </Box>
+      </>
     );
   }
 };
@@ -113,12 +113,12 @@ export const InteractiveMenu = {
     };
 
     return (
-      <Box>
+      <>
         <ButtonWithAction onClick={toggleMenu}>
           {visible ? "Hide Menu" : "Show Menu"}
         </ButtonWithAction>
         <NavMenuMobile {...args} visible={visible} />
-      </Box>
+      </>
     );
   }
 };