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

Update Navbar contact button

Browse Source
This commit is contained in:
Thatsaphorn
2025-04-08 22:47:51 +02:00
parent 5226cd1bd4
commit 493d5bcfa2
1 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/Navbar/DesktopNav.tsx
View File

@@ -19,6 +19,8 @@ const Nav = ({openNav}: Props) => {
const {theme, toggleTheme} = useContext(ThemeContext); const {theme, toggleTheme} = useContext(ThemeContext);
const colors = themeColors[theme]; const colors = themeColors[theme];
const navColorClass = theme === "dark" || !navBg ? "text-white" : "text-black";
useEffect(() => { useEffect(() => {
const handler = () => { const handler = () => {
if (window.scrollY >= 90) { if (window.scrollY >= 90) {
@@ -44,15 +46,13 @@ const Nav = ({openNav}: Props) => {
navBg ? "shadow-md" : "" navBg ? "shadow-md" : ""
}`} }`}
style={{ style={{
backgroundColor: navBg ? "var(--nav-bg)" : "transparent", // <-- changed backgroundColor: navBg ? "var(--nav-bg)" : "transparent",
color: "var(--primary-text)",
}} }}
> >
<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={`${contentSize} font-bold transition-all duration-300 ease-in-out`} <h1 className={`${contentSize} font-bold transition-all duration-300 ease-in-out ${navColorClass}`}>
style={{color: colors.primaryText}}>
<span className="text-lg md:text-xl text-pink-700">R</span>hein Software <span className="text-lg md:text-xl text-pink-700">R</span>hein Software
</h1> </h1>
@@ -61,18 +61,17 @@ const Nav = ({openNav}: Props) => {
{navLinks.map((link) => ( {navLinks.map((link) => (
<Link href={link.url} key={link.id}> <Link href={link.url} key={link.id}>
<p <p
className={`nav_link ${contentSize} transition-all duration-300 ease-in-out uppercase font-semibold`} className={`nav_link ${contentSize} ${navColorClass} transition-all duration-300 ease-in-out uppercase font-semibold`}
style={{color: colors.primaryText}}> >
{link.label} {link.label}
</p> </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 */} {/* Contact Button */}
<Link href="/contact"> <Link href="/contact">
<button <button
className={`${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`}
@@ -84,8 +83,8 @@ const Nav = ({openNav}: Props) => {
{/* Theme Toggle Button */} {/* Theme Toggle Button */}
<button <button
onClick={toggleTheme} onClick={toggleTheme}
className="w-7 h-7 flex 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 ${navColorClass}`}
style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}} style={{backgroundColor: colors.secondaryBg}}
> >
{theme === "dark" ? "🌙" : "☀️"} {theme === "dark" ? "🌙" : "☀️"}
</button> </button>
@@ -93,7 +92,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 text-black lg:hidden transition-all duration-300 ease-in-out" className={`w-6 h-6 cursor-pointer lg:hidden transition-all duration-300 ease-in-out ${navColorClass}`}
/> />
</div> </div>
</div> </div>