Gitlab-Migration/rhein-sw-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into 'production'

Browse Source 
Merge branch 'Homepage Refactoring - Pt .3' into 'production'

See merge request rheinsw/website!30
This commit is contained in:
Thatsaphorn
2025-04-16 17:40:59 +00:00
parent 5336eb327e
commit 37cde33b41
36 changed files with 896 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/Navbar/MobileNav.tsx
View File

@@ -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>