diff --git a/components/GlobalStyles.tsx b/components/GlobalStyles.tsx index eee33de..016dab1 100644 --- a/components/GlobalStyles.tsx +++ b/components/GlobalStyles.tsx @@ -48,6 +48,17 @@ const Global = createGlobalStyle` color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)}; transition: color 250ms ease-in-out, background 250ms ease-in-out; scroll-behavior: smooth; + + #nprogress .bar { + background: ${({ dark, theme }) => + dark ? theme.colors.dark.text : theme.colors.light.text} !important; + } + + #nprogress .peg { + box-shadow: 0 0 10px ${({ dark, theme }) => + dark ? theme.colors.dark.text : theme.colors.light.text}, 0 0 5px ${({ dark, theme }) => + dark ? theme.colors.dark.text : theme.colors.light.text} !important; + } } body::-webkit-scrollbar { diff --git a/package.json b/package.json index 77c19f4..3a25f6e 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "mdx-embed": "^0.0.17", "next": "10.0.4", "next-mdx-remote": "^2.1.1", + "nprogress": "^0.2.0", "prism-react-renderer": "^1.1.1", "react": "17.0.1", "react-dom": "17.0.1", @@ -24,6 +25,7 @@ }, "devDependencies": { "@types/node": "^14.14.19", + "@types/nprogress": "^0.2.0", "@types/react": "^17.0.0", "@types/react-typing-animation": "^1.6.2", "@types/styled-components": "^5.1.7", diff --git a/pages/_app.tsx b/pages/_app.tsx index e838614..29106f7 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,9 @@ +import { useEffect } from 'react'; + import type { AppProps } from 'next/app'; import Head from 'next/head'; +import { useRouter } from 'next/router'; + import Nav from '../components/Nav'; import DarkMode from '../components/DarkMode'; import Container from '../components/Container'; @@ -7,7 +11,28 @@ import GlobalStyles from '../components/GlobalStyles'; import Theme from '../components/Theme'; import Footer from '../components/Footer'; +import NProgress from 'nprogress'; +import 'nprogress/nprogress.css'; + +NProgress.configure({ showSpinner: false }); + const App = ({ Component, pageProps }: AppProps) => { + const router = useRouter(); + + useEffect(() => { + router.events.on('routeChangeStart', () => { + NProgress.start(); + }); + + router.events.on('routeChangeComplete', () => { + NProgress.done(); + }); + + router.events.on('routeChangeError', () => { + NProgress.done(); + }); + }, []); + return ( <> diff --git a/yarn.lock b/yarn.lock index 4807956..2f3078a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1161,6 +1161,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.19.tgz#5135176a8330b88ece4e9ab1fdcfc0a545b4bab4" integrity sha512-4nhBPStMK04rruRVtVc6cDqhu7S9GZai0fpXgPXrFpcPX6Xul8xnrjSdGB4KPBVYG/R5+fXWdCM8qBoiULWGPQ== +"@types/nprogress@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f" + integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A== + "@types/parse5@^5.0.0": version "5.0.3" resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"