Update Navbar design and responsiveness

- Adjust font sizes and button visibility for better scaling.
- Add hover effect on nav links and improve styling consistency.
This commit is contained in:
2025-04-04 20:29:57 +02:00
parent 915d6d1bcb
commit 1867d10b78

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-sm md:text-base"); setContentSize("text-[9px] md:text-[11px]");
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-base md:text-lg"); setContentSize("text-[10px] md:text-xs");
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,34 +49,38 @@ 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={`${contentSize} font-bold transition-all duration-300 ease-in-out`} <h1 className="text-lg md:text-xl lg:text-2xl 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} transition-all duration-300 ease-in-out`} <p className={`nav_link ${contentSize} uppercase relative group`}
style={{color: colors.primaryText}}>{link.label}</p> style={{color: colors.primaryText}}
>
{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 */} {/* Portal Button - Hidden on mobile */}
<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={`hidden lg:block ${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 */} {/* Theme Toggle Button - Hidden on mobile */}
<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="hidden lg:flex w-7 h-7 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" ? "🌙" : "☀️"}
@@ -85,7 +89,8 @@ 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"
style={{color: colors.primaryText}}
/> />
</div> </div>
</div> </div>