timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 11:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update header

Browse Source
This commit is contained in:
Timothy Pidashev
2025-01-08 10:51:23 -08:00
parent 2519182e86
commit 5681e4b1ad
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/src/components/header/index.tsx
View File

@@ -1,4 +1,3 @@
// components/header/index.tsx
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { Links } from "@/components/header/links"; import { Links } from "@/components/header/links";
@@ -19,13 +18,11 @@ export default function Header() {
useEffect(() => { useEffect(() => {
if (!isClient) return; if (!isClient) return;
const handleScroll = () => { const handleScroll = () => {
const currentScrollY = document.documentElement.scrollTop; const currentScrollY = document.documentElement.scrollTop;
setVisible(currentScrollY < lastScrollY || currentScrollY < 10); setVisible(currentScrollY < lastScrollY || currentScrollY < 10);
setLastScrollY(currentScrollY); setLastScrollY(currentScrollY);
}; };
document.addEventListener("scroll", handleScroll); document.addEventListener("scroll", handleScroll);
return () => document.removeEventListener("scroll", handleScroll); return () => document.removeEventListener("scroll", handleScroll);
}, [lastScrollY, isClient]); }, [lastScrollY, isClient]);
@@ -39,6 +36,8 @@ export default function Header() {
return linkHref !== "/" && path.startsWith(linkHref); return linkHref !== "/" && path.startsWith(linkHref);
}; };
const isIndexPage = checkIsActive("/");
const headerLinks = Links.map((link) => { const headerLinks = Links.map((link) => {
const isActive = checkIsActive(link.href); const isActive = checkIsActive(link.href);
@@ -85,9 +84,10 @@ export default function Header() {
<header <header
className={` className={`
fixed z-50 top-0 left-0 right-0 fixed z-50 top-0 left-0 right-0
bg-black font-bold font-bold
transition-transform duration-300 transition-transform duration-300
${visible ? "translate-y-0" : "-translate-y-full"} ${visible ? "translate-y-0" : "-translate-y-full"}
${!isIndexPage ? "bg-black" : ""}
`} `}
> >
<div className="flex flex-row pt-1 px-2 text-lg lg:pt-2 lg:text-3xl md:text-2xl items-center justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20"> <div className="flex flex-row pt-1 px-2 text-lg lg:pt-2 lg:text-3xl md:text-2xl items-center justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20">