diff --git a/apps/blog/src/features/shared/components/Navbar.tsx b/apps/blog/src/features/shared/components/nav/Navbar.tsx similarity index 97% rename from apps/blog/src/features/shared/components/Navbar.tsx rename to apps/blog/src/features/shared/components/nav/Navbar.tsx index 1b0a51db..18de92c3 100644 --- a/apps/blog/src/features/shared/components/Navbar.tsx +++ b/apps/blog/src/features/shared/components/nav/Navbar.tsx @@ -2,7 +2,7 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; import { FunctionComponent, useEffect, useState } from 'react'; -import { AvatarImage } from './Avatar'; +import { AvatarImage } from '../Avatar'; interface NavTextProps { text: string; diff --git a/apps/blog/src/features/shared/components/nav/Progress.tsx b/apps/blog/src/features/shared/components/nav/Progress.tsx new file mode 100644 index 00000000..d70aac23 --- /dev/null +++ b/apps/blog/src/features/shared/components/nav/Progress.tsx @@ -0,0 +1,28 @@ +import { FunctionComponent, useEffect, useState } from 'react'; + +const NavProgress: FunctionComponent = () => { + const [progress, setProgress] = useState(0); + const [max, setMax] = useState(1); + + useEffect(() => { + const { scrollHeight, clientHeight } = document.documentElement; + const documentMax = scrollHeight - clientHeight; + setMax(documentMax); + + const handleScroll = () => { + setProgress(window.scrollY % documentMax); + }; + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + return ( +
+ +
+ ); +}; + +export default NavProgress; diff --git a/apps/blog/src/features/styles/ui/navigation.scss b/apps/blog/src/features/styles/ui/navigation.scss index 465f70a0..19c01232 100644 --- a/apps/blog/src/features/styles/ui/navigation.scss +++ b/apps/blog/src/features/styles/ui/navigation.scss @@ -29,6 +29,26 @@ var(--tw-ring-shadow, 0 0 #fff0), var(--tw-shadow); } +.nav-progress { + progress { + position: fixed; + top: 0; + left: 0; + z-index: 101; + width: 100%; + height: 3px; + accent-color: red; + } + + ::-webkit-progress-bar { + background-color: $dark-color; + } + + ::-webkit-progress-value { + background: #28bc97; + } +} + /* MOBILE */ @media (width <= 700px) { .post-nav-trans { diff --git a/apps/blog/src/pages/404.tsx b/apps/blog/src/pages/404.tsx index 9fa248e8..07808d3e 100644 --- a/apps/blog/src/pages/404.tsx +++ b/apps/blog/src/pages/404.tsx @@ -3,7 +3,7 @@ import { FunctionComponent } from 'react'; import NotFoundContainer from '~/404/Container'; import Footer from '~/shared/components/Footer'; import MetaHeader from '~/shared/components/MetaHeader'; -import Navbar from '~/shared/components/Navbar'; +import Navbar from '~/shared/components/nav/Navbar'; import { ImageUrl, MetaDescription, MetaTitle } from '~/shared/constants/blog'; const NotFound: FunctionComponent = () => { diff --git a/apps/blog/src/pages/about.tsx b/apps/blog/src/pages/about.tsx index 2b2bd0b2..eb69ac4e 100644 --- a/apps/blog/src/pages/about.tsx +++ b/apps/blog/src/pages/about.tsx @@ -3,7 +3,7 @@ import { NextPage } from 'next'; import AboutContainer from '~/about/Container'; import Footer from '~/shared/components/Footer'; import MetaHeader from '~/shared/components/MetaHeader'; -import Navbar from '~/shared/components/Navbar'; +import Navbar from '~/shared/components/nav/Navbar'; import { ImageUrl, MetaDescription, MetaTitle } from '~/shared/constants/blog'; const About: NextPage = () => { diff --git a/apps/blog/src/pages/index.tsx b/apps/blog/src/pages/index.tsx index 159c6a31..d50579db 100644 --- a/apps/blog/src/pages/index.tsx +++ b/apps/blog/src/pages/index.tsx @@ -2,7 +2,7 @@ import { NextPage } from 'next'; import HomeContainer from '~/home/Container'; import MetaHeader from '~/shared/components/MetaHeader'; -import Navbar from '~/shared/components/Navbar'; +import Navbar from '~/shared/components/nav/Navbar'; import { ImageUrl, MetaDescription, MetaTitle } from '~/shared/constants/blog'; const Home: NextPage = () => { diff --git a/apps/blog/src/pages/posts/[...slug].tsx b/apps/blog/src/pages/posts/[...slug].tsx index d681c1f9..0cb33c8e 100644 --- a/apps/blog/src/pages/posts/[...slug].tsx +++ b/apps/blog/src/pages/posts/[...slug].tsx @@ -6,7 +6,8 @@ import PostContainer from '~/posts/Container'; import { PostType } from '~/posts/models'; import Footer from '~/shared/components/Footer'; import MetaHeader from '~/shared/components/MetaHeader'; -import Navbar from '~/shared/components/Navbar'; +import Navbar from '~/shared/components/nav/Navbar'; +import NavProgress from '~/shared/components/nav/Progress'; import { MetaTitle } from '~/shared/constants/blog'; import markdownToHtml from '~/shared/helpers/markdown'; import { getAllPosts, getPostBySlug } from '~/shared/helpers/post'; @@ -34,6 +35,7 @@ const Posts: NextPage = ({ post }) => { description={post.description} />
+