Merge branch 'homepage-refactoring' into 'dev'

Homepage Refactoring - Pt .3 See merge request rheinsw/website!28
2025-04-16 17:37:41 +00:00
parent 66cdadea16
commit 5c60594a4f
36 changed files with 896 additions and 473 deletions
--- a/components/Navbar/DesktopNav.tsx
+++ b/components/Navbar/DesktopNav.tsx
@@ -1,12 +1,12 @@
 "use client";

 import {usePathname} from "next/navigation";
-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";
+import {useThemeColors} from "@/utils/useThemeColors";
+import {navLinks} from "@/constant/Constant";

 type Props = {
    openNav: () => void;
@@ -17,8 +17,9 @@ const Nav = ({openNav}: Props) => {
    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];
+    const colors = useThemeColors();
    const pathname = usePathname();

    const navColorClass = theme === "dark" || !navBg ? "text-white" : "text-black";
@@ -47,63 +48,46 @@ const Nav = ({openNav}: Props) => {
            className={`fixed w-full transition-all duration-300 ease-in-out ${navHeight} z-[1000] ${
                navBg ? "shadow-md" : ""
            }`}
-            style={{
-                backgroundColor: navBg ? "var(--nav-bg)" : "transparent",
-            }}
+            style={{backgroundColor: navBg ? colors.navBg : "transparent"}}
        >
-            <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 ${navColorClass}`}>
+            <div className="flex items-center h-full justify-between w-[90%] xl:w-[80%] mx-auto">
+                <h1 className={`${contentSize} font-bold ${navColorClass}`}>
                    <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">
+                <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 transition-all duration-300 ease-in-out ${
-                                    pathname === link.url
-                                        ? "text-white font-bold"
-                                        : "text-gray-300 font-medium"
-                                }`}
-                            >
+                            <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"
-                                    />
+                                        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>

-                {/* Right Side Buttons */}
-                <div className="flex items-center space-x-3 transition-all duration-300 ease-in-out">
-                    {/* Contact Button */}
-                    <Link href="/contact">
-                        <button
-                            className={`${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 transition-all duration-300 ease-in-out rounded-full`}
-                        >
-                            Kontakt
-                        </button>
-                    </Link>
-
-                    {/* Theme Toggle Button */}
+                <div className="flex items-center space-x-3">
+                    {pathname !== "/contact" && (
+                        <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 transition-all duration-300 ease-in-out ${navColorClass}`}
+                        className={`w-7 h-7 flex items-center justify-center rounded-full ${navColorClass}`}
                        style={{backgroundColor: colors.secondaryBg}}
                    >
                        {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 ${navColorClass}`}
+                        className={`w-6 h-6 cursor-pointer lg:hidden ${navColorClass}`}
                    />
                </div>
            </div>
@@ -111,4 +95,15 @@ const Nav = ({openNav}: Props) => {
    );
 };

+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;
--- a/components/Navbar/MobileNav.tsx
+++ b/components/Navbar/MobileNav.tsx
@@ -1,22 +1,26 @@
-import { navLinks } from "@/constant/Constant";
+'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 { themeColors } from "@/components/Helper/ThemeColors";
+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 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 = themeColors[theme];
+    const {theme, toggleTheme} = useContext(ThemeContext);
+    const colors = useThemeColors();
+
+    const textClass = theme === "dark" ? "text-white" : "text-black";
+
    return (
        <div className="lg:hidden">
-            {/* overlay background */}
            <div
                className={`fixed inset-0 z-[10000] transition-opacity duration-500 ${
                    showNav ? "opacity-60 bg-black" : "opacity-0 pointer-events-none"
@@ -24,17 +28,14 @@ const MobileNav = ({ closeNav, showNav }: Props) => {
                onClick={closeNav}
            />

-            {/* nav menu */}
            <div
-                className={`fixed top-0 left-0 w-full z-[10006] transform ${navOpen} transition-all duration-500 ease-in-out text-[var(--primary-text)] shadow-md rounded-b-2xl`}
-                style={{ backgroundColor: theme === "dark" ? "#2A2A2A" : "#ffffff", color: theme === "dark" ? "#f5f5f5" : "#1a1a1a" }}
+                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">
-                    {/* Close icon */}
+                <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"
-                        style={{ color: colors.primaryText }}
+                        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) => (
@@ -45,11 +46,10 @@ const MobileNav = ({ closeNav, showNav }: Props) => {
                        </Link>
                    ))}

-                    {/* Theme toggle button */}
                    <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"
-                        style={{ backgroundColor: colors.secondaryBg, color: colors.primaryText }}
+                        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>