mirror of https://github.com/sunface/rust-course
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.6 KiB
62 lines
1.6 KiB
import { chakra, PropsOf, useColorModeValue } from "@chakra-ui/react"
|
|
import NextLink from "next/link"
|
|
import { useRouter } from "next/router"
|
|
import React from "react"
|
|
|
|
const StyledLink = React.forwardRef(function StyledLink(
|
|
props: PropsOf<typeof chakra.a> & { isActive?: boolean },
|
|
ref: React.Ref<any>,
|
|
) {
|
|
const { isActive, icon,children, ...rest } = props
|
|
return (
|
|
<chakra.a
|
|
aria-current={isActive ? "page" : undefined}
|
|
width="100%"
|
|
px="3"
|
|
py="2"
|
|
rounded="md"
|
|
ref={ref}
|
|
fontSize="14px"
|
|
fontWeight="500"
|
|
color={useColorModeValue("gray.700", "whiteAlpha.900")}
|
|
transition="all 0.2s"
|
|
display="flex"
|
|
alignItems="center"
|
|
_activeLink={{
|
|
bg: useColorModeValue("teal.50", "rgba(48, 140, 122, 0.3)"),
|
|
color: useColorModeValue("teal.700", "teal.200"),
|
|
fontWeight: "600",
|
|
}}
|
|
{...rest}
|
|
><chakra.span fontSize="1.1rem">{icon}</chakra.span> <chakra.span ml="5">{children}</chakra.span></chakra.a>
|
|
)
|
|
})
|
|
|
|
type SidebarLinkProps = PropsOf<typeof chakra.div> & {
|
|
href?: string
|
|
icon?: React.ReactElement
|
|
}
|
|
|
|
const SidebarLink = (props: SidebarLinkProps) => {
|
|
const { href, icon, children, ...rest } = props
|
|
|
|
const { pathname } = useRouter()
|
|
const isActive = pathname === href
|
|
|
|
return (
|
|
<chakra.div
|
|
userSelect="none"
|
|
display="flex"
|
|
alignItems="center"
|
|
lineHeight="1.5rem"
|
|
{...rest}
|
|
>
|
|
<NextLink href={href} passHref>
|
|
<StyledLink isActive={isActive} icon={icon}>{children}</StyledLink>
|
|
</NextLink>
|
|
</chakra.div>
|
|
)
|
|
}
|
|
|
|
export default SidebarLink
|