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

removed read progress bar

Browse source
This commit is contained in:
Kim, Jimin 2021-12-21 20:21:14 +09:00
parent 1135166391
commit 0d11e190b0
1 changed files with 0 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,3 @@
import { useEffect, useState } from "react"
import styled from "styled-components" import styled from "styled-components"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import ReactTooltip from "react-tooltip" import ReactTooltip from "react-tooltip"
@ -66,42 +65,6 @@ const StyledLink = styled(Link)`
margin: 0 0.2rem 0 0.2rem; 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
// https://stackoverflow.com/a/8028584/12979111
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 = () => { const Navbar = () => {
return ( return (
<StyledNav> <StyledNav>
@ -138,7 +101,6 @@ const Navbar = () => {
<Sidebar /> <Sidebar />
</StyledContainer> </StyledContainer>
<ReadProgress />
</StyledNav> </StyledNav>
) )
} }