65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import Image from 'next/image';
|
||
|
|
import { useSelectedLayoutSegment } from 'next/navigation';
|
||
|
|
import logo from '@/public/images/kx3dex_radio_logo.png'
|
||
|
|
|
||
|
|
import useScroll from '@/hooks/use-scroll';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
import {
|
||
|
|
NavigationMenu,
|
||
|
|
NavigationMenuContent,
|
||
|
|
NavigationMenuItem,
|
||
|
|
NavigationMenuLink,
|
||
|
|
NavigationMenuList,
|
||
|
|
NavigationMenuTrigger,
|
||
|
|
} from "@/components/navigation-menu"
|
||
|
|
|
||
|
|
const Header = () => {
|
||
|
|
const scrolled = useScroll(5);
|
||
|
|
const selectedLayout = useSelectedLayoutSegment();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
`sticky inset-x-0 top-0 z-30 w-full transition-all border-b border-gray-200`,
|
||
|
|
{
|
||
|
|
'border-b border-gray-200 backdrop-blur-lg': scrolled,
|
||
|
|
'border-b border-gray-200 mb-5': selectedLayout,
|
||
|
|
},
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className="flex items-center justify-between p-4">
|
||
|
|
<div className="flex items-center space-x-4">
|
||
|
|
<Image
|
||
|
|
src={logo}
|
||
|
|
width={100}
|
||
|
|
height={100}
|
||
|
|
alt="Logo Image"
|
||
|
|
priority
|
||
|
|
className="rounded-lg border"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="hidden md:block">
|
||
|
|
<NavigationMenu>
|
||
|
|
<NavigationMenuLink href="/" className="font-bold text-3xl pr-5">Home</NavigationMenuLink>
|
||
|
|
<NavigationMenuLink href="/dexnet" className="font-bold text-3xl pr-5">DexNet</NavigationMenuLink>
|
||
|
|
<NavigationMenuList>
|
||
|
|
<NavigationMenuItem>
|
||
|
|
<NavigationMenuTrigger className="font-bold text-3xl pr-5">Go Kits</NavigationMenuTrigger>
|
||
|
|
<NavigationMenuContent className="flex flex-col min-w-[300px] p-2 absolute right-0">
|
||
|
|
<NavigationMenuLink href="/projects/go-kit-command-center" className="font-bold">Go Kit (Command Center)</NavigationMenuLink>
|
||
|
|
</NavigationMenuContent>
|
||
|
|
</NavigationMenuItem>
|
||
|
|
</NavigationMenuList>
|
||
|
|
</NavigationMenu>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Header;
|