diff --git a/src/app/base/components/PageContent/PageContent.test.tsx b/src/app/base/components/PageContent/PageContent.test.tsx
index 3707efd3c7..02cdfd9a7b 100644
--- a/src/app/base/components/PageContent/PageContent.test.tsx
+++ b/src/app/base/components/PageContent/PageContent.test.tsx
@@ -1,6 +1,15 @@
import PageContent from "./PageContent";
-import { renderWithBrowserRouter, screen, within } from "testing/utils";
+import { preferencesNavItems } from "app/preferences/constants";
+import { settingsNavItems } from "app/settings/constants";
+import {
+ getTestState,
+ renderWithBrowserRouter,
+ screen,
+ within,
+} from "testing/utils";
+
+const state = getTestState();
it("displays sidebar with provided content", () => {
renderWithBrowserRouter(
@@ -29,3 +38,79 @@ it("displays hidden sidebar when no content provided", () => {
);
expect(screen.queryByRole("complementary")).toHaveClass("is-collapsed");
});
+
+it("shows the secondary navigation for settings", () => {
+ state.status.authenticated = true;
+ state.status.connected = true;
+ renderWithBrowserRouter(
+
+ content
+ ,
+ { route: "/settings/configuration/general", state }
+ );
+
+ expect(screen.getByRole("navigation")).toBeInTheDocument();
+
+ settingsNavItems.forEach((item) => {
+ expect(screen.getByText(item.label)).toBeInTheDocument();
+ });
+});
+
+it("shows the secondary navigation for preferences", () => {
+ state.status.authenticated = true;
+ state.status.connected = true;
+ renderWithBrowserRouter(
+
+ content
+ ,
+ { route: "/account/prefs/details", state }
+ );
+
+ expect(screen.getByRole("navigation")).toBeInTheDocument();
+
+ preferencesNavItems.forEach((item) => {
+ expect(screen.getByText(item.label)).toBeInTheDocument();
+ });
+});
+
+it("doesn't show the side nav if not authenticated", () => {
+ state.status.authenticated = false;
+ state.status.connected = true;
+ renderWithBrowserRouter(
+
+ content
+ ,
+ { route: "/account/prefs/details", state }
+ );
+
+ expect(screen.queryByRole("navigation")).not.toBeInTheDocument();
+});
+
+it("doesn't show the side nav if not connected", () => {
+ state.status.authenticated = true;
+ state.status.connected = false;
+ renderWithBrowserRouter(
+
+ content
+ ,
+ { route: "/account/prefs/details", state }
+ );
+
+ expect(screen.queryByRole("navigation")).not.toBeInTheDocument();
+});
diff --git a/src/app/base/components/PageContent/PageContent.tsx b/src/app/base/components/PageContent/PageContent.tsx
index eaa224f9b4..e7d217ae9d 100644
--- a/src/app/base/components/PageContent/PageContent.tsx
+++ b/src/app/base/components/PageContent/PageContent.tsx
@@ -1,6 +1,7 @@
import type { HTMLProps, ReactNode } from "react";
import classNames from "classnames";
+import { useSelector } from "react-redux";
import { matchPath, useLocation } from "react-router-dom-v5-compat";
import AppSidePanel from "../AppSidePanel";
@@ -11,6 +12,7 @@ import SecondaryNavigation from "../SecondaryNavigation";
import { useThemeContext } from "app/base/theme-context";
import { preferencesNavItems } from "app/preferences/constants";
import { settingsNavItems } from "app/settings/constants";
+import status from "app/store/status/selectors";
export type Props = {
children?: ReactNode;
@@ -35,18 +37,21 @@ const PageContent = ({
const { pathname } = useLocation();
const isSettingsPage = matchPath("settings/*", pathname);
const isPreferencesPage = matchPath("account/prefs/*", pathname);
- const isSideNavVisible = isSettingsPage || isPreferencesPage;
+ const authenticated = useSelector(status.authenticated);
+ const connected = useSelector(status.connected);
+ const hasSecondaryNav = isSettingsPage || isPreferencesPage;
+ const isSecondaryNavVisible = hasSecondaryNav && authenticated && connected;
const { theme } = useThemeContext();
return (
<>
- {isSideNavVisible ? (
+ {isSecondaryNavVisible ? (