mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-29 01:53:56 +03:00
0ef223dbab
* fix: flickery navbar
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
import Image from "next/image";
|
|
import { FC, useEffect, useRef, useState } from "react";
|
|
import logo from "../../logo.png";
|
|
import Link from "next/link";
|
|
import Button from "../ui/Button";
|
|
import DarkModeToggle from "./DarkModeToggle";
|
|
import { motion } from "framer-motion";
|
|
import MobileMenu from "./MobileMenu";
|
|
import NavItems from "./NavItems";
|
|
|
|
interface NavBarProps {}
|
|
|
|
const NavBar: FC<NavBarProps> = ({}) => {
|
|
const scrollPos = useRef<number>(0);
|
|
const [hidden, setHidden] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = (e: Event) => {
|
|
const target = e.currentTarget as Window;
|
|
if (target.scrollY > scrollPos.current) {
|
|
setHidden(true);
|
|
} else {
|
|
setHidden(false);
|
|
}
|
|
scrollPos.current = target.scrollY;
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<motion.header
|
|
animate={{
|
|
y: hidden ? "-100%" : "0%",
|
|
transition: { ease: "circOut" },
|
|
}}
|
|
className="fixed top-0 w-full border-b border-b-black/10 dark:border-b-white/25 bg-white dark:bg-black z-20"
|
|
>
|
|
<nav className="max-w-screen-xl mx-auto py-1 flex items-center justify-between gap-8">
|
|
<Link href={"/"} className="flex items-center gap-4">
|
|
<Image
|
|
className="rounded-full"
|
|
src={logo}
|
|
alt="Quivr Logo"
|
|
width={48}
|
|
height={48}
|
|
/>
|
|
<h1 className="font-bold">Quivr</h1>
|
|
</Link>
|
|
<NavItems className="hidden sm:flex" />
|
|
<MobileMenu />
|
|
</nav>
|
|
</motion.header>
|
|
);
|
|
};
|
|
|
|
export default NavBar;
|