rhein-sw-website/components/Navbar/MobileNav.tsx

'use client';

import {navLinks} from "@/constant/Constant";
import Link from "next/link";
import React, {useContext} from "react";
import {CgClose} from "react-icons/cg";
import {ThemeContext} from "@/components/provider/ThemeProvider";
import {useThemeColors} from "@/utils/useThemeColors";

type Props = {
    showNav: boolean;
    closeNav: () => void;
};

const MobileNav = ({closeNav, showNav}: Props) => {
    const navOpen = showNav ? "translate-y-0 opacity-100" : "-translate-y-20 opacity-0 pointer-events-none";
    const {theme, toggleTheme} = useContext(ThemeContext);
    const colors = useThemeColors();

    const textClass = theme === "dark" ? "text-white" : "text-black";

    return (
        <div className="lg:hidden">
            <div
                className={`fixed inset-0 z-[10000] transition-opacity duration-500 ${
                    showNav ? "opacity-60 bg-black" : "opacity-0 pointer-events-none"
                }`}
                onClick={closeNav}
            />

            <div
                className={`fixed top-0 left-0 w-full z-[10006] transform ${navOpen} transition-all duration-500 ease-in-out shadow-md rounded-b-2xl`}
                style={{backgroundColor: colors.navBg}}
            >
                <div className={`flex flex-col items-center justify-center py-8 space-y-4 px-4 relative ${textClass}`}>
                    <CgClose
                        onClick={closeNav}
                        className={`absolute top-4 right-6 sm:right-8 sm:w-7 sm:h-7 w-6 h-6 cursor-pointer p-1 ${textClass}`}
                    />

                    {navLinks.map((link) => (
                        <Link href={link.url} key={link.id}>
                            <p className="nav__link uppercase text-[14px] sm:text-[16px] border-b pb-1 border-gray-400 transition-all duration-300 ease-in-out hover:scale-105">
                                {link.label}
                            </p>
                        </Link>
                    ))}

                    <button
                        onClick={toggleTheme}
                        className={`mt-4 w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 transition-all duration-300 ${textClass}`}
                        style={{backgroundColor: colors.secondaryBg}}
                    >
                        {theme === "dark" ? "🌙" : "☀️"}
                    </button>
                </div>
            </div>
        </div>
    );
};

export default MobileNav;