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