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 { useBannerSize } from "@/hooks/useBanner";
import { conf } from "@/setup/config";
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;
}
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
<>
<div className="absolute inset-x-0 top-0 flex h-[88px] items-center justify-center">
<div className="absolute inset-x-0 -mt-[22%] flex items-center sm:mt-0">
2023-08-20 17:59:46 +02:00
<Lightbar />
2023-02-20 03:42:52 +01:00
</div>
2023-08-20 17:59:46 +02:00
</div>
<div
className="fixed left-0 right-0 top-0 z-10 min-h-[150px]"
2023-08-20 17:59:46 +02:00
style={{
top: `${bannerHeight}px`,
}}
>
<div className="fixed left-0 right-0 flex items-center justify-between px-7 py-5">
<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-08-20 17:59:46 +02:00
<div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-background-main to-transparent" />
</div>
<div className="relative flex w-full items-center justify-center sm:w-fit">
<div className="mr-auto sm:mr-6">
<Link to="/">
<BrandPill clickable />
</Link>
</div>
{props.children}
</div>
<div
className={`${
props.children ? "hidden sm:flex" : "flex"
} relative flex-row gap-4`}
2023-02-20 03:42:52 +01:00
>
2023-08-20 17:59:46 +02:00
<a
href={conf().DISCORD_LINK}
target="_blank"
rel="noreferrer"
className="text-2xl text-white"
>
<IconPatch icon={Icons.DISCORD} clickable />
</a>
<a
href={conf().GITHUB_LINK}
target="_blank"
rel="noreferrer"
className="text-2xl text-white"
>
<IconPatch icon={Icons.GITHUB} clickable />
</a>
</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
}