diff --git a/src/components/navigation-bar/components.test-pw.tsx b/src/components/navigation-bar/components.test-pw.tsx
index 99db345610..5f2e90632b 100644
--- a/src/components/navigation-bar/components.test-pw.tsx
+++ b/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 (
<>
-
+
{error}
>
);
diff --git a/src/components/navigation-bar/navigation-bar-test.stories.tsx b/src/components/navigation-bar/navigation-bar-test.stories.tsx
index 0063f0da35..d3b6b5f0c0 100644
--- a/src/components/navigation-bar/navigation-bar-test.stories.tsx
+++ b/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 (
+ <>
+
+ {error}
+ >
+ );
+};
+
export const ResponsivePadding = () => {
return Example content;
};
diff --git a/src/components/navigation-bar/navigation-bar.component.tsx b/src/components/navigation-bar/navigation-bar.component.tsx
index ab7022558f..c391c3c1a9 100644
--- a/src/components/navigation-bar/navigation-bar.component.tsx
+++ b/src/components/navigation-bar/navigation-bar.component.tsx
@@ -40,27 +40,27 @@ export const NavigationBar = ({
const navbarRef = useRef(null);
return (
-
-
{!isLoading && children}
-
-
+
+
);
};
diff --git a/src/components/navigation-bar/navigation-bar.pw.tsx b/src/components/navigation-bar/navigation-bar.pw.tsx
index 7724f16a68..cbab856c44 100644
--- a/src/components/navigation-bar/navigation-bar.pw.tsx
+++ b/src/components/navigation-bar/navigation-bar.pw.tsx
@@ -39,7 +39,7 @@ test.describe("Test props for NavigationBar component", () => {
}) => {
await mount();
- await expect(page.locator("#error-div")).toContainText("");
+ await expect(page.locator("#error-div")).toHaveText("");
});
specialCharacters.forEach((childrenValue) => {