movie-web/src/components/layout/Navigation.tsx

75 lines
2.3 KiB
TypeScript
Raw Normal View History

2023-08-20 18:45:07 +02:00
import { ReactNode } from "react";
import { Link } from "react-router-dom";
2022-12-13 23:50:13 +01:00
import { IconPatch } from "@/components/buttons/IconPatch";
import { Icons } from "@/components/Icon";
2023-08-20 17:59:46 +02:00
import { Lightbar } from "@/components/utils/Lightbar";
import { conf } from "@/setup/config";
2023-10-21 21:44:08 +02:00
import { useBannerSize } from "@/stores/banner";
2022-02-25 21:50:36 +01:00
import { BrandPill } from "./BrandPill";
export interface NavigationProps {
children?: ReactNode;
2023-01-07 21:36:18 +01:00
bg?: boolean;
2023-09-06 20:27:17 +02:00
noLightbar?: boolean;
}
export function Navigation(props: NavigationProps) {
const bannerHeight = useBannerSize();
2022-02-25 21:50:36 +01:00
return (
2023-08-20 17:59:46 +02:00
<>
2023-09-06 20:27:17 +02:00
{!props.noLightbar ? (
2023-10-21 21:44:08 +02:00
<div
className="absolute inset-x-0 top-0 flex h-[88px] items-center justify-center"
style={{
top: `${bannerHeight}px`,
}}
>
2023-09-06 20:27:17 +02:00
<div className="absolute inset-x-0 -mt-[22%] flex items-center sm:mt-0">
<Lightbar />
</div>
2023-02-20 03:42:52 +01:00
</div>
2023-09-06 20:27:17 +02:00
) : null}
2023-08-20 17:59:46 +02:00
<div
2023-10-21 21:44:08 +02:00
className="fixed pointer-events-none left-0 right-0 top-0 z-10 min-h-[150px]"
2023-08-20 17:59:46 +02:00
style={{
top: `${bannerHeight}px`,
}}
>
2023-10-21 21:44:08 +02:00
<div className="fixed left-0 right-0 flex items-center">
2023-08-20 17:59:46 +02:00
<div
className={`${
props.bg ? "opacity-100" : "opacity-0"
} absolute inset-0 block bg-background-main transition-opacity duration-300`}
2023-02-20 03:42:52 +01:00
>
2023-10-21 21:44:08 +02:00
<div className="absolute -bottom-24 h-24 w-full bg-gradient-to-b from-background-main to-transparent" />
2023-08-20 17:59:46 +02:00
</div>
2023-10-21 21:44:08 +02:00
<div className="pointer-events-auto px-7 py-5 relative flex flex-1 items-center space-x-3">
2023-09-06 20:43:45 +02:00
<Link className="block" to="/">
<BrandPill clickable />
</Link>
2023-08-20 17:59:46 +02:00
<a
href={conf().DISCORD_LINK}
target="_blank"
rel="noreferrer"
2023-09-06 20:43:45 +02:00
className="text-xl text-white"
2023-08-20 17:59:46 +02:00
>
2023-09-06 20:43:45 +02:00
<IconPatch icon={Icons.DISCORD} clickable downsized />
2023-08-20 17:59:46 +02:00
</a>
<a
href={conf().GITHUB_LINK}
target="_blank"
rel="noreferrer"
2023-09-06 20:43:45 +02:00
className="text-xl text-white"
2023-08-20 17:59:46 +02:00
>
2023-09-06 20:43:45 +02:00
<IconPatch icon={Icons.GITHUB} clickable downsized />
2023-08-20 17:59:46 +02:00
</a>
2023-09-06 20:43:45 +02:00
{props.children}
2023-08-20 17:59:46 +02:00
</div>
2023-02-20 03:42:52 +01:00
</div>
2022-02-25 21:50:36 +01:00
</div>
2023-08-20 17:59:46 +02:00
</>
);
2022-02-25 21:50:36 +01:00
}