fix(navigation-bar): move context provider to not wrap parent

src/components/navigation-bar/components.test-pw.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import NavigationBar, { NavigationBarProps } from ".";
 import { Menu, MenuDivider, MenuItem } from "../menu";
 import Box from "../box";
+import useMediaQuery from "../../hooks/useMediaQuery";
 
 export const NavigationBarComponent = ({
   children,
@@ -214,6 +215,8 @@ Fixed.parameters = {
 export const NavigationBarWithErrorHandler = ({
   ...props
 }: NavigationBarProps) => {
+  const isLargeScreen = useMediaQuery("(min-width: 600px)");
+  const rightPadding = isLargeScreen ? 2 : 1;
   const [error, setError] = useState("");
   useEffect(() => {
     const handleError = (e: ErrorEvent) => {
@@ -225,7 +228,7 @@ export const NavigationBarWithErrorHandler = ({
   });
   return (
     <>
-      <NavigationBar {...props} />
+      <NavigationBar pr={rightPadding} {...props} />
       <div id="error-div">{error}</div>
     </>
   );

src/components/navigation-bar/navigation-bar-test.stories.tsx

@@ -1,12 +1,14 @@
-import React, { useRef } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import NavigationBar, { NavigationBarProps } from ".";
 import { Menu, MenuItem } from "../menu";
+import useMediaQuery from "../../hooks/useMediaQuery";
 
 export default {
   title: "Navigation Bar/Test",
   includeStories: [
     "DefaultStory",
     "NavigationBarWithSubmenuAndChangingHeight",
+    "WithMediaQuery",
     "ResponsivePadding",
   ],
   parameters: {
@@ -74,6 +76,26 @@ export const NavigationBarWithSubmenuAndChangingHeight = () => {
   );
 };
 
+export const WithMediaQuery = () => {
+  const isLargeScreen = useMediaQuery("(min-width: 600px)");
+  const rightPadding = isLargeScreen ? 2 : 1;
+  const [error, setError] = useState("");
+  useEffect(() => {
+    const handleError = (e: ErrorEvent) => {
+      setError(e.message);
+    };
+    window.addEventListener("error", handleError);
+
+    return () => window.removeEventListener("error", handleError);
+  }, []);
+  return (
+    <>
+      <NavigationBar pr={rightPadding} />
+      <div id="error-div">{error}</div>
+    </>
+  );
+};
+
 export const ResponsivePadding = () => {
   return <NavigationBar>Example content</NavigationBar>;
 };

src/components/navigation-bar/navigation-bar.component.tsx

@@ -40,27 +40,27 @@ export const NavigationBar = ({
   const navbarRef = useRef(null);
 
   return (
-    <FixedNavigationBarContextProvider
+    <StyledNavigationBar
+      role="navigation"
+      data-component={isGlobal ? "global-header" : "navigation-bar"}
+      aria-label={isGlobal ? "Global Header" : ariaLabel}
+      navigationType={isGlobal ? "black" : navigationType}
       orientation={isGlobal ? "top" : orientation}
       offset={isGlobal ? "0px" : offset}
       position={isGlobal ? "fixed" : position}
-      navbarRef={navbarRef}
+      {...props}
+      isGlobal={isGlobal}
+      ref={navbarRef}
     >
-      <StyledNavigationBar
-        role="navigation"
-        data-component={isGlobal ? "global-header" : "navigation-bar"}
-        aria-label={isGlobal ? "Global Header" : ariaLabel}
-        navigationType={isGlobal ? "black" : navigationType}
+      <FixedNavigationBarContextProvider
         orientation={isGlobal ? "top" : orientation}
         offset={isGlobal ? "0px" : offset}
         position={isGlobal ? "fixed" : position}
-        {...props}
-        isGlobal={isGlobal}
-        ref={navbarRef}
+        navbarRef={navbarRef}
       >
         {!isLoading && children}
-      </StyledNavigationBar>
-    </FixedNavigationBarContextProvider>
+      </FixedNavigationBarContextProvider>
+    </StyledNavigationBar>
   );
 };
 

src/components/navigation-bar/navigation-bar.pw.tsx

@@ -39,7 +39,7 @@ test.describe("Test props for NavigationBar component", () => {
   }) => {
     await mount(<NavigationBarWithErrorHandler />);
 
-    await expect(page.locator("#error-div")).toContainText("");
+    await expect(page.locator("#error-div")).toHaveText("");
   });
 
   specialCharacters.forEach((childrenValue) => {