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

[feat] add loading screen and bar

Browse source
This commit is contained in:
Alvalen 2023-09-03 13:23:39 +07:00
parent f0fcfe6124
commit 218ee462f0
15 changed files with 354 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/(root)/layout.js
View file

@ -1,9 +1,5 @@
import "../globals.css"; "use client"
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;
export const metadata = { export const metadata = {
title: "Create Next App", title: "Create Next App",
description: "Generated by create next app", description: "Generated by create next app",

14
app/(root)/loading.js
View file

@ -1,7 +1,11 @@
export default function Loading() { export default function Loading() {
return ( return (
<div className="flex justify-center items-center h-screen w-screen bg-gray-900"> <>
<h1 className="text-4xl text-gray-100">Loading...</h1> (
</div> <div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
) <h1 className="text-4xl text-gray-900">Loading...</h1>
</div>
)
</>
);
} }

21
app/(root)/page.js
View file

@ -4,6 +4,7 @@ import Image from "next/image";
import "../globals.css"; import "../globals.css";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import Link from "next/link"; import Link from "next/link";
// components // components
import Button from "@/components/Button"; import Button from "@/components/Button";
import Me from "../../public/img/me.jpg"; import Me from "../../public/img/me.jpg";
@ -23,6 +24,8 @@ const MyPage = () => {
scrollingSpeed: 1000, scrollingSpeed: 1000,
licenseKey: "gplv3-license", licenseKey: "gplv3-license",
menu: "#sidebar", menu: "#sidebar",
lockAnchors: false,
}; };
return ( return (
@ -168,7 +171,7 @@ const MyPage = () => {
interest. interest.
</motion.p> </motion.p>
<motion.div <motion.div
initial={{ y: 50, opacity: 0 }} initial={{ y: 40, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }} whileInView={{ y: 0, opacity: 1 }}
transition={{ transition={{
delay: 0.3, delay: 0.3,
@ -203,7 +206,7 @@ const MyPage = () => {
type: "spring", type: "spring",
}}></motion.div> }}></motion.div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 overflow-hidden py-5"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 py-5">
<motion.h1 <motion.h1
className="text-black text-5xl md:text-8xl font-bold" className="text-black text-5xl md:text-8xl font-bold"
initial={{ x: -100, opacity: 0 }} initial={{ x: -100, opacity: 0 }}
@ -227,7 +230,7 @@ const MyPage = () => {
done and currently working on. done and currently working on.
</motion.p> </motion.p>
<motion.div <motion.div
initial={{ y: 50, opacity: 0 }} initial={{ y: 40, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }} whileInView={{ y: 0, opacity: 1 }}
transition={{ transition={{
delay: 0.3, delay: 0.3,
@ -247,7 +250,7 @@ const MyPage = () => {
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div> <div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 overflow-hidden">
<motion.h1 <motion.h1
className="text-black text-5xl md:text-8xl font-bold" className="text-black text-5xl md:text-8xl font-bold"
initial={{ x: -100, opacity: 0 }} initial={{ x: -100, opacity: 0 }}
@ -285,7 +288,7 @@ const MyPage = () => {
<motion.a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300" className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ y: 50, opacity: 0 }} initial={{ y: 40, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }} whileInView={{ y: 0, opacity: 1 }}
transition={{ transition={{
y: { delay: 0.1 }, y: { delay: 0.1 },
@ -300,7 +303,7 @@ const MyPage = () => {
<motion.a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300" className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ transition={{
y: { delay: 0.2 }, y: { delay: 0.2 },
@ -314,7 +317,7 @@ const MyPage = () => {
<motion.a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300" className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ transition={{
y: { delay: 0.3 }, y: { delay: 0.3 },
@ -328,7 +331,7 @@ const MyPage = () => {
<motion.a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300" className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ transition={{
y: { delay: 0.4 }, y: { delay: 0.4 },
@ -342,7 +345,7 @@ const MyPage = () => {
<motion.a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300" className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ transition={{
y: { delay: 0.5 }, y: { delay: 0.5 },

11
app/about/loading.js Normal file
View file

@ -0,0 +1,11 @@
export default function Loading() {
return (
<>
(
<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
<h1 className="text-4xl text-gray-900">Loading...</h1>
</div>
)
</>
);
}

19
app/about/page.js
View file

@ -1,4 +1,5 @@
"use client"; "use client";
import { useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import Button from "@/components/Button"; import Button from "@/components/Button";
@ -11,9 +12,9 @@ import Me1 from "@/public/img/me1.jpg";
import Me2 from "@/public/img/me2.jpg"; import Me2 from "@/public/img/me2.jpg";
import Me3 from "@/public/img/me3.jpg"; import Me3 from "@/public/img/me3.jpg";
export default function Page() { export default function Page() {
// useEffect(() => { useEffect(() => {
// window.scrollTo(0, 0); window.scrollTo(0, 0);
// }, []); }, []);
return ( return (
<> <>
@ -21,9 +22,9 @@ export default function Page() {
<div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10"> <div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div <motion.div
initial={{ opacity: 1, scale: 1 }} initial={{ scale: 1 }}
animate={{ opacity: 1, scale: 1.6 }} animate={{ scale: 1.6 }}
transition={{ ease: "easeInOut" }} transition={{ ease: "circOut", duration: 1}}
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div> className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
@ -38,9 +39,9 @@ export default function Page() {
A brief introduction about me and my interest. A brief introduction about me and my interest.
</p> </p>
<motion.div <motion.div
initial={{ opacity: 0, y: 100 }} initial={{ opacity: 0, }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, }}
transition={{ duration: 1 }} transition={{ duration: 0.5, ease: "circOut" }}
onClick={() => { onClick={() => {
window.scrollTo({ window.scrollTo({
top: 1000, top: 1000,

2
app/globals.css
View file

@ -26,6 +26,7 @@ html {
body { body {
font-family: 'Poppins', sans-serif !important; font-family: 'Poppins', sans-serif !important;
color: black; color: black;
background-color: #f6f6f6;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -84,3 +85,4 @@ a[title]:hover:after {
font-size: 0.8rem; font-size: 0.8rem;
} }

8
app/layout.js
View file

@ -1,20 +1,22 @@
"use client";
import "./globals.css"; import "./globals.css";
import Navbar from "@/components/Navbar"; import Navbar from "@/components/Navbar";
import Sidebar from "@/components/Sidebar";
import { config } from '@fortawesome/fontawesome-svg-core' import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css' import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false config.autoAddCss = false
import TopProgressBar from "@/components/TopProgressBar";
import "./nprogress.css";
export const metadata = { export const metadata = {
title: "Create Next App", title: "Create Next App",
description: "Generated by create next app", description: "Generated by create next app",
}; };
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="en"> <html lang="en">
<body> <body>
<TopProgressBar />
<Navbar /> <Navbar />
{children} {children}
</body> </body>

84
app/nprogress.css Normal file
View file

@ -0,0 +1,84 @@
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: rgb(42, 42, 42);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 5px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px rgb(147, 147, 147), 0 0 5px rgb(147, 147, 147);
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: rgb(73, 73, 73);
border-left-color: rgb(67, 67, 67);
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: fixed;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

11
app/projects/loading.js Normal file
View file

@ -0,0 +1,11 @@
export default function Loading() {
return (
<>
(
<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
<h1 className="text-4xl text-gray-900">Loading...</h1>
</div>
)
</>
);
}

25
app/projects/page.js
View file

@ -1,4 +1,5 @@
"use client"; "use client";
import { useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import Button from "@/components/Button"; import Button from "@/components/Button";
@ -14,9 +15,9 @@ const projects = () => {
}; };
export default function Page() { export default function Page() {
// useEffect(() => { useEffect(() => {
// window.scrollTo(0, 0); window.scrollTo(0, 0);
// }, []); }, []);
return ( return (
<> <>
@ -24,9 +25,9 @@ export default function Page() {
<div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10"> <div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div <motion.div
initial={{ opacity: 1, scale: 1 }} initial={{ scale: 1 }}
animate={{ opacity: 1, scale: 1.6 }} animate={{ scale: 1.6 }}
transition={{ ease: "easeInOut" }} transition={{ duration: 1, ease: "circOut" }}
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div> className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
@ -44,7 +45,7 @@ export default function Page() {
<motion.div <motion.div
initial={{ opacity: 0, y: 100 }} initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }} transition={{ duration: 0.5, ease: "circOut" }}
onClick={() => { onClick={() => {
window.scrollTo({ window.scrollTo({
top: 1000, top: 1000,
@ -122,7 +123,6 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
}} }}
className="w-full h-full"> className="w-full h-full">
<Image <Image
@ -283,13 +283,10 @@ export default function Page() {
</div> </div>
{/* view in archive btn */} {/* view in archive btn */}
<div className="flex justify-center items-center flex-col my-5 self-start "> <div className="flex justify-center items-center flex-col my-5 self-start ">
<Button variation="primary"> <Button variation="primary">
<Link href="projects/archive"> <Link href="projects/archive">View In Archive</Link>
View In Archive </Button>
</Link>
</Button>
</div> </div>
</main> </main>
</> </>
); );

2
components/Hr.jsx
View file

@ -7,7 +7,7 @@ export default function Hr() {
className="bg-gray-700 w-20 h-1 rounded-full mb-2" className="bg-gray-700 w-20 h-1 rounded-full mb-2"
initial={{ initial={{
opacity: 0, opacity: 0,
x: -100, x: -50,
}} }}
whileInView={{ whileInView={{
opacity: 1, opacity: 1,

199
components/Navbar.js
View file

@ -3,8 +3,12 @@ import { useRef, useState, useEffect } from "react";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import Link from "next/link"; import Link from "next/link";
const NavItems = ({ isNavOpen }) => { const NavItems = ({ isNavOpen, setIsNavOpen }) => {
const [isMobile, setIsMobile] = useState(false); const [isMobile, setIsMobile] = useState(false);
const handleItemClick = () => {
setIsNavOpen(false);
};
const navVariant = { const navVariant = {
open: (height = 1000) => ({ open: (height = 1000) => ({
clipPath: `circle(${height + 400}px at calc(100% - 40px) 40px)`, clipPath: `circle(${height + 400}px at calc(100% - 40px) 40px)`,
@ -24,43 +28,43 @@ const [isMobile, setIsMobile] = useState(false);
}, },
}, },
}; };
useEffect(() => { useEffect(() => {
const updateScreenWidth = () => { const updateScreenWidth = () => {
setIsMobile(window.innerWidth <= 768); setIsMobile(window.innerWidth <= 768);
}; };
// Initial check and event listener // Initial check and event listener
updateScreenWidth(); updateScreenWidth();
window.addEventListener("resize", updateScreenWidth); window.addEventListener("resize", updateScreenWidth);
// Clean up the event listener on unmount // Clean up the event listener on unmount
return () => { return () => {
window.removeEventListener("resize", updateScreenWidth); window.removeEventListener("resize", updateScreenWidth);
}; };
}, []); }, []);
// Check screen width and adjust clipPath for smaller screens // Check screen width and adjust clipPath for smaller screens
if (isMobile) { if (isMobile) {
navVariant.closed = { navVariant.closed = {
clipPath: "circle(0px at calc(100% - 35px) 35px)", // Adjusted value for mobile screens clipPath: "circle(0px at calc(100% - 35px) 35px)", // Adjusted value for mobile screens
transition: { transition: {
delay: 0.5, delay: 0.5,
type: "spring", type: "spring",
stiffness: 400, stiffness: 400,
damping: 40, damping: 40,
}, },
}; };
} else { } else {
navVariant.closed = { navVariant.closed = {
clipPath: "circle(0px at calc(100% - 120px) 35px)", clipPath: "circle(0px at calc(100% - 120px) 35px)",
transition: { transition: {
delay: 0.5, delay: 0.5,
type: "spring", type: "spring",
stiffness: 400, stiffness: 400,
damping: 40, damping: 40,
}, },
}; };
} }
const itemVariants = { const itemVariants = {
open: { open: {
opacity: 1, opacity: 1,
@ -74,9 +78,6 @@ if (isMobile) {
}, },
}; };
return ( return (
<> <>
<motion.div <motion.div
@ -85,45 +86,77 @@ if (isMobile) {
animate={isNavOpen ? "open" : "closed"} animate={isNavOpen ? "open" : "closed"}
initial={false}> initial={false}>
<div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[100vh] bg-gray-700 min-w-[100vw] "> <div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[100vh] bg-gray-700 min-w-[100vw] ">
<div className="flex flex-col items-center space-y-8 my-auto mx-0"> <div className="flex flex-col items-center space-y-8 my-auto mx-0">
{/* title */} {/* title */}
<motion.h1 <motion.h1
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
transition={{ delay: 0.5, duration: 1 }} transition={{ delay: 0.5, duration: 1 }}
className="text-6xl font-bold text-white"> className="text-6xl font-bold text-white">
Menu Menu
</motion.h1> </motion.h1>
<Link href="/"> <a href="/#home">
<div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1}> <div
<motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}> onClick={handleItemClick}
Home className="text-2xl font-bold text-white"
</motion.h2> variants={itemVariants}
</div> animate={isNavOpen ? "open" : "closed"}
</Link> delay={1}>
<Link href="/about"> <motion.h2
<div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.2}> className="text-white"
<motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}> variants={itemVariants}
About animate={isNavOpen ? "open" : "closed"}>
</motion.h2> Home
</div> </motion.h2>
</Link> </div>
<Link href="/projects"> </a>
<div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.3}> <Link href="/about">
<motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}> <div
Projects onClick={handleItemClick}
</motion.h2> className="text-2xl font-bold text-white"
</div> variants={itemVariants}
</Link> animate={isNavOpen ? "open" : "closed"}
<Link href="/contact"> delay={1.2}>
<div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.4}> <motion.h2
<motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}> className="text-white"
Contact variants={itemVariants}
</motion.h2> animate={isNavOpen ? "open" : "closed"}>
</div> About
</Link> </motion.h2>
</div> </div>
</div> </Link>
<Link href="/projects">
<div
onClick={handleItemClick}
className="text-2xl font-bold text-white"
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}
delay={1.3}>
<motion.h2
className="text-white"
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}>
Projects
</motion.h2>
</div>
</Link>
<a href="/#contact">
<div
onClick={handleItemClick}
className="text-2xl font-bold text-white"
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}
delay={1.4}>
<motion.h2
className="text-white"
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}>
Contact
</motion.h2>
</div>
</a>
</div>
</div>
</motion.div> </motion.div>
</> </>
); );
@ -141,11 +174,12 @@ const Navbar = () => {
<> <>
<nav <nav
ref={navRef} ref={navRef}
className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${isNavOpen ? "bg-transparent" : "bg-gray-50"} inset-0 backdrop-blur-md opacity-50 flex flex-row justify-between items-center h-16 z-50 `}> className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${
isNavOpen ? "bg-transparent" : "bg-gray-50"
} inset-0 backdrop-blur-md opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
<div className=""> <div className="">
<h1 className="text-2xl">Alvalens</h1> <h1 className="text-2xl">Alvalens</h1>
</div> </div>
{/* toggler */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<button <button
className="burger button flex flex-col justify-center items-center space-y-1.5 " className="burger button flex flex-col justify-center items-center space-y-1.5 "
@ -170,7 +204,10 @@ const Navbar = () => {
</div> </div>
</nav> </nav>
{/* items */} {/* items */}
<NavItems isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} /> <NavItems
isNavOpen={isNavOpen}
setIsNavOpen={setIsNavOpen}
/>
</> </>
); );
}; };

64
components/TopProgressbar.jsx Normal file
View file

@ -0,0 +1,64 @@
import Router from "next/router";
import NProgress from "nprogress";
let timer;
let state;
let activeRequests = 0;
function load() {
if (state === "loading") {
return;
}
state = "loading";
timer = setTimeout(() => {
NProgress.start();
}, 1);
}
function stop() {
if (activeRequests > 0) {
return;
}
state = "stop";
clearTimeout(timer);
NProgress.done();
}
function routeChangeStart() {
if (window.location.pathname !== Router.pathname) {
load();
}
}
Router.events.on("routeChangeStart", routeChangeStart);
Router.events.on("routeChangeComplete", stop);
Router.events.on("routeChangeError", stop);
const originalFetch = window.fetch;
window.fetch = async function (...args) {
if (activeRequests === 0) {
load();
}
activeRequests++;
try {
const response = await originalFetch(...args);
return response;
} catch (error) {
return Promise.reject(error);
} finally {
activeRequests -= 1;
if (activeRequests === 0) {
stop();
}
}
};
export default function TopProgressbar() {
return null;
}

1
package.json
View file

@ -20,6 +20,7 @@
"eslint-config-next": "13.4.19", "eslint-config-next": "13.4.19",
"framer-motion": "^10.16.2", "framer-motion": "^10.16.2",
"next": "13.4.19", "next": "13.4.19",
"nprogress": "^0.2.0",
"postcss": "8.4.28", "postcss": "8.4.28",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",

7
pnpm-lock.yaml generated
View file

@ -38,6 +38,9 @@ dependencies:
next: next:
specifier: 13.4.19 specifier: 13.4.19
version: 13.4.19(react-dom@18.2.0)(react@18.2.0) version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
nprogress:
specifier: ^0.2.0
version: 0.2.0
postcss: postcss:
specifier: 8.4.28 specifier: 8.4.28
version: 8.4.28 version: 8.4.28
@ -1896,6 +1899,10 @@ packages:
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dev: false dev: false
/nprogress@0.2.0:
resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
dev: false
/object-assign@4.1.1: /object-assign@4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}