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

23
components/Navbar/DesktopNav.tsx
View File

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