pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

added read progress background

Browse source
This commit is contained in:
Kim, Jimin 2022-01-22 10:42:23 +09:00
parent 767f031751
commit 3bb45c3b10
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
source/src/components/Navbar.tsx
View file

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