[Feature] main site navigation

api/app/Enums/Role.php

@@ -6,6 +6,7 @@ enum Role: string
 {
     case BASE_USER = 'base_user';
     case APPLICANT = 'applicant';
+    case MANAGER = 'manager';
     case POOL_OPERATOR = 'pool_operator';
     case REQUEST_RESPONDER = 'request_responder';
     case COMMUNITY_RECRUITER = 'community_recruiter';

apps/playwright/tests/admin/auth.spec.ts

@@ -94,6 +94,9 @@ test.describe("Authenticated", () => {
 
   test("Can logout", async ({ applicantPage }) => {
     await applicantPage.gotoHome();
+    await applicantPage.page
+      .getByRole("button", { name: "your account" })
+      .click();
     await applicantPage.page.getByRole("button", { name: /sign out/i }).click();
     const logoutDialog = applicantPage.page.getByRole("alertdialog", {
       name: /sign out/i,
@@ -150,6 +153,7 @@ test.describe("Authenticated", () => {
 
   test.describe("Process operator", () => {
     const processOperatorRestrictedPaths = [
+      "/en/admin",
       "/en/admin/users",
       "/en/admin/settings/announcements",
       "/en/admin/settings/classifications",
@@ -162,7 +166,7 @@ test.describe("Authenticated", () => {
       "/en/admin/pool-candidates",
     ];
 
-    const processOperatorAllowedPaths = ["/en/admin", "/en/admin/pools"];
+    const processOperatorAllowedPaths = ["/en/community", "/en/admin/pools"];
 
     test("user accesses allowed paths only", async ({
       processOperatorPage,
@@ -201,6 +205,7 @@ test.describe("Authenticated", () => {
 
   test.describe("Community recruiter", () => {
     const communityRecruiterRestrictedPaths = [
+      "/en/admin",
       "/en/admin/users",
       "/en/admin/settings/announcements",
       "/en/admin/settings/classifications",
@@ -212,7 +217,7 @@ test.describe("Authenticated", () => {
     ];
 
     const communityRecruiterAllowedPaths = [
-      "/en/admin",
+      "/en/community",
       "/en/admin/pools",
       "/en/admin/talent-requests",
       "/en/admin/communities",
@@ -255,6 +260,7 @@ test.describe("Authenticated", () => {
 
   test.describe("Community admin", () => {
     const communityAdminRestrictedPaths = [
+      "/en/admin",
       "/en/admin/users",
       "/en/admin/settings/announcements",
       "/en/admin/settings/classifications",
@@ -266,7 +272,7 @@ test.describe("Authenticated", () => {
     ];
 
     const communityAdminAllowedPaths = [
-      "/en/admin",
+      "/en/community",
       "/en/admin/pools",
       "/en/admin/talent-requests",
       "/en/admin/communities",

apps/playwright/tests/login-logout.spec.ts

@@ -345,6 +345,7 @@ test.describe("Login and logout", () => {
     // visit somewhere in second page context
     // and make sure we are logged in
     await pageTwo.goto("/en/");
+    await pageTwo.getByRole("button", { name: "your account" }).click();
     await expect(
       pageTwo.getByRole("button", { name: /sign out/i }),
     ).toBeVisible();

apps/web/src/components/AdminContentWrapper/AdminContentWrapper.tsx

@@ -5,7 +5,7 @@ interface AdminContentWrapperProps {
 }
 
 const AdminContentWrapper = ({ children }: AdminContentWrapperProps) => (
-  <div data-h2-wrapper="base(center, full, x2)">
+  <div data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)">
     <div data-h2-padding="base(0, 0, x3, 0)">{children}</div>
   </div>
 );

apps/web/src/components/Header/Header.tsx

@@ -7,6 +7,7 @@ import {
   oppositeLocale,
   useLocale,
 } from "@gc-digital-talent/i18n";
+import { useIsSmallScreen } from "@gc-digital-talent/helpers";
 
 import { GocLogoEn, GocLogoFr, GocLogoWhiteEn, GocLogoWhiteFr } from "../Svg";
 import ThemeSwitcher from "../ThemeSwitcher/ThemeSwitcher";
@@ -31,6 +32,9 @@ const Header = ({ width }: HeaderProps) => {
       "data-h2-wrapper": "base(center, full, x1) p-tablet(center, full, x2)",
     };
   }
+
+  const isSmallScreen = useIsSmallScreen(1080);
+
   return (
     <header
       data-h2-background-color="base(foreground) base:dark(white)"
@@ -83,34 +87,36 @@ const Header = ({ width }: HeaderProps) => {
               </span>
             </a>
           </div>
-          <div
-            data-h2-display="base(flex)"
-            data-h2-flex-direction="base(column) p-tablet(row)"
-            data-h2-gap="base(x.5) p-tablet(x1)"
-            data-h2-align-items="base(center)"
-            data-h2-justify-content="base(center) p-tablet(flex-end)"
-            data-h2-text-align="base(center) p-tablet(left)"
-          >
-            <div>
-              <ThemeSwitcher />
-            </div>
-            <div>
-              <a
-                data-h2-background-color="base:focus-visible(focus)"
-                data-h2-outline="base(none)"
-                data-h2-color="base:hover(secondary.darker) base:focus-visible(black)"
-                href={languageTogglePath}
-                lang={changeToLang === "en" ? "en" : "fr"}
-              >
-                {intl.formatMessage({
-                  defaultMessage:
-                    "<hidden>Changer la langue en </hidden>Français",
-                  id: "Z3h103",
-                  description: "Title for the language toggle link.",
-                })}
-              </a>
+          {!isSmallScreen && (
+            <div
+              data-h2-display="base(flex)"
+              data-h2-flex-direction="base(column) p-tablet(row)"
+              data-h2-gap="base(x.5) p-tablet(x1)"
+              data-h2-align-items="base(center)"
+              data-h2-justify-content="base(center) p-tablet(flex-end)"
+              data-h2-text-align="base(center) p-tablet(left)"
+            >
+              <div>
+                <ThemeSwitcher />
+              </div>
+              <div>
+                <a
+                  data-h2-background-color="base:focus-visible(focus)"
+                  data-h2-outline="base(none)"
+                  data-h2-color="base:hover(secondary.darker) base:focus-visible(black)"
+                  href={languageTogglePath}
+                  lang={changeToLang === "en" ? "en" : "fr"}
+                >
+                  {intl.formatMessage({
+                    defaultMessage:
+                      "<hidden>Changer la langue en </hidden>Français",
+                    id: "Z3h103",
+                    description: "Title for the language toggle link.",
+                  })}
+                </a>
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
     </header>

apps/web/src/components/HeroDeprecated/AdminHero.tsx

@@ -33,7 +33,7 @@ const AdminHero = ({
       data-h2-background="base(linear-gradient(92deg, rgba(175, 103, 255, 0.10) 1.42%, rgba(0, 195, 183, 0.10) 98.58%))"
       data-h2-margin-bottom="base(x3)"
     >
-      <div data-h2-wrapper="base(center, full, x1) base(center, full, x2)">
+      <div data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)">
         <div data-h2-color="base(black)" data-h2-padding="base(x2 0)">
           <div
             data-h2-display="base(flex)"

apps/web/src/components/HeroDeprecated/AdminSubNav.tsx

@@ -16,12 +16,12 @@ export interface AdminSubNavProps {
 
 const AdminSubNav = ({ mode, items }: AdminSubNavProps) => {
   if (mode === "crumbs") {
-    return <Breadcrumbs crumbs={items} fullWidth />;
+    return <Breadcrumbs crumbs={items} />;
   }
 
   return (
     <NavTabs.Root>
-      <NavTabs.List data-h2-wrapper="base(center, full, x1) base(center, full, x2)">
+      <NavTabs.List data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)">
         {items.map((item) => (
           <NavTabs.Item key={item.url}>
             <NavTabs.Link href={item.url}>{item.label}</NavTabs.Link>