/packages/react_ui/src/pages/:workspace/Layout.tsx at fc159b1517d0ed184bcd00d32cd926d153aa64ee

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import { HamburgerMenuIcon } from "@radix-ui/react-icons";
import {
	Box,
	type BoxProps,
	Container,
	Flex,
	Grid,
	Heading,
	IconButton,
	ScrollArea,
	Text,
} from "@radix-ui/themes";
import { type Worker } from "@yamori/proto/yamori/worker/v1/worker_pb.js";
import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
import { type FC, type ReactNode, use, useCallback, useState } from "react";

import * as CopyrightNotice from "../../components/CopyrightNotice.ts";
import { Logo } from "../../components/Logo.tsx";
import * as NavigationMenu from "../../components/NavigationMenu.ts";
import { URLContext } from "../../contexts/Router.tsx";
import { useViewTransition } from "../../hooks/useViewTransition.ts";

import * as calendar from "./calendar/page.tsx";
import * as paidLeaveProvisionTable from "./paid-leave-provision-table/page.tsx";
import * as summary from "./summary/page.tsx";
import * as workers from "./workers/page.tsx";
import * as workersNew from "./workers/new/page.tsx";
import * as workerDashboard from "./workers/:id/Dashboard.tsx";
import * as leaveDefinitions from "./leave-definitions/page.tsx";
import * as leaveDefinitionsNew from "./leave-definitions/new/page.tsx";

import css from "./Layout.module.css";

export interface LayoutProps extends Pick<BoxProps, "className" | "children" | "style"> {
	title: ReactNode;

	/**
	 * この画面 (シーン) にグローバルな操作・アクション。
	 * Flex コンテナ内となるため、 Fragment で渡すとレイアウトされる。
	 */
	actions?: ReactNode;

	defaultMenuOpened?: boolean;

	workspace: Workspace;

	worker?: Worker;
}

export const Layout: FC<LayoutProps> = ({
	children,
	title,
	actions,
	defaultMenuOpened = false,
	workspace,
	worker,
	...rest
}) => {
	const viewTransition = useViewTransition();

	const url = use(URLContext);

	const [isMenuOpened, setIsMenuOpened] = useState(defaultMenuOpened);

	const toggleMenu = useCallback(() => {
		viewTransition(() => {
			setIsMenuOpened((prev) => !prev);
		});
	}, [viewTransition]);

	return (
		<Grid
			{...rest}
			inset="0"
			height="100%"
			columns={{ initial: "1", md: "minmax(15rem, max-content) minmax(0, 1fr)" }}
			rows="max-content minmax(0, 1fr)"
		>
			<Flex
				className={css.appbar}
				display={{ initial: "none", md: "flex" }}
				align="center"
				justify="center"
			>
				<a className={css.logo} href="/">
					<Logo />
				</a>
			</Flex>
			<Flex className={css.appbar} p="2" align="center" gapX="3">
				<Box display={{ md: "none" }}>
					<IconButton variant="soft" onClick={toggleMenu}>
						<HamburgerMenuIcon />
					</IconButton>
				</Box>
				<Container size={{ initial: "4", md: "2", lg: "3" }}>
					<Flex align="center" minHeight="var(--space-6)">
						<Box flexGrow="1" flexShrink="1">
							<Heading size="3">{title}</Heading>
						</Box>
						{actions && (
							<Flex justify="end" gapX="1">
								{actions}
							</Flex>
						)}
					</Flex>
				</Container>
			</Flex>
			<Flex
				className={css.menu}
				p="2"
				gridRowStart="2"
				gridColumnStart="1"
				display={{ initial: isMenuOpened ? "flex" : "none", md: "flex" }}
				direction="column"
				gap="2"
			>
				<Box asChild flexGrow="1" flexShrink="1">
					<ScrollArea>
						<NavigationMenu.Root>
							<NavigationMenu.Group title="労働者管理">
								<NavigationMenu.Item current={calendar.pattern.test(url)}>
									<a href={calendar.href({ workspace })}>
										<calendar.Title />
									</a>
								</NavigationMenu.Item>
								<NavigationMenu.Item current={summary.pattern.test(url)}>
									<a href={summary.href({ workspace })}>
										<summary.Title />
									</a>
								</NavigationMenu.Item>
								<NavigationMenu.Item current={workers.pattern.test(url)}>
									<a href={`/${workspace.id?.value}/workers`}>労働者一覧</a>
								</NavigationMenu.Item>
								{workspace.workerAddKey && (
									<NavigationMenu.Item current={workersNew.pattern.test(url)}>
										<a href={`/${workspace.id?.value}/workers/new`}>労働者登録</a>
									</NavigationMenu.Item>
								)}
								{worker && (
									<NavigationMenu.Group title={worker.displayName || "労働者メニュー"}>
										<NavigationMenu.Item current={workerDashboard.pattern.test(url)}>
											<a href={workerDashboard.href({ workspace, worker })}>
												<workerDashboard.Title />
											</a>
										</NavigationMenu.Item>
									</NavigationMenu.Group>
								)}
							</NavigationMenu.Group>
							<NavigationMenu.Group title="ワークスペース管理">
								<NavigationMenu.Item current={leaveDefinitions.pattern.test(url)}>
									<a href={`/${workspace.id?.value}/leave-definitions`}>
										休暇・休業種別一覧
									</a>
								</NavigationMenu.Item>
								{workspace.createLeaveDefinitionKey && (
									<NavigationMenu.Item current={leaveDefinitionsNew.pattern.test(url)}>
										<a href={leaveDefinitionsNew.createHref(workspace)}>
											<leaveDefinitionsNew.Title />
										</a>
									</NavigationMenu.Item>
								)}
								<NavigationMenu.Item current={paidLeaveProvisionTable.pattern.test(url)}>
									<a href={paidLeaveProvisionTable.href({ workspace })}>
										<paidLeaveProvisionTable.Title />
									</a>
								</NavigationMenu.Item>
							</NavigationMenu.Group>
						</NavigationMenu.Root>
					</ScrollArea>
				</Box>
				<Flex asChild align="center" justify="end" gap="4">
					<Text size="1" color="gray">
						<CopyrightNotice.ThirdParty />
						<CopyrightNotice.FirstParty />
					</Text>
				</Flex>
			</Flex>
			<Box
				overflowY="auto"
				position="relative"
				gridRowStart="2"
				gridColumnStart={{ initial: "1", md: "2" }}
			>
				{children}
			</Box>
		</Grid>
	);
};