feat(nav): Add Nav progress bar

apps/blog/src/features/shared/components/Navbar.tsx → 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;

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 (
+    <div className="nav-progress">
+      <progress value={progress} max={max}></progress>
+    </div>
+  );
+};
+
+export default NavProgress;

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 {

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 = () => {

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 = () => {

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 = () => {

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<PostsProps> = ({ post }) => {
         description={post.description}
       />
       <main className="post-layout">
+        <NavProgress />
         <Navbar />
         <PostContainer post={post} />
         <Footer />

apps/blog/src/pages/posts/index.tsx

@@ -4,7 +4,7 @@ import PostListContainer from '~/posts/ListContainer';
 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 { ImageUrl, MetaDescription, MetaTitle } from '~/shared/constants/blog';
 import { getAllPosts, getPostBySlug } from '~/shared/helpers/post';
 

apps/blog/src/pages/tags/[tag].tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import ErrorPage from 'next/error';
 
 import MetaHeader from '~/shared/components/MetaHeader';
-import Navbar from '~/shared/components/Navbar';
+import Navbar from '~/shared/components/nav/Navbar';
 import Footer from '~/shared/components/Footer';
 import { getAllPosts } from '~/shared/helpers/post';
 import { PostType } from '~/posts/models';

apps/blog/src/pages/tags/index.tsx

@@ -2,7 +2,7 @@ import { NextPage } from 'next';
 
 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';
 import { getAllPosts, getPostBySlug } from '~/shared/helpers/post';
 import TagListContainer from '~/tags/tagList/Container';