fix: Go to right page when switching page on content pages (legal / impress)

app/components/content-mdx-provider.tsx

@@ -5,20 +5,26 @@ import { ReactNode } from "react";
 import { ContentLayout, StaticContentLayout } from "@/components/layout";
 import { Intro, Tutorial, Examples, Contribute } from "@/homepage";
 
+const castContentId = (contentId: unknown) => {
+  if (typeof contentId === "string") {
+    return contentId;
+  }
+  return undefined;
+};
+
 const Wrapper = ({
   contentId,
   children,
 }: {
   contentId: unknown;
   children: ReactNode;
 }) => {
-  if (typeof contentId !== "string") {
-    return <StaticContentLayout>{children}</StaticContentLayout>;
-  }
   return contentId === "home" ? (
     <ContentLayout contentId={contentId}>{children}</ContentLayout>
   ) : (
-    <StaticContentLayout>{children}</StaticContentLayout>
+    <StaticContentLayout contentId={castContentId(contentId)}>
+      {children}
+    </StaticContentLayout>
   );
 };
 

app/components/footer.tsx

@@ -95,20 +95,13 @@ export const Footer = ({ sx }: { sx?: FlexProps["sx"] }) => {
           alignItems: ["flex-start", "center"],
         }}
       >
-        <Flex sx={{ flexDirection: ["column", "row"] }} pb={[4, 0]}>
-          {/* <FooterLink>
-            <Trans id="footer.help">Help</Trans>
-          </FooterLink>
-          <FooterLink>
-            <Trans id="footer.contact">Contact</Trans>
-          </FooterLink> */}
-        </Flex>
-
         <Box
           sx={{
             display: ["block", "none"],
 
             width: ["100%", "auto"],
+            mx: [2, 0],
+            mb: [4],
           }}
         >
           <Logo />
@@ -117,8 +110,10 @@ export const Footer = ({ sx }: { sx?: FlexProps["sx"] }) => {
         <Flex
           sx={{
             justifyContent: "flex-end",
-            alignItems: "center",
+            alignItems: ["flex-start", "center"],
             width: ["100%", "auto"],
+            flexDirection: ["column", "row"],
+            mt: [4, 0],
           }}
         >
           <Typography
@@ -127,6 +122,7 @@ export const Footer = ({ sx }: { sx?: FlexProps["sx"] }) => {
               px: [4, 3],
               py: [3, 4],
               color: "secondary.main",
+              order: [7, 0],
             }}
           >
             <Version />
@@ -181,8 +177,9 @@ const useFooterLinkStyles = makeStyles((theme: Theme) => ({
   bottomLink: {
     fontSize: "0.875rem",
 
-    borderLeftStyle: "solid",
-    borderLeftColor: theme.palette.grey[500],
+    borderTopStyle: "solid",
+    borderTopColor: theme.palette.grey[500],
+
     textDecoration: "none",
     cursor: "pointer",
     "&:hover": {
@@ -236,7 +233,8 @@ const FooterLinkBottom = forwardRef<
       sx={{
         px: [4, 3],
         py: [3, 4],
-        borderLeftWidth: ["1px", 0],
+        borderTopWidth: ["1px", 0],
+        width: ["100%", "auto"],
       }}
     >
       {children}

app/components/header.tsx

@@ -94,8 +94,10 @@ const useHeaderStyles = makeStyles<Theme, { isConfiguring: boolean }>(
 
 export const Header = ({
   pageType = "app",
+  contentId,
 }: {
   pageType?: "content" | "app";
+  contentId: string | undefined;
 }) => {
   const router = useRouter();
   const isConfiguring = router.pathname === "/create/[chartId]";
@@ -113,7 +115,7 @@ export const Header = ({
         }}
       >
         <Logo />
-        <MetadataMenu />
+        <MetadataMenu contentId={contentId} />
       </Flex>
       <HeaderBorder />
     </Box>

app/components/layout.tsx

@@ -7,7 +7,7 @@ import { Header, HeaderProgressProvider } from "@/components/header";
 export const AppLayout = ({ children }: { children?: ReactNode }) => (
   <Flex sx={{ minHeight: "100vh", flexDirection: "column" }}>
     <HeaderProgressProvider>
-      <Header pageType="app" />
+      <Header pageType="app" contentId={undefined} />
       <Flex
         component="main"
         role="main"
@@ -34,7 +34,7 @@ export const ContentLayout = ({
         backgroundColor: contentId === "home" ? "grey.100" : "muted.main",
       }}
     >
-      <Header pageType="content" />
+      <Header pageType="content" contentId={contentId} />
       <Flex
         component="main"
         role="main"
@@ -51,7 +51,13 @@ export const ContentLayout = ({
   );
 };
 
-export const StaticContentLayout = ({ children }: { children?: ReactNode }) => {
+export const StaticContentLayout = ({
+  children,
+  contentId,
+}: {
+  children?: ReactNode;
+  contentId: string | undefined;
+}) => {
   return (
     <Flex
       sx={{
@@ -60,7 +66,7 @@ export const StaticContentLayout = ({ children }: { children?: ReactNode }) => {
         backgroundColor: "grey.100",
       }}
     >
-      <Header pageType="content" />
+      <Header pageType="content" contentId={contentId} />
       <Flex
         component="main"
         role="main"
@@ -69,8 +75,13 @@ export const StaticContentLayout = ({ children }: { children?: ReactNode }) => {
           flex: 1,
           width: "100%",
           maxWidth: 1024,
+          my: [4, 6],
           mx: [0, 0, "auto"],
           px: 4,
+
+          "& h2": {
+            mb: 1,
+          },
         }}
       >
         {children}

e2e/actions.ts

@@ -97,6 +97,11 @@ export const createActions = ({
   drawer: {
     close: async () => await screen.locator('text="Back to main"').click(),
   },
+  common: {
+    switchLang: async (lang: "de" | "fr" | "en" | "it") => {
+      await page.locator(`a[hreflang="${lang}"]`).click();
+    },
+  },
 });
 
 export type Actions = ReturnType<typeof createActions>;

e2e/home.spec.ts

@@ -28,9 +28,9 @@ describe("The Home Page", () => {
     expect(await page.locator("html").getAttribute("lang")).toEqual("fr");
   });
 
-  test("language switch should work", async ({ page, screen }) => {
+  test("language switch should work", async ({ page, screen, actions }) => {
     await page.goto("/");
-    await page.locator('a[hreflang="fr"]').click();
+    await actions.common.switchLang("fr");
     await screen.findByText(
       "Visualisez les données ouvertes de l’administration publique suisse",
       undefined,
@@ -41,3 +41,19 @@ describe("The Home Page", () => {
     expect(await page.locator("html").getAttribute("lang")).toBe("fr");
   });
 });
+
+describe("content pages", () => {
+  test("language switch should work", async ({ page, actions, screen }) => {
+    await page.goto("/en/legal-framework");
+
+    await actions.common.switchLang("fr");
+    await screen.findByText(
+      "Utilisation des jeux de données publiés sur visualize.admin.ch",
+      undefined,
+      {
+        timeout: 20 * 1000,
+      }
+    );
+    expect(await page.locator("html").getAttribute("lang")).toBe("fr");
+  });
+});