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

Revert some changes

Browse Source
This commit is contained in:
Thatsaphorn
2025-04-05 23:28:12 +02:00
parent 261354e96d
commit 481aa0fe63
2 changed files with 32 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/Home/Navbar/DesktopNav.tsx
View File

@@ -24,12 +24,12 @@ const Nav = ({openNav}: Props) => {
if (window.scrollY >= 90) { if (window.scrollY >= 90) {
setNavBg(true); setNavBg(true);
setNavHeight("h-[8vh]"); setNavHeight("h-[8vh]");
setContentSize("text-[9px] md:text-[11px]"); setContentSize("text-sm md:text-base");
setButtonSize("md:px-5 md:py-1.5 px-3 py-1 text-xs"); setButtonSize("md:px-5 md:py-1.5 px-3 py-1 text-xs");
} else { } else {
setNavBg(false); setNavBg(false);
setNavHeight("h-[10vh]"); setNavHeight("h-[10vh]");
setContentSize("text-[10px] md:text-xs"); setContentSize("text-base md:text-lg");
setButtonSize("md:px-6 md:py-2 px-4 py-1 text-sm"); setButtonSize("md:px-6 md:py-2 px-4 py-1 text-sm");
} }
}; };
@@ -49,38 +49,34 @@ const Nav = ({openNav}: Props) => {
<div <div
className="flex items-center h-full justify-between w-[90%] xl:w-[80%] mx-auto transition-all duration-300 ease-in-out"> className="flex items-center h-full justify-between w-[90%] xl:w-[80%] mx-auto transition-all duration-300 ease-in-out">
{/* LOGO */} {/* LOGO */}
<h1 className="text-lg md:text-xl lg:text-2xl font-bold transition-all duration-300 ease-in-out" <h1 className={`${contentSize} font-bold transition-all duration-300 ease-in-out`}
style={{color: colors.primaryText}} style={{color: colors.primaryText}}>
> <span className="text-lg md:text-xl text-pink-700">R</span>hein Software
<span className="text-xl md:text-2xl text-pink-700">R</span>hein Software
</h1> </h1>
{/* Desktop Nav Links */} {/* 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 transition-all duration-300 ease-in-out">
{navLinks.map((link) => ( {navLinks.map((link) => (
<Link href={link.url} key={link.id}> <Link href={link.url} key={link.id}>
<p className={`nav_link ${contentSize} uppercase relative group`} <p className={`nav_link ${contentSize} transition-all duration-300 ease-in-out`}
style={{color: colors.primaryText}} style={{color: colors.primaryText}}>{link.label}</p>
>
{link.label}
<span className="absolute bottom-0 left-0 w-0 h-[2px] bg-pink-700 transition-all duration-300 group-hover:w-full"></span></p>
</Link> </Link>
))} ))}
</div> </div>
{/* Right Side Buttons */} {/* Right Side Buttons */}
<div className="flex items-center space-x-3 transition-all duration-300 ease-in-out"> <div className="flex items-center space-x-3 transition-all duration-300 ease-in-out">
{/* Portal Button - Hidden on mobile */} {/* Portal Button */}
<button <button
className={`hidden lg:block ${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 transition-all duration-300 ease-in-out rounded-full`} className={`${buttonSize} text-white font-semibold bg-blue-700 hover:bg-blue-900 transition-all duration-300 ease-in-out rounded-full`}
> >
Portal Portal
</button> </button>
{/* Theme Toggle Button - Hidden on mobile */} {/* Theme Toggle Button */}
<button <button
onClick={toggleTheme} onClick={toggleTheme}
className="hidden lg:flex w-7 h-7 items-center justify-center rounded-full transition-all duration-300 ease-in-out" 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}} style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
> >
{theme === "dark" ? "🌙" : "☀️"} {theme === "dark" ? "🌙" : "☀️"}
@@ -89,8 +85,7 @@ const Nav = ({openNav}: Props) => {
{/* Burger Menu (for mobile) */} {/* Burger Menu (for mobile) */}
<HiBars3BottomRight <HiBars3BottomRight
onClick={openNav} onClick={openNav}
className="w-6 h-6 cursor-pointer lg:hidden transition-all duration-300 ease-in-out" className="w-6 h-6 cursor-pointer text-black lg:hidden transition-all duration-300 ease-in-out"
style={{color: colors.primaryText}}
/> />
</div> </div>
</div> </div>
@@ -98,4 +93,4 @@ const Nav = ({openNav}: Props) => {
); );
}; };
export default Nav; export default Nav;

60
components/Home/Navbar/MobileNav.tsx
View File

@@ -1,9 +1,7 @@
import {navLinks} from "@/constant/Constant"; import {navLinks} from "@/constant/Constant";
import Link from "next/link"; import Link from "next/link";
import React, {useContext} from "react"; import React from "react";
import {CgClose} from "react-icons/cg"; import {CgClose} from "react-icons/cg";
import {ThemeContext} from "@/components/provider/ThemeProvider";
import {themeColors} from "@/components/Helper/ThemeColors";
type Props = { type Props = {
showNav: boolean; showNav: boolean;
@@ -11,52 +9,32 @@ type Props = {
}; };
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 navOpen = showNav ? "translate-x-0" : "translate-x-[-100%]";
const {theme, toggleTheme} = useContext(ThemeContext);
const colors = themeColors[theme];
return ( return (
<div className="lg:hidden"> <div>
{/* overlay background */} {/* overlay */}
<div <div
className={`fixed inset-0 z-[10000] transition-opacity duration-500 ${ className={`fixed ${navOpen} inset-0 transform transition-all duration-500 z-[10000] bg-black opacity-70 w-full h-screen`}
showNav ? "opacity-60 bg-black" : "opacity-0 pointer-events-none" ></div>
}`} {/* Navlinks */}
onClick={closeNav}
/>
{/* nav menu */}
<div <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`} 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]`}
style={{
backgroundColor: theme === "dark" ? "#2A2A2A" : "#ffffff",
color: theme === "dark" ? "#f5f5f5" : "#1a1a1a"
}}
> >
<div className="flex flex-col items-center justify-center py-8 space-y-4 px-4 relative"> {navLinks.map((link) => {
{/* Close icon */} return (
<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}> <Link href={link.url} key={link.id}>
<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"> <p className="nav__link text-white text-[20px] ml-12 border-b-[1.5px] pb-1 border-white sm:text-[30px]">
{link.label} {link.label}
</p> </p>
</Link> </Link>
))} );
})}
{/* Theme toggle button */} {/* Close icon */}
<button <CgClose
onClick={toggleTheme} onClick={closeNav}
className="mt-4 w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 transition-all duration-300" className="absolute top-[0.7rem] right-[1.4rem] sm:w-8 sm:h-8 w-6 h-6"
style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}} />
>
{theme === "dark" ? "🌙" : "☀️"}
</button>
</div>
</div> </div>
</div> </div>
); );