v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[feat] reduce laggy at navbar and fix overflowed

Browse source
This commit is contained in:
Alvalen 2023-09-21 10:27:17 +07:00
parent aa07cbaa30
commit 87c1ec1b82
2 changed files with 18 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/Footer.jsx
View file

@ -7,14 +7,14 @@ import { faArrowAltCircleRight } from "@fortawesome/free-regular-svg-icons";
export default function Footer() { export default function Footer() {
return ( return (
<div className="flex justify-center items-center flex-col mt-5 "> <div className="flex justify-center items-center flex-col mt-5 overflow-hidden">
<div className="flex justify-center items-center flex-col mt-5 self-center min-h-[50vh] border-b-2 min-w-[80vw] "> <div className="flex justify-center items-center flex-col mt-5 self-center min-h-[50vh] border-b-2 min-w-[80vw] ">
<Link href="/#contact"> <Link href="/#contact">
<motion.h2 <motion.h2
className="text-xl font-medium mt-3 text-center text-gray-400 hover:underline whitespace-nowrap leading-none md:tracking-[0.5rem]" className="text-xl font-medium mt-3 text-center text-gray-400 hover:underline whitespace-nowrap leading-none md:tracking-[0.5rem]"
initial={{ initial={{
opacity: 0, opacity: 0,
x: -200, x: -100,
}} }}
whileInView={{ whileInView={{
opacity: 1, opacity: 1,
@ -29,7 +29,7 @@ export default function Footer() {
className="text-5xl md:text-7xl font-medium mt-3 hover:underline whitespace-nowrap leading-none" className="text-5xl md:text-7xl font-medium mt-3 hover:underline whitespace-nowrap leading-none"
initial={{ initial={{
opacity: 0, opacity: 0,
x: 200, x: 100,
}} }}
whileInView={{ whileInView={{
opacity: 1, opacity: 1,

26
components/Navbar.jsx
View file

@ -13,9 +13,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
open: { open: {
clipPath: `circle(1920px at calc(100% - 40px) 40px)`, clipPath: `circle(1920px at calc(100% - 40px) 40px)`,
transition: { transition: {
type: "spring", type: "tween", // Use a linear or ease transition
stiffness: 400,
damping: 20,
}, },
}, },
closed: { closed: {
@ -81,7 +79,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
return ( return (
<> <>
<motion.div <motion.div
className={`fixed z-[45] w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease duration-700 overflow-clip`} className={`fixed z-[45] w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease duration-700 overflow-hidden`}
variants={navVariant} variants={navVariant}
animate={isNavOpen ? "open" : "closed"} animate={isNavOpen ? "open" : "closed"}
initial={false}> initial={false}>
@ -175,10 +173,19 @@ const Navbar = () => {
<nav <nav
ref={navRef} ref={navRef}
className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${ className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${
isNavOpen ? "bg-transparent" : "backdrop-filter backdrop-blur-md" isNavOpen
? "bg-transparent"
: "backdrop-filter backdrop-blur-md"
} inset-0 bg-opacity-50 flex flex-row justify-between items-center h-16 z-50 `}> } inset-0 bg-opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
<div className=""> <div>
<h1 className="text-2xl ml-2 md:ml-0">Alvalens</h1> <h1
className={`text-2xl ml-2 md:ml-0 ${
isNavOpen
? "text-white"
: ""
}`}>
Alvalens
</h1>
</div> </div>
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<button <button
@ -200,10 +207,7 @@ const Navbar = () => {
</div> </div>
</nav> </nav>
{/* items */} {/* items */}
<NavItems <NavItems isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
isNavOpen={isNavOpen}
setIsNavOpen={setIsNavOpen}
/>
</> </>
); );
}; };