Thomas
f3014fe271
Modernize board item, application, and integration selection flows with shared Mantine components, batch board actions, improved accessibility, and hardened persistence.
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { AppShellHeader, Group, UnstyledButton } from "@mantine/core";
|
|
|
|
import { Link } from "@homarr/ui";
|
|
|
|
import { ClientBurger } from "./header/burger";
|
|
import { DesktopSearchInput, MobileSearchButton } from "./header/search";
|
|
import { TourTarget } from "./header/tour-target";
|
|
import { UserButton } from "./header/user";
|
|
import { HomarrLogoWithTitle } from "./logo/homarr-logo";
|
|
import { LazySpotlight } from "./header/lazy-spotlight";
|
|
|
|
interface Props {
|
|
logo?: ReactNode;
|
|
actions?: ReactNode;
|
|
hasNavigation?: boolean;
|
|
}
|
|
|
|
export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
|
|
return (
|
|
<AppShellHeader
|
|
maw="100vw"
|
|
zIndex="var(--homarr-z-index-board-header)"
|
|
style={{ overflowX: "hidden" }}
|
|
data-advanced-focus-background
|
|
data-app-shell-header
|
|
>
|
|
<Group h="100%" gap="xl" px="md" justify="apart" wrap="nowrap">
|
|
<Group h="100%" align="center" style={{ flex: 1 }} wrap="nowrap">
|
|
{hasNavigation && <ClientBurger />}
|
|
<UnstyledButton component={Link} href="/">
|
|
{logo ?? <HomarrLogoWithTitle size="md" />}
|
|
</UnstyledButton>
|
|
</Group>
|
|
<TourTarget id="board-search">
|
|
<DesktopSearchInput />
|
|
</TourTarget>
|
|
<Group h="100%" align="center" justify="end" style={{ flex: 1 }} wrap="nowrap">
|
|
{actions}
|
|
<MobileSearchButton />
|
|
<TourTarget id="board-user-menu">
|
|
<UserButton />
|
|
</TourTarget>
|
|
</Group>
|
|
</Group>
|
|
<LazySpotlight />
|
|
</AppShellHeader>
|
|
);
|
|
};
|