blob: 18dcc2d14675c1b3154b79fc8d8dc6d094003fb5 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
"use client";
import { ArrowRightIcon } from "@radix-ui/react-icons";
import Logo from "../../public/logo.svg";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { useState } from "react";
import {
motion,
AnimatePresence,
useScroll,
useMotionValueEvent,
} from "framer-motion";
import { SlideNavTabs } from "./Headers/Navbar";
function NavbarContent() {
return (
<div className="">
<SlideNavTabs />
</div>
);
}
export const Navbar = () => {
const { scrollYProgress } = useScroll();
const [visible, setVisible] = useState(true);
useMotionValueEvent(scrollYProgress, "change", (current) => {
// Check if current is not undefined and is a number
if (typeof current === "number") {
let direction = current! - scrollYProgress.getPrevious()!;
if (direction < 0) {
setVisible(true);
} else {
setVisible(false);
}
}
});
return (
<AnimatePresence mode="wait">
<motion.nav
initial={{
y: -130,
opacity: 1,
}}
animate={{
y: visible ? 0 : -100,
opacity: visible ? 1 : 0,
}}
transition={{
duration: 0.2,
}}
className="fixed top-0 z-[99999] mt-12 hidden w-full px-24 text-sm md:flex"
>
<NavbarContent />
</motion.nav>
</AnimatePresence>
);
};
|