From 3bb45c3b1040c2fecadb404747da6d244dc1fbd3 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sat, 22 Jan 2022 10:42:23 +0900
Subject: [PATCH] added read progress background

---
 source/src/components/Navbar.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx
index 05a6948..97c677e 100644
--- a/source/src/components/Navbar.tsx
+++ b/source/src/components/Navbar.tsx
@@ -66,9 +66,13 @@ const StyledLink = styled(Link)`
 	margin: 0 0.2rem 0 0.2rem;
 `
 
-const StyledReadProgress = styled.div`
+const StyledReadProgressBackground = styled.div`
 	height: 2px;
+	background-color: darkslategray;
+`
 
+const StyledReadProgress = styled.div`
+	height: 100%;
 	background-color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
 			light: theming.light.color1,
@@ -111,7 +115,11 @@ const ReadProgress = () => {
 		}, 100)
 	}, [location])
 
-	return <StyledReadProgress style={{ width: `${scroll}%` }} />
+	return (
+		<StyledReadProgressBackground>
+			<StyledReadProgress style={{ width: `${scroll}%` }} />
+		</StyledReadProgressBackground>
+	)
 }
 
 const Navbar = () => {