packages/mantine/src/components/themedLayoutV2/header/index.tsx
import React from "react";
import {
useGetIdentity,
useActiveAuthProvider,
pickNotDeprecated,
} from "@refinedev/core";
import {
Avatar,
Flex,
Header as MantineHeader,
Sx,
Title,
useMantineTheme,
} from "@mantine/core";
import { RefineThemedLayoutV2HeaderProps } from "../types";
import { HamburgerMenu } from "../hamburgerMenu";
export const ThemedHeaderV2: React.FC<RefineThemedLayoutV2HeaderProps> = ({
isSticky,
sticky,
}) => {
const theme = useMantineTheme();
const authProvider = useActiveAuthProvider();
const { data: user } = useGetIdentity({
v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
});
const borderColor =
theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2];
let stickyStyles: Sx = {};
if (pickNotDeprecated(sticky, isSticky)) {
stickyStyles = {
position: "sticky",
top: 0,
zIndex: 1,
};
}
return (
<MantineHeader
zIndex={199}
height={64}
py={6}
px="sm"
sx={{
borderBottom: `1px solid ${borderColor}`,
...stickyStyles,
}}
>
<Flex
align="center"
justify="space-between"
sx={{
height: "100%",
}}
>
<HamburgerMenu />
<Flex align="center" gap="sm">
{user?.name && (
<Title order={6} data-testid="header-user-name">
{user?.name}
</Title>
)}
{user?.avatar && (
<Avatar src={user?.avatar} alt={user?.name} radius="xl" />
)}
</Flex>
</Flex>
</MantineHeader>
);
};