ImAlpha/Portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sticky nav shows, but doesn't link

Browse Source
This commit is contained in:
Jacob Delgado 2023-11-14 02:35:43 -08:00
parent bd4169b92f
commit a989cf997c
1 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
View File

@ -42,7 +42,7 @@ const NavBar = () => {
const changeBackground = () => { const changeBackground = () => {
// console.log(window.scrollY); // console.log(window.scrollY);
if (window.scrollY >= 20) { if (window.scrollY >= 70) {
setNavbar(true); setNavbar(true);
} else { } else {
setNavbar(false); setNavbar(false);
@ -56,19 +56,30 @@ const NavBar = () => {
return ( return (
<nav> <nav>
{/* <center className="text-accent bg-black">O</center> */} {/* <center className="text-accent bg-black">O</center> */}
<div className={navbar ? "flex items-center bg-black justify-center xl:p-1 mx-auto md:p-4 absolute z-10 w-full h-[120px] bg-green" <div
: "flex items-center justify-center xl:p-1 bg-transparent mx-auto md:p-4 absolute z-10 w-full h-[120px]"}> className={
<ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 pr-6"> navbar
? "flex fixed top-0 items-center bg-black justify-center xl:p-1 mx-auto md:p-4 z-90 w-full h-[60px]"
: "flex items-center justify-center xl:p-1 bg-transparent mx-auto md:p-4 absolute z-10 w-full h-[120px]"
}
>
<ul
className={
navbar
? "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8"
: "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 pr-6"
}
>
{links.map((link) => ( {links.map((link) => (
<Link <Link
key={link.href} key={link.href}
// className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`} // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
// replace with classnames object instead // replace with classnames object instead
className={classnames({ className={classnames({
"border-b-2 border-jefesRed text-accent": "border-b-2 border-red-800 text-white":
link.href === currentPath, link.href === currentPath,
"text-accent": link.href !== currentPath, "text-white": link.href !== currentPath,
"hover:text-jefesRed": true, "hover:text-red-800": true,
})} })}
href={link.href} href={link.href}
> >
@ -85,7 +96,7 @@ const NavBar = () => {
sizes="100vw" sizes="100vw"
style={{ width: "40%", height: "auto" }} style={{ width: "40%", height: "auto" }}
alt="Logo" alt="Logo"
className="hidden xl:block logo" className={navbar ? "hidden" : "hidden xl:block logo"}
/> />
<Image <Image
src="/logo.svg" src="/logo.svg"
@ -105,10 +116,10 @@ const NavBar = () => {
// className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`} // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
// replace with classnames object instead // replace with classnames object instead
className={classnames({ className={classnames({
"border-b-2 border-jefesRed text-accent": "border-b-2 border-red-800 text-white":
link.href === currentPath, link.href === currentPath,
"text-accent": link.href !== currentPath, "text-white": link.href !== currentPath,
"hover:text-jefesRed": true, "hover:text-red-800": true,
})} })}
href={link.href} href={link.href}
> >