diff --git a/src/examples/app-header/AppHeaderExamples.tsx b/src/examples/app-header/AppHeaderExamples.tsx
index 160267ff8..8bafb11e0 100644
--- a/src/examples/app-header/AppHeaderExamples.tsx
+++ b/src/examples/app-header/AppHeaderExamples.tsx
@@ -1,5 +1,7 @@
import { HeaderWithNavigation } from "@examples/header-with-navigation.tsx";
import { HeaderWithMenuClickEvent } from "@examples/header-with-menu-click-event.tsx";
+import { HeaderSignIn } from "@examples/header-with-sign-in.tsx";
+import { HeaderLoggedInMenu } from "@examples/header-logged-in-menu.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export const AppHeaderExamples = () => {
@@ -16,6 +18,18 @@ export const AppHeaderExamples = () => {
figmaExample="">
+
+
+
+
+
+
+
+
);
};
diff --git a/src/examples/header-logged-in-menu.tsx b/src/examples/header-logged-in-menu.tsx
new file mode 100644
index 000000000..fa8bea433
--- /dev/null
+++ b/src/examples/header-logged-in-menu.tsx
@@ -0,0 +1,126 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabAppHeader, GoabAppHeaderMenu, GoabMicrositeHeader } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const HeaderLoggedInMenu = () => {
+ const {version} = useContext(LanguageVersionContext);
+ return (
+
+
+
+ Services
+
+ Manage account
+ Request new staff account
+ System admin
+ Sign out
+
+
+
+ {version === "old" && (
+
+
+ Services
+
+ Manage account
+ Request new staff account
+ System admin
+ Sign out
+
+
+ `}
+ />
+ )}
+
+ {version === "new" && (
+
+
+ Services
+
+ Manage account
+ Request new staff account
+ System admin
+ Sign out
+
+
+ `}
+ />
+ )}
+
+ {version === "old" && (
+
+
+ Services
+
+ Manage account
+ Request new staff account
+ System admin
+ Sign out
+
+
+ `}
+ />
+ )}
+ {version === "new" && (
+
+
+ Services
+
+ Manage account
+ Request new staff account
+ System admin
+ Sign out
+
+
+ `}
+ />
+ )}
+
+ )
+}
+
+export default HeaderLoggedInMenu;
diff --git a/src/examples/header-with-sign-in.tsx b/src/examples/header-with-sign-in.tsx
new file mode 100644
index 000000000..db671ea77
--- /dev/null
+++ b/src/examples/header-with-sign-in.tsx
@@ -0,0 +1,94 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabAppHeader, GoabMicrositeHeader } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const HeaderSignIn = () => {
+ const {version} = useContext(LanguageVersionContext);
+ return (
+
+
+
+ Sign in
+
+
+ {version === "old" && (
+
+
+ Sign in
+
+ `}
+ />
+ )}
+
+ {version === "new" && (
+
+
+ Sign in
+
+ `}
+ />
+ )}
+
+ {version === "old" && (
+
+
+ Sign in
+
+ `}
+ />
+ )}
+ {version === "new" && (
+
+
+ Sign in
+
+ `}
+ />
+ )}
+
+ )
+}
+
+export default HeaderSignIn;
diff --git a/src/routes/components/AppHeader.tsx b/src/routes/components/AppHeader.tsx
index dcb0ea00c..0818fb92d 100644
--- a/src/routes/components/AppHeader.tsx
+++ b/src/routes/components/AppHeader.tsx
@@ -231,7 +231,7 @@ export default function AppHeaderPage() {
heading={
<>
Examples
-
+
}
>