Frontend migration

2025-04-27 17:33:20 +00:00
parent 01bb308740
commit c3f43016c6
94 changed files with 10729 additions and 0 deletions
--- a/frontend/components/Navbar/DesktopNav.tsx
+++ b/frontend/components/Navbar/DesktopNav.tsx
@@ -0,0 +1,110 @@
+"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;