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

Merge branch 'navbar-refactoring' into 'dev'

Browse Source 
Enhance MobileNav with theme context and visual updates

See merge request rheinsw/website!19
This commit is contained in:
Thatsaphorn
2025-04-04 18:36:44 +00:00
parent 81729693bd
commit 3c25d1a351
3 changed files with 61 additions and 34 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) {
setNavBg(true);
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");
} else {
setNavBg(false);
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");
}
};
@@ -49,34 +49,38 @@ const Nav = ({openNav}: Props) => {
<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}}>
<span className="text-lg md:text-xl text-pink-700">R</span>hein Software
<h1 className="text-lg md:text-xl lg:text-2xl font-bold transition-all duration-300 ease-in-out"
style={{color: colors.primaryText}}
>
<span className="text-xl md:text-2xl text-pink-700">R</span>hein Software
</h1>
{/* Desktop Nav Links */}
<div className="hidden lg:flex items-center space-x-6 transition-all duration-300 ease-in-out">
{navLinks.map((link) => (
<Link href={link.url} key={link.id}>
<p className={`nav_link ${contentSize} transition-all duration-300 ease-in-out`}
style={{color: colors.primaryText}}>{link.label}</p>
<p className={`nav_link ${contentSize} uppercase relative group`}
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>
))}
</div>
{/* Right Side Buttons */}
<div className="flex items-center space-x-3 transition-all duration-300 ease-in-out">
{/* Portal Button */}
{/* Portal Button - Hidden on mobile */}
<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
</button>
{/* Theme Toggle Button */}
{/* Theme Toggle Button - Hidden on mobile */}
<button
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}}
>
{theme === "dark" ? "🌙" : "☀️"}
@@ -85,7 +89,8 @@ 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"
style={{color: colors.primaryText}}
/>
</div>
</div>
@@ -93,4 +98,4 @@ const Nav = ({openNav}: Props) => {
);
};
export default Nav;
export default Nav;