95 lines
2 KiB
TypeScript
95 lines
2 KiB
TypeScript
import { useContext } from "react"
|
|
import styled from "styled-components"
|
|
import { Link } from "react-router-dom"
|
|
|
|
import NavLinks from "./NavLinks"
|
|
import LocaleToggleButton from "./LocaleToggleButton"
|
|
import ThemeToggleButton from "./ThemeToggleButton"
|
|
import SearchButton from "./SearchButton"
|
|
import ReadProgress from "./ReadProgress"
|
|
import Sidebar from "../Sidebar"
|
|
|
|
import theming from "../../styles/theming"
|
|
|
|
import { globalContext } from "../../globalContext"
|
|
|
|
const StyledNav = styled.nav`
|
|
/* set z index to arbitrarily high value to prevent other components from drawing over the navbar */
|
|
z-index: 9999;
|
|
position: fixed;
|
|
width: 100%;
|
|
|
|
background-color: ${(props) =>
|
|
theming.theme(props.theme.currentTheme, {
|
|
light: theming.light.backgroundColor0,
|
|
dark: theming.dark.backgroundColor0,
|
|
})};
|
|
color: ${(props) =>
|
|
theming.theme(props.theme.currentTheme, {
|
|
light: theming.light.color0,
|
|
dark: theming.dark.color0,
|
|
})};
|
|
box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
|
|
`
|
|
|
|
const StyledContainer = styled.div`
|
|
margin: 0 auto;
|
|
align-items: center;
|
|
display: flex;
|
|
height: 4rem;
|
|
|
|
/* account for 20px scrollbar width */
|
|
@media only screen and (min-width: calc(${theming.size
|
|
.screen_size2} + 20px)) {
|
|
width: calc(${theming.size.screen_size2} - 20px);
|
|
}
|
|
`
|
|
|
|
const RightButtons = styled.div`
|
|
display: flex;
|
|
height: 100%;
|
|
margin-left: auto;
|
|
`
|
|
|
|
const StyledImg = styled.img`
|
|
height: 2.5rem;
|
|
|
|
display: block;
|
|
margin: 1rem;
|
|
`
|
|
|
|
export const StyledLink = styled.div`
|
|
${theming.styles.navbarButtonStyle}
|
|
`
|
|
|
|
const Navbar = () => {
|
|
const { globalState } = useContext(globalContext)
|
|
const { locale } = globalState
|
|
|
|
return (
|
|
<StyledNav>
|
|
<StyledContainer>
|
|
{/* icon */}
|
|
<Link to={`/${locale}`}>
|
|
<StyledImg src="/icon/icon_circle.svg" />
|
|
</Link>
|
|
|
|
{/* nav links */}
|
|
<NavLinks />
|
|
|
|
{/* right buttons */}
|
|
<RightButtons>
|
|
<LocaleToggleButton />
|
|
<ThemeToggleButton />
|
|
<SearchButton />
|
|
</RightButtons>
|
|
|
|
{/* etc */}
|
|
<Sidebar />
|
|
</StyledContainer>
|
|
<ReadProgress />
|
|
</StyledNav>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|