111 lines
4.4 KiB
TypeScript
111 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import {usePathname} from "next/navigation";
|
|
import Link from "next/link";
|
|
import React, {useContext, useEffect, useState} from "react";
|
|
import {HiBars3BottomRight} from "react-icons/hi2";
|
|
import {ThemeContext} from "@/components/provider/ThemeProvider";
|
|
import {useThemeColors} from "@/utils/useThemeColors";
|
|
import {navLinks} from "@/constant/Constant";
|
|
|
|
type Props = {
|
|
openNav: () => void;
|
|
};
|
|
|
|
const Nav = ({openNav}: Props) => {
|
|
const [navBg, setNavBg] = useState(false);
|
|
const [navHeight, setNavHeight] = useState("h-[10vh]");
|
|
const [contentSize, setContentSize] = useState("text-base md:text-lg");
|
|
const [buttonSize, setButtonSize] = useState("md:px-6 md:py-2 px-4 py-1 text-sm");
|
|
|
|
const {theme, toggleTheme} = useContext(ThemeContext);
|
|
const colors = useThemeColors();
|
|
const pathname = usePathname();
|
|
|
|
const navColorClass = theme === "dark" || !navBg ? "text-white" : "text-black";
|
|
|
|
useEffect(() => {
|
|
const handler = () => {
|
|
if (window.scrollY >= 90) {
|
|
setNavBg(true);
|
|
setNavHeight("h-[8vh]");
|
|
setContentSize("text-sm md:text-base");
|
|
setButtonSize("md:px-5 md:py-1.5 px-3 py-1 text-xs");
|
|
} else {
|
|
setNavBg(false);
|
|
setNavHeight("h-[10vh]");
|
|
setContentSize("text-base md:text-lg");
|
|
setButtonSize("md:px-6 md:py-2 px-4 py-1 text-sm");
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", handler);
|
|
return () => window.removeEventListener("scroll", handler);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={`fixed w-full transition-all duration-300 ease-in-out ${navHeight} z-[1000] ${
|
|
navBg ? "shadow-md" : ""
|
|
}`}
|
|
style={{backgroundColor: navBg ? colors.navBg : "transparent"}}
|
|
>
|
|
<div className="flex items-center h-full justify-between w-[90%] xl:w-[80%] mx-auto">
|
|
<Link href="/">
|
|
<h1 className={`${contentSize} font-bold cursor-pointer ${navColorClass}`}>
|
|
<span className="text-lg md:text-xl text-pink-700">R</span>hein Software
|
|
</h1>
|
|
</Link>
|
|
|
|
<div className="hidden lg:flex items-center space-x-6">
|
|
{navLinks.map((link) => (
|
|
<Link href={link.url} key={link.id}>
|
|
<p className={`relative group ${contentSize} uppercase ${getNavLinkClasses(pathname === link.url, navBg, theme, navColorClass)}`}>
|
|
{link.label}
|
|
{pathname !== link.url && (
|
|
<span
|
|
className="absolute bottom-0 left-0 w-full h-[2px] bg-current transform transition-transform duration-300 origin-right scale-x-0 group-hover:scale-x-100"/>
|
|
)}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<Link href="/contact">
|
|
<button
|
|
className={`${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 rounded-full`}>
|
|
Kontakt
|
|
</button>
|
|
</Link>
|
|
|
|
<button
|
|
onClick={toggleTheme}
|
|
className={`w-7 h-7 flex items-center justify-center rounded-full ${navColorClass}`}
|
|
style={{backgroundColor: colors.secondaryBg}}
|
|
>
|
|
{theme === "dark" ? "🌙" : "☀️"}
|
|
</button>
|
|
<HiBars3BottomRight
|
|
onClick={openNav}
|
|
className={`w-6 h-6 cursor-pointer lg:hidden ${navColorClass}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const getNavLinkClasses = (
|
|
isActive: boolean,
|
|
navBg: boolean,
|
|
theme: string,
|
|
navColorClass: string
|
|
): string => {
|
|
if (isActive) return !navBg ? "text-white font-bold" : `${navColorClass} font-bold`;
|
|
if (!navBg) return "text-white font-medium";
|
|
return theme === "dark" ? "text-gray-300 font-medium" : "text-gray-700 font-medium";
|
|
};
|
|
|
|
export default Nav;
|