From 87322e08c3b70321db25f8837a35f93bd03c16ba Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Wed, 15 Dec 2021 10:52:38 +0900
Subject: [PATCH] close #20

---
 source/src/components/Navbar.tsx | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx
index 9b99cb3..e88c995 100644
--- a/source/src/components/Navbar.tsx
+++ b/source/src/components/Navbar.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react"
 import styled from "styled-components"
 import { Link } from "react-router-dom"
 import ReactTooltip from "react-tooltip"
@@ -65,6 +66,41 @@ const StyledLink = styled(Link)`
 	margin: 0 0.2rem 0 0.2rem;
 `
 
+const StyledReadProgress = styled.div`
+	height: 2px;
+
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: theming.light.color1,
+			dark: theming.dark.color1,
+		})};
+`
+
+const ReadProgress = () => {
+	const [scroll, setScroll] = useState(0)
+
+	useEffect(() => {
+		const st = "scrollTop"
+		const sh = "scrollHeight"
+		const scrollHandler = () => {
+			const h = document.documentElement
+			const b = document.body
+
+			setScroll(
+				((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100
+			)
+		}
+
+		window.addEventListener("scroll", scrollHandler)
+
+		return () => {
+			window.removeEventListener("scroll", scrollHandler)
+		}
+	}, [])
+
+	return <StyledReadProgress style={{ width: `${scroll}%` }} />
+}
+
 const Navbar = () => {
 	return (
 		<StyledNav>
@@ -101,6 +137,7 @@ const Navbar = () => {
 
 				<Sidebar />
 			</StyledContainer>
+			<ReadProgress />
 		</StyledNav>
 	)
 }