Moved Navbar-related components out of 'Home' directory.

components/Navbar/DesktopNav.tsx

@@ -0,0 +1,96 @@
+"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-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 ${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={`${contentSize} font-bold transition-all duration-300 ease-in-out`}
+                    style={{color: colors.primaryText}}>
+                    <span className="text-lg md:text-xl 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} transition-all duration-300 ease-in-out`}
+                               style={{color: colors.primaryText}}>{link.label}</p>
+                        </Link>
+                    ))}
+                </div>
+
+                {/* Right Side Buttons */}
+                <div className="flex items-center space-x-3 transition-all duration-300 ease-in-out">
+                    {/* Portal Button */}
+                    <button
+                        className={`${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 */}
+                    <button
+                        onClick={toggleTheme}
+                        className="w-7 h-7 flex 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 text-black lg:hidden transition-all duration-300 ease-in-out"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Nav;

components/Navbar/MobileNav.tsx

@@ -0,0 +1,43 @@
+import {navLinks} from "@/constant/Constant";
+import Link from "next/link";
+import React from "react";
+import {CgClose} from "react-icons/cg";
+
+type Props = {
+    showNav: boolean;
+    closeNav: () => void;
+};
+
+const MobileNav = ({closeNav, showNav}: Props) => {
+    const navOpen = showNav ? "translate-x-0" : "translate-x-[-100%]";
+
+    return (
+        <div>
+            {/* overlay */}
+            <div
+                className={`fixed ${navOpen} inset-0 transform transition-all duration-500 z-[10000] bg-black opacity-70 w-full h-screen`}
+            ></div>
+            {/* Navlinks */}
+            <div
+                className={`text-white ${navOpen} fixed justify-center flex flex-col h-full transform transition-all duration-500 delay-300 w-[80%] sm:w-[60%] bg-indigo-900 space-y-6 z-[10006]`}
+            >
+                {navLinks.map((link) => {
+                    return (
+                        <Link href={link.url} key={link.id}>
+                            <p className="nav__link text-white text-[20px] ml-12 border-b-[1.5px] pb-1 border-white sm:text-[30px]">
+                                {link.label}
+                            </p>
+                        </Link>
+                    );
+                })}
+                {/* Close icon */}
+                <CgClose
+                    onClick={closeNav}
+                    className="absolute top-[0.7rem] right-[1.4rem] sm:w-8 sm:h-8 w-6 h-6"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default MobileNav;

components/Navbar/Nav.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React, {useState} from "react";
+import DesktopNav from "./DesktopNav";
+import MobileNav from "./MobileNav";
+
+const Nav = () => {
+    const [showNav, setShowNav] = useState(false);
+    const handleNavShow = () => {
+        setShowNav(true);
+    };
+    const handleNavHide = () => {
+        setShowNav(false);
+    };
+
+    return (
+        <div>
+            <DesktopNav openNav={handleNavShow}/>
+            <MobileNav showNav={showNav} closeNav={handleNavHide}/>
+        </div>
+    );
+};
+
+export default Nav;