Document layout and title

packages/demo/src/App.tsx

@@ -1,19 +1,26 @@
+import { ThemeProvider } from "@emotion/react";
 import CssBaseline from "@mui/material/CssBaseline";
 
 import { I18nProvider } from "./i18n/I18nProvider";
+import { Layout } from "./layout/Layout";
+import theme from "./theme";
 import { UploadPage } from "./upload/UploadPage";
 import { ViewerContextProvider } from "./viewer/ViewerContext";
 import { ViewerPage } from "./viewer/ViewerPage";
 
 function App() {
 	return (
-		<I18nProvider>
-			<CssBaseline />
-			<ViewerContextProvider>
-				<UploadPage />
-				<ViewerPage />
-			</ViewerContextProvider>
-		</I18nProvider>
+		<ThemeProvider theme={theme}>
+			<I18nProvider>
+				<Layout>
+					<CssBaseline />
+					<ViewerContextProvider>
+						<UploadPage />
+						<ViewerPage />
+					</ViewerContextProvider>
+				</Layout>
+			</I18nProvider>
+		</ThemeProvider>
 	);
 }
 export default App;

packages/demo/src/i18n/locales/en.ts

@@ -4,4 +4,12 @@ export const en: Translation = {
 	header: {
 		title: "Viewer",
 	},
+	navbar: {
+		istex: "istex",
+		a_zJournalsList: "Summary Review",
+		documentaryDataset: "Documentary References",
+		specializedCorpus: "Specialized Corpus",
+		istexTdm: "ISTEX TDM",
+		loterre: "Istex Loterre",
+	},
 };

packages/demo/src/i18n/locales/fr.ts

@@ -2,6 +2,14 @@ export const fr = {
 	header: {
 		title: "Viewer",
 	},
+	navbar: {
+		istex: "istex",
+		a_zJournalsList: "Revue de sommaire",
+		documentaryDataset: "Référentiels documentaires",
+		specializedCorpus: "Corpus spécialisés",
+		istexTdm: "ISTEX TDM",
+		loterre: "Istex Loterre",
+	},
 };
 
 export type Translation = typeof fr;

packages/demo/src/layout/Header.tsx

@@ -0,0 +1,44 @@
+import { Box, Container, Stack, Typography } from "@mui/material";
+import headerBackground from "../images/header-background.webp";
+import istexSearchLogo from "../images/istex-search.svg";
+
+export default function Header() {
+	return (
+		<Box
+			component="header"
+			sx={{
+				backgroundImage: `url(${headerBackground})`,
+				backgroundSize: "cover",
+				backgroundPosition: "center",
+				backgroundRepeat: "no-repeat",
+			}}
+		>
+			<Container sx={{ py: 2, pt: 4 }}>
+				<Stack
+					id="home-link"
+					direction="row"
+					spacing={1}
+					component={"a"}
+					href="/"
+					sx={{
+						mb: 1,
+						alignItems: "center",
+						textDecoration: "none",
+					}}
+				>
+					<img src={istexSearchLogo} alt="Istex View" />
+					<Typography
+						component="div"
+						variant="h3"
+						sx={{
+							color: "white",
+							fontWeight: "normal",
+						}}
+					>
+						View
+					</Typography>
+				</Stack>
+			</Container>
+		</Box>
+	);
+}

packages/demo/src/layout/Layout.tsx

@@ -1,3 +1,12 @@
-export function Layout() {
-	return null;
+import Header from "./Header";
+import Navbar from "./NavBar";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<>
+			<Navbar />
+			<Header />
+			{children}
+		</>
+	);
 }

packages/demo/src/layout/NavBar.tsx

@@ -0,0 +1,168 @@
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import MenuIcon from "@mui/icons-material/Menu";
+import {
+	AppBar,
+	Box,
+	Button,
+	Container,
+	IconButton,
+	Menu,
+	MenuItem,
+	Typography,
+} from "@mui/material";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+
+const navbarLinks = {
+	istex: {
+		label: "istex",
+		url: "https://istex.fr/",
+	},
+	others: [
+		{
+			label: "a_zJournalsList",
+			url: "https://revue-sommaire.istex.fr/",
+		},
+		{
+			label: "documentaryDataset",
+			url: "https://documentary-dataset.data.istex.fr/",
+		},
+		{
+			label: "specializedCorpus",
+			url: "https://corpus.istex.fr/instance/corpus-specialises/",
+		},
+		{
+			label: "istexTdm",
+			url: "https://services.istex.fr",
+		},
+		{
+			label: "loterre",
+			url: "https://loterre.istex.fr/",
+		},
+	],
+} as const;
+
+export default function Navbar() {
+	const { t } = useTranslation("navbar");
+	const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
+		null,
+	);
+
+	const handleOpenNavMenu: React.MouseEventHandler<HTMLElement> = (event) => {
+		setAnchorElNav(event.currentTarget);
+	};
+
+	const handleCloseNavMenu = () => {
+		setAnchorElNav(null);
+	};
+
+	return (
+		<AppBar position="sticky" component="nav" sx={{ bgcolor: "white" }}>
+			<Container sx={{ display: "flex", fontSize: "0.625rem" }}>
+				{/* Burger menu that only appears on small screens */}
+				<Box sx={{ display: { xs: "flex", sm: "none" } }}>
+					<IconButton
+						size="small"
+						aria-label="external scientific documentation resources"
+						aria-controls="menu-appbar"
+						aria-haspopup="true"
+						onClick={handleOpenNavMenu}
+					>
+						<MenuIcon />
+					</IconButton>
+					<Menu
+						id="menu-appbar"
+						anchorEl={anchorElNav}
+						anchorOrigin={{
+							vertical: "bottom",
+							horizontal: "left",
+						}}
+						keepMounted
+						transformOrigin={{
+							vertical: "top",
+							horizontal: "left",
+						}}
+						open={Boolean(anchorElNav)}
+						onClose={handleCloseNavMenu}
+						sx={{
+							display: { xs: "block", sm: "none" },
+						}}
+					>
+						{navbarLinks.others.map(({ label, url }) => (
+							<MenuItem key={label} onClick={handleCloseNavMenu}>
+								<Typography
+									component="a"
+									href={url}
+									target="_blank"
+									rel="noreferrer"
+									sx={{ color: "text.primary", textDecoration: "none" }}
+								>
+									{t(label)}
+								</Typography>
+							</MenuItem>
+						))}
+					</Menu>
+				</Box>
+
+				{/* Istex website button */}
+				<Box
+					sx={{
+						flexGrow: 1,
+						display: "flex",
+						alignItems: "inherit",
+						justifyContent: { xs: "center", sm: "start" },
+					}}
+				>
+					<Button
+						href={navbarLinks.istex.url}
+						target="_blank"
+						rel="noreferrer"
+						sx={(theme) => ({
+							gap: 1,
+							color: "text.primary",
+							bgcolor: theme.alpha("#458ca5", 0.2),
+							borderRadius: 0,
+							textDecoration: "none",
+							fontSize: "0.625rem",
+							textTransform: "uppercase",
+						})}
+					>
+						<KeyboardBackspaceIcon />
+						{t(navbarLinks.istex.label)}
+					</Button>
+				</Box>
+
+				{/* External resources that only appear on medium and large screens */}
+				<Box
+					component="ul"
+					sx={{
+						flexGrow: 1,
+						gap: "1px",
+						justifyContent: "flex-end",
+						display: { xs: "none", sm: "flex" },
+					}}
+				>
+					{navbarLinks.others.map(({ label, url }) => (
+						<li key={label}>
+							<Button
+								onClick={handleCloseNavMenu}
+								href={url}
+								target="_blank"
+								rel="noreferrer"
+								sx={{
+									height: "100%",
+									bgcolor: "white",
+									borderRadius: 0,
+									color: "text.primary",
+									fontSize: "0.625rem",
+								}}
+							>
+								{t(label)}
+							</Button>
+						</li>
+					))}
+				</Box>
+			</Container>
+		</AppBar>
+	);
+}

packages/demo/src/theme.ts

@@ -0,0 +1,31 @@
+import { createTheme } from "@mui/material/styles";
+import type {} from "@mui/material/themeCssVarsAugmentation";
+
+export default createTheme({
+	typography: {
+		h1: {
+			fontSize: "2rem",
+			fontWeight: "bold",
+		},
+		h2: {
+			fontSize: "1.75rem",
+			fontWeight: "bold",
+		},
+		h3: {
+			fontSize: "1.5rem",
+			fontWeight: "bold",
+		},
+		h4: {
+			fontSize: "1.25rem",
+			fontWeight: "bold",
+		},
+		h5: {
+			fontSize: "1.125rem",
+			fontWeight: "bold",
+		},
+		h6: {
+			fontSize: "1rem",
+			fontWeight: "bold",
+		},
+	},
+});

packages/demo/tsconfig.app.json

@@ -4,6 +4,7 @@
 	"exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx"],
 	"compilerOptions": {
 		"jsx": "react-jsx",
-		"lib": ["es2024", "DOM", "DOM.Iterable"]
+		"lib": ["es2024", "DOM", "DOM.Iterable"],
+		"types": ["vite/client"]
 	}
 }

packages/demo/tsconfig.node.json

@@ -1,4 +1,7 @@
 {
 	"extends": "../../tsconfig.base.json",
-	"include": ["vite.config.ts"]
+	"include": ["vite.config.ts"],
+	"compilerOptions": {
+		"types": ["vite/client"]
+	}
 }