Merge branch 'navbar-refactoring' into 'dev'
Enhance MobileNav with theme context and visual updates See merge request rheinsw/website!19
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import {navLinks} from "@/constant/Constant";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
import React, {useContext} from "react";
|
||||
import {CgClose} from "react-icons/cg";
|
||||
import {ThemeContext} from "@/components/provider/ThemeProvider";
|
||||
import {themeColors} from "@/components/Helper/ThemeColors";
|
||||
|
||||
type Props = {
|
||||
showNav: boolean;
|
||||
@@ -9,32 +11,52 @@ type Props = {
|
||||
};
|
||||
|
||||
const MobileNav = ({closeNav, showNav}: Props) => {
|
||||
const navOpen = showNav ? "translate-x-0" : "translate-x-[-100%]";
|
||||
const navOpen = showNav ? "translate-y-0 opacity-100" : "-translate-y-20 opacity-0 pointer-events-none";
|
||||
const {theme, toggleTheme} = useContext(ThemeContext);
|
||||
const colors = themeColors[theme];
|
||||
return (
|
||||
<div className="lg:hidden">
|
||||
{/* overlay background */}
|
||||
<div
|
||||
className={`fixed inset-0 z-[10000] transition-opacity duration-500 ${
|
||||
showNav ? "opacity-60 bg-black" : "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
onClick={closeNav}
|
||||
/>
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* overlay */}
|
||||
{/* nav menu */}
|
||||
<div
|
||||
className={`fixed ${navOpen} inset-0 transform transition-all duration-500 z-[10000] bg-black opacity-70 w-full h-screen`}
|
||||
></div>
|
||||
{/* Navlinks */}
|
||||
<div
|
||||
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]`}
|
||||
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`}
|
||||
style={{
|
||||
backgroundColor: theme === "dark" ? "#2A2A2A" : "#ffffff",
|
||||
color: theme === "dark" ? "#f5f5f5" : "#1a1a1a"
|
||||
}}
|
||||
>
|
||||
{navLinks.map((link) => {
|
||||
return (
|
||||
<Link href={link.url} key={link.id}>
|
||||
<p className="nav__link text-white text-[20px] ml-12 border-b-[1.5px] pb-1 border-white sm:text-[30px]">
|
||||
{link.label}
|
||||
</p>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<div className="flex flex-col items-center justify-center py-8 space-y-4 px-4 relative">
|
||||
{/* Close icon */}
|
||||
<CgClose
|
||||
onClick={closeNav}
|
||||
className="absolute top-[0.7rem] right-[1.4rem] sm:w-8 sm:h-8 w-6 h-6"
|
||||
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}>
|
||||
<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">
|
||||
{link.label}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* Theme toggle button */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="mt-4 w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 transition-all duration-300"
|
||||
style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
|
||||
>
|
||||
{theme === "dark" ? "🌙" : "☀️"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,11 +7,11 @@ export const navLinks = [
|
||||
{
|
||||
id: 2,
|
||||
url: '#',
|
||||
label: 'About Us',
|
||||
label: 'Über uns',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
url: 'contact',
|
||||
label: 'Contact',
|
||||
label: 'Kontakt',
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user