From 4193e455927a39b2a83a3df2e679d801673803ff Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Sun, 6 Apr 2025 00:20:59 +0200
Subject: [PATCH] Enhance Navbar responsiveness and theming

- Refactor `MobileNav` with theme context support and improved animations.
- Adjust `DesktopNav` background behavior for better clarity.
- Update `Hero` image style with scaling for visual impact.
---
 components/Home/Hero/Hero.tsx    |  2 +-
 components/Navbar/DesktopNav.tsx |  6 ++--
 components/Navbar/MobileNav.tsx  | 60 ++++++++++++++++++++++----------
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/components/Home/Hero/Hero.tsx b/components/Home/Hero/Hero.tsx
index 3a9a949..f2e130f 100644
--- a/components/Home/Hero/Hero.tsx
+++ b/components/Home/Hero/Hero.tsx
@@ -16,7 +16,7 @@ const Hero = () => {
                     alt="Rhein river aerial view"
                     layout="fill"
                     objectFit="cover"
-                    className="blur-md"
+                    className="blur-md scale-105"
                     priority
                 />
                 {/* Dark overlay for better text contrast */}
diff --git a/components/Navbar/DesktopNav.tsx b/components/Navbar/DesktopNav.tsx
index e7d8cf7..381d26e 100644
--- a/components/Navbar/DesktopNav.tsx
+++ b/components/Navbar/DesktopNav.tsx
@@ -40,9 +40,11 @@ const Nav = ({openNav}: Props) => {
 
     return (
         <div
-            className={`fixed ${navBg ? "shadow-md" : "fixed"} w-full transition-all duration-300 ease-in-out ${navHeight} z-[1000]`}
+            className={`fixed w-full transition-all duration-300 ease-in-out ${navHeight} z-[1000] ${
+                navBg ? "shadow-md" : ""
+            }`}
             style={{
-                backgroundColor: navBg ? "var(--nav-bg)" : "var(--primary-bg)",
+                backgroundColor: navBg ? "var(--nav-bg)" : "transparent", // <-- changed
                 color: "var(--primary-text)",
             }}
         >
diff --git a/components/Navbar/MobileNav.tsx b/components/Navbar/MobileNav.tsx
index 853025d..331b6ff 100644
--- a/components/Navbar/MobileNav.tsx
+++ b/components/Navbar/MobileNav.tsx
@@ -1,7 +1,9 @@
 import {navLinks} from "@/constant/Constant";
 import Link from "next/link";
-import React from "react";
+import React, {useContext} from "react";
 import {CgClose} from "react-icons/cg";
+import {ThemeContext} from "@/components/provider/ThemeProvider";
+import {themeColors} from "@/components/Helper/ThemeColors";
 
 type Props = {
     showNav: boolean;
@@ -9,32 +11,52 @@ type Props = {
 };
 
 const MobileNav = ({closeNav, showNav}: Props) => {
-    const navOpen = showNav ? "translate-x-0" : "translate-x-[-100%]";
-
+    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];
     return (
-        <div>
-            {/* overlay */}
+        <div className="lg:hidden">
+            {/* overlay background */}
             <div
-                className={`fixed ${navOpen} inset-0 transform transition-all duration-500 z-[10000] bg-black opacity-70 w-full h-screen`}
-            ></div>
-            {/* Navlinks */}
+                className={`fixed inset-0 z-[10000] transition-opacity duration-500 ${
+                    showNav ? "opacity-60 bg-black" : "opacity-0 pointer-events-none"
+                }`}
+                onClick={closeNav}
+            />
+
+            {/* nav menu */}
             <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]`}
+                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"
+                }}
             >
-                {navLinks.map((link) => {
-                    return (
+                <div className="flex flex-col items-center justify-center py-8 space-y-4 px-4 relative">
+                    {/* Close icon */}
+                    <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}}
+                    />
+
+                    {navLinks.map((link) => (
                         <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]">
+                            <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>
-                    );
-                })}
-                {/* Close icon */}
-                <CgClose
-                    onClick={closeNav}
-                    className="absolute top-[0.7rem] right-[1.4rem] sm:w-8 sm:h-8 w-6 h-6"
-                />
+                    ))}
+
+                    {/* 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}}
+                    >
+                        {theme === "dark" ? "🌙" : "☀️"}
+                    </button>
+                </div>
             </div>
         </div>
     );