Shahed Nasser
58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
import { Flex, Select } from "theme-ui"
|
|
import React, { useContext } from "react"
|
|
|
|
import ChevronDown from "../icons/chevron-down"
|
|
import NavigationContext from "../../context/navigation-context"
|
|
import { navigate } from "gatsby-link"
|
|
|
|
const SideBarSelector = ({ api }) => {
|
|
const { reset } = useContext(NavigationContext)
|
|
|
|
const handleSelect = e => {
|
|
reset()
|
|
navigate(`/api/${e.target.value}`)
|
|
}
|
|
|
|
return (
|
|
<Flex
|
|
sx={{
|
|
marginLeft: "-16px",
|
|
marginRight: "-10px",
|
|
width: "calc(100% + 26px)",
|
|
"& div": {
|
|
width: "100%",
|
|
},
|
|
}}
|
|
>
|
|
<Select
|
|
arrow={<ChevronDown fill={"dark"} styles={{ ml: "-28px" }} />}
|
|
sx={{
|
|
paddingLeft: "16px",
|
|
marginRight: "-5px",
|
|
borderRadius: "small",
|
|
borderColor: "faded",
|
|
width: "100%",
|
|
fontSize: "1",
|
|
fontFamily: "body",
|
|
transition: "all .1s ease-in-out",
|
|
"&:focus": {
|
|
outline: "none !important",
|
|
},
|
|
boxShadow: "ctaBoxShadow",
|
|
|
|
"&:hover": {
|
|
boxShadow: "buttonBoxShadowHover",
|
|
},
|
|
}}
|
|
value={api}
|
|
onChange={handleSelect}
|
|
>
|
|
<option value="admin">Admin</option>
|
|
<option value="store">Storefront</option>
|
|
</Select>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default SideBarSelector
|