Skip to content

Commit de560f3

Browse files
dc7devsdc7devs
committed
added progress bar by NextProgress
1 parent 94d8197 commit de560f3

4 files changed

Lines changed: 22 additions & 8 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"eslint": "8.29.0",
1616
"eslint-config-next": "13.0.6",
1717
"next": "13.0.6",
18+
"next-progress": "^2.2.0",
1819
"next-themes": "^0.2.1",
1920
"phosphor-react": "^1.4.1",
2021
"react": "18.2.0",

‎src/components/layout.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
33
import Link from "next/link"
44
import { ReactNode, useState } from "react"
55
import NavBar from "./navbar"
6-
import { DiscordLogo, EnvelopeSimple, GithubLogo, LinkedinLogo, YoutubeLogo } from "phosphor-react"
6+
import NextProgress from "next-progress"
77

88
type PropsChildren = {
99
children: ReactNode
@@ -20,17 +20,18 @@ export default function Layout({ children }: PropsChildren) {
2020
<meta name="description" content="Generated by create next app" />
2121
<link rel="icon" href="/favicon.png" />
2222
</Head>
23+
<NextProgress color="rgb(139 92 246)" delay={500} />
2324

2425
<NavBar />
2526

2627
<main className="w-full h-full pt-16 sm:pt-24">
27-
<div className={`px-4 py-7 sm:p-y sm:pr-0 sm:w-4/5 h-full mx-auto overflow-y-auto relative ${checkRouter ? "" : "md:border-l-2 border-dotted border-black/25 dark:border-white/25"}`}>
28+
<div className={`px-4 py-7 sm:p-y sm:pr-0 sm:w-4/5 h-full mx-auto overflow-y-auto relative ${checkRouter ? "" : "md:border-l-[2.8px] border-dashed border-black/25 dark:border-white/25"}`}>
2829
{children}
2930
<div className={`hidden sm:block ${checkRouter ? "sm:absolute sm:bottom-4 sm:right-2 lg:absolute lg:bottom-10 lg:left-0" : "sm:absolute sm:bottom-4 sm:right-2 lg:fixed lg:top-1/2 lg:bottom-1/2 lg:right-[91%]"}`}>
3031
<ul className={`flex gap-3 md:gap-4 ${checkRouter ? "sm:flex-row" : "sm:flex-row lg:flex-col"} items-center`}>
3132
<li>
3233
<Link href="https://github.com/dc7devs" target="__blank">
33-
<svg viewBox="0 0 24 24" aria-hidden="true" className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"></path></svg>
34+
<svg viewBox="0 0 24 24" aria-hidden="true" className="h-7 w-7 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"></path></svg>
3435
</Link>
3536
</li>
3637

@@ -48,7 +49,7 @@ export default function Layout({ children }: PropsChildren) {
4849

4950
<li>
5051
<Link href="https://discord.com/users/687863744541491294" target="__blank">
51-
<img className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300" src="/images/discord.svg" alt="Discord" />
52+
<svg className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M524.5 69.84a1.5 1.5 0 0 0 -.764-.7A485.1 485.1 0 0 0 404.1 32.03a1.816 1.816 0 0 0 -1.923 .91 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.14-30.6 1.89 1.89 0 0 0 -1.924-.91A483.7 483.7 0 0 0 116.1 69.14a1.712 1.712 0 0 0 -.788 .676C39.07 183.7 18.19 294.7 28.43 404.4a2.016 2.016 0 0 0 .765 1.375A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.1 430.4a1.86 1.86 0 0 0 -1.019-2.588 321.2 321.2 0 0 1 -45.87-21.85 1.885 1.885 0 0 1 -.185-3.126c3.082-2.309 6.166-4.711 9.109-7.137a1.819 1.819 0 0 1 1.9-.256c96.23 43.92 200.4 43.92 295.5 0a1.812 1.812 0 0 1 1.924 .233c2.944 2.426 6.027 4.851 9.132 7.16a1.884 1.884 0 0 1 -.162 3.126 301.4 301.4 0 0 1 -45.89 21.83 1.875 1.875 0 0 0 -1 2.611 391.1 391.1 0 0 0 30.01 48.81 1.864 1.864 0 0 0 2.063 .7A486 486 0 0 0 610.7 405.7a1.882 1.882 0 0 0 .765-1.352C623.7 277.6 590.9 167.5 524.5 69.84zM222.5 337.6c-28.97 0-52.84-26.59-52.84-59.24S193.1 219.1 222.5 219.1c29.67 0 53.31 26.82 52.84 59.24C275.3 310.1 251.9 337.6 222.5 337.6zm195.4 0c-28.97 0-52.84-26.59-52.84-59.24S388.4 219.1 417.9 219.1c29.67 0 53.31 26.82 52.84 59.24C470.7 310.1 447.5 337.6 417.9 337.6z"></path></svg>
5253
</Link>
5354
</li>
5455

‎src/components/navbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@ export default function NavBar() {
2424

2525
<div className="flex justify-center items-center">
2626
<ul className="hidden sm:flex justify-stretch items-cente gap-x-3">
27-
<li className={`${router.pathname == "/" ? "text-zinc-900/90 font-semibold" : "text-base" } font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20 `}>
27+
<li className={`${router.pathname == "/" ? "text-zinc-900/90 font-semibold" : "text-base" } font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20 select-none`}>
2828
<Link href="/">Home</Link>
2929
</li>
30-
<li className={`${router.pathname == "/about" ? "text-zinc-900/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20`}>
30+
<li className={`${router.pathname == "/about" ? "text-zinc-900/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20 select-none`}>
3131
<Link href="/about">About</Link>
3232
</li>
33-
<li className={`${router.pathname == "/projects" ? "text-zinc-900/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20`}>
33+
<li className={`${router.pathname == "/projects" ? "text-zinc-900/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20 select-none`}>
3434
<Link href="/projects">Projects</Link>
3535
</li>
36-
<li className={`${router.pathname == "/contact" ? "text-zinc-900/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20`}>
36+
<li className={`${router.pathname == "/contact" ? "text-zinc-900/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20 select-none`}>
3737
<Link href="/contact">Contact</Link>
3838
</li>
3939
</ul>

‎yarn.lock‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1472,6 +1472,13 @@ natural-compare@^1.4.0:
14721472
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
14731473
integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
14741474

1475+
next-progress@^2.2.0:
1476+
version "2.2.0"
1477+
resolved "https://registry.yarnpkg.com/next-progress/-/next-progress-2.2.0.tgz#8b764c3c9b24834d251dfe508112314ec1c756bf"
1478+
integrity sha512-g6VBoaj2SfUhKiBSJW/7ju06Ks3r3mUK79HdrLJ7fmvnjeyHPViAKLQDsMN1QIoBcTqN1hR7A8sISiMfm01qmQ==
1479+
dependencies:
1480+
nprogress "^0.2.0"
1481+
14751482
next-themes@^0.2.1:
14761483
version "0.2.1"
14771484
resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
@@ -1517,6 +1524,11 @@ normalize-range@^0.1.2:
15171524
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
15181525
integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
15191526

1527+
nprogress@^0.2.0:
1528+
version "0.2.0"
1529+
resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
1530+
integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
1531+
15201532
object-assign@^4.1.1:
15211533
version "4.1.1"
15221534
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"

0 commit comments

Comments
 (0)