landing/src/components/SiteHeader/SiteHeader.tsx

import {
    Anchor,
    Burger,
    Container,
    Drawer,
    Group,
    Stack,
    Text,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { Link, useLocation } from 'react-router-dom';
import { RosettaLogo } from '../RosettaLogo/RosettaLogo';
import classes from './SiteHeader.module.css';

const NAVIGATION = [
    { label: 'Features', to: '/#features' },
    { label: 'Apps', to: '/#apps' },
    { label: 'Encryption', to: '/encryption' },
    { label: 'Proto', to: '/proto' },
    { label: 'Support', to: '/support' },
];

export function SiteHeader() {
    const [opened, { close, toggle }] = useDisclosure(false);
    const { pathname } = useLocation();

    const links = NAVIGATION.map(({ label, to }) => {
        const active =
            (to === '/proto' && pathname.startsWith('/proto')) ||
            (to === '/encryption' && pathname === '/encryption') ||
            (to === '/support' && pathname === '/support');

        return (
            <Anchor
                key={to}
                component={Link}
                to={to}
                onClick={close}
                className={classes.link}
                data-active={active || undefined}
            >
                {label}
            </Anchor>
        );
    });

    return (
        <header className={classes.header}>
            <Container className={classes.inner}>
                <Anchor component={Link} to="/" className={classes.brand} aria-label="Rosetta">
                    <RosettaLogo size={36} />
                    <Text component="span" fw={700} fz="lg">
                        Rosetta
                    </Text>
                </Anchor>

                <Group component="nav" gap="xl" className={classes.navigation}>
                    {links}
                </Group>

                <Burger
                    opened={opened}
                    onClick={toggle}
                    size="sm"
                    className={classes.burger}
                    aria-label="Toggle navigation"
                />
            </Container>

            <Drawer
                opened={opened}
                onClose={close}
                position="right"
                size="xs"
                title="Rosetta"
                classNames={{ title: classes.drawerTitle }}
            >
                <Stack gap="lg">{links}</Stack>
            </Drawer>
        </header>
    );
}