This commit is contained in:
Kim, Jimin 2021-12-22 19:51:32 +09:00
parent af13489206
commit 62bb395e8c
4 changed files with 75 additions and 42 deletions

View file

@ -27,20 +27,10 @@ const IENotSupported = styled.p`
font-family: ${theming.font.regular};
`
const StyledScrollableArea = styled.div`
height: calc(100vh - 4rem);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: scroll;
overflow-x: hidden;
`
const StyedContentContainer = styled.div`
margin-top: 3rem;
const StyledContentContainer = styled.div`
flex: 1 1 auto;
margin-bottom: 3rem;
margin-top: 5rem;
`
const App = () => {
@ -91,28 +81,27 @@ const App = () => {
<meta property="og:description" content="developomp's blog" />
<meta property="og:url" content={process.env.PUBLIC_URL} />
</Helmet>
<GlobalStyle />
<Navbar />
<StyledScrollableArea>
<StyedContentContainer>
{isLoading ? (
<Loading />
) : (
<Routes>
<Route
path="/"
element={<PostList howMany={5} title="Home" />}
/>
<Route path="/loading" element={<Loading />} />
<Route path="/search" element={<Search />} />
<Route path="/404" element={<NotFound />} />
<Route path="/*" element={<Page />} />
</Routes>
)}
</StyedContentContainer>
<Footer />
</StyledScrollableArea>
<StyledContentContainer>
{isLoading ? (
<Loading />
) : (
<Routes>
<Route
path="/"
element={<PostList howMany={5} title="Home" />}
/>
<Route path="/loading" element={<Loading />} />
<Route path="/search" element={<Search />} />
<Route path="/404" element={<NotFound />} />
<Route path="/*" element={<Page />} />
</Routes>
)}
</StyledContentContainer>
<Footer />
</ThemeProvider>
)
}

View file

@ -4,6 +4,7 @@ import theming from "../styles/theming"
import Card from "./Card"
export const mainContentCSS = css`
margin-top: 1rem;
width: 50%;
@media screen and (max-width: ${theming.size.screen_size1}) {

View file

@ -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"
@ -15,7 +16,7 @@ import NavbarData from "../data/NavbarData"
const StyledNav = styled.nav`
/* set z index to arbitrarily high value to prevent other components from drawing over the navbar */
z-index: 9999;
max-height: 4rem;
position: fixed;
width: 100%;
background-color: ${(props) =>
@ -65,6 +66,42 @@ 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
// 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 = () => {
return (
<StyledNav>
@ -101,6 +138,7 @@ const Navbar = () => {
<Sidebar />
</StyledContainer>
<ReadProgress />
</StyledNav>
)
}

View file

@ -210,10 +210,14 @@ const globalStyle = css`
${markCSS}
${katexCSS}
body {
overflow-x: hidden;
overflow-y: scroll;
}
html,
body,
#root {
overflow: hidden;
min-height: 100vh;
margin: 0;
display: flex;
@ -235,19 +239,19 @@ const globalStyle = css`
text-rendering: optimizeLegibility;
}
#root {
display: grid;
grid-template-rows: 4rem / auto;
height: 100vh;
width: 100vw;
}
a {
text-decoration: none;
color: ${theming.color.linkColor};
}
// header anchor offset to compensate for navbar
:target:before {
content: "";
display: block;
height: 4rem;
margin: 4rem 0 0;
}
hr {
border: 0;
border-bottom: 1px solid;
@ -255,6 +259,7 @@ const globalStyle = css`
* {
transition: color 0.1s linear;
scroll-behavior: smooth;
}
`