rhein-sw-website/components/Home/Navbar/DesktopNav.tsx

"use client";

import {navLinks} from "@/constant/Constant";
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 {themeColors} from "@/components/Helper/ThemeColors";

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 = themeColors[theme];

    useEffect(() => {
        const handler = () => {
            if (window.scrollY >= 90) {
                setNavBg(true);
                setNavHeight("h-[8vh]");
                setContentSize("text-[9px] md:text-[11px]");
                setButtonSize("md:px-5 md:py-1.5 px-3 py-1 text-xs");
            } else {
                setNavBg(false);
                setNavHeight("h-[10vh]");
                setContentSize("text-[10px] md:text-xs");
                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 ${navBg ? "shadow-md" : "fixed"} w-full transition-all duration-300 ease-in-out ${navHeight} z-[1000]`}
            style={{
                backgroundColor: navBg ? "var(--nav-bg)" : "var(--primary-bg)",
                color: "var(--primary-text)",
            }}
        >
            <div
                className="flex items-center h-full justify-between w-[90%] xl:w-[80%] mx-auto transition-all duration-300 ease-in-out">
                {/* LOGO */}
                <h1 className="text-lg md:text-xl lg:text-2xl font-bold transition-all duration-300 ease-in-out"
                    style={{color: colors.primaryText}}
                >
                    <span className="text-xl md:text-2xl text-pink-700">R</span>hein Software
                </h1>

                {/* Desktop Nav Links */}
                <div className="hidden lg:flex items-center space-x-6 transition-all duration-300 ease-in-out">
                    {navLinks.map((link) => (
                        <Link href={link.url} key={link.id}>
                            <p className={`nav_link ${contentSize} uppercase relative group`}
                               style={{color: colors.primaryText}}
                            >
                                {link.label}
                                <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-pink-700 transition-all duration-300 group-hover:w-full"></span></p>
                        </Link>
                    ))}
                </div>

                {/* Right Side Buttons */}
                <div className="flex items-center space-x-3 transition-all duration-300 ease-in-out">
                    {/* Portal Button - Hidden on mobile */}
                    <button
                        className={`hidden lg:block ${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 transition-all duration-300 ease-in-out rounded-full`}
                    >
                        Portal
                    </button>

                    {/* Theme Toggle Button - Hidden on mobile */}
                    <button
                        onClick={toggleTheme}
                        className="hidden lg:flex w-7 h-7 items-center justify-center rounded-full transition-all duration-300 ease-in-out"
                        style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
                    >
                        {theme === "dark" ? "🌙" : "☀️"}
                    </button>

                    {/* Burger Menu (for mobile) */}
                    <HiBars3BottomRight
                        onClick={openNav}
                        className="w-6 h-6 cursor-pointer lg:hidden transition-all duration-300 ease-in-out"
                        style={{color: colors.primaryText}}
                    />
                </div>
            </div>
        </div>
    );
};

export default Nav;