add nprogress bar
This commit is contained in:
parent
b20e18283e
commit
ab75c4caf5
|
@ -15,6 +15,7 @@
|
|||
"classnames": "^2.5.1",
|
||||
"next": "14.2.2",
|
||||
"next-intl": "^3.11.3",
|
||||
"next-nprogress-bar": "^2.3.11",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-icons": "^5.1.0",
|
||||
|
@ -3642,6 +3643,14 @@
|
|||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/next-nprogress-bar": {
|
||||
"version": "2.3.11",
|
||||
"resolved": "https://registry.npmjs.org/next-nprogress-bar/-/next-nprogress-bar-2.3.11.tgz",
|
||||
"integrity": "sha512-OjSvsQwgSWa2qBMYO478QreGG9Jt82tr4wTQptmiyzNqqjzHCyKZNkhANnzPrjuFAoelIvmruJuakODofSnvTQ==",
|
||||
"dependencies": {
|
||||
"nprogress": "^0.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
|
@ -3651,6 +3660,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nprogress": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
|
||||
"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
|
||||
},
|
||||
"node_modules/nth-check": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
"classnames": "^2.5.1",
|
||||
"next": "14.2.2",
|
||||
"next-intl": "^3.11.3",
|
||||
"next-nprogress-bar": "^2.3.11",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-icons": "^5.1.0",
|
||||
|
|
|
@ -2,9 +2,14 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { useAppSelector } from '@/store/store';
|
||||
import Head from 'next/head';
|
||||
|
||||
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
|
||||
|
||||
import { useAppSelector } from '@/store/store';
|
||||
import { LAYOUT_COLORS_PINK, LAYOUT_COLORS_YELLOW } from '@/constants/colors';
|
||||
import { Themes } from '@/meta/settings';
|
||||
|
||||
const Layout: React.FC<React.PropsWithChildren> = (props) => {
|
||||
|
||||
const { children } = props;
|
||||
|
@ -20,6 +25,12 @@ const Layout: React.FC<React.PropsWithChildren> = (props) => {
|
|||
</Head>
|
||||
<body>
|
||||
<main className="container">{children}</main>
|
||||
<ProgressBar
|
||||
height="4px"
|
||||
color={theme == Themes.dark ? LAYOUT_COLORS_YELLOW : LAYOUT_COLORS_PINK }
|
||||
options={{ showSpinner: false }}
|
||||
shallowRouting
|
||||
/>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
export const LAYOUT_COLORS_YELLOW = '#fdd835';
|
||||
export const LAYOUT_COLORS_PINK = '#d81b60';
|
Loading…
Reference in New Issue