76 lines
1.7 KiB
TypeScript
76 lines
1.7 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { createPolymorphicComponent, Flex, FlexProps } from '@mantine/core';
|
|
import type { LinkProps } from 'react-router-dom';
|
|
import { Link } from 'react-router-dom';
|
|
import styled, { css } from 'styled-components';
|
|
|
|
interface ListItemProps extends FlexProps {
|
|
children: ReactNode;
|
|
disabled?: boolean;
|
|
to?: string;
|
|
}
|
|
|
|
const StyledItem = styled(Flex)`
|
|
width: 100%;
|
|
font-family: var(--content-font-family);
|
|
font-weight: 600;
|
|
|
|
&:focus-visible {
|
|
border: 1px solid var(--primary-color);
|
|
}
|
|
`;
|
|
|
|
const ItemStyle = css`
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 0.5rem 1rem;
|
|
color: var(--sidebar-fg);
|
|
border: 1px transparent solid;
|
|
transition: color 0.2s ease-in-out;
|
|
|
|
&:hover {
|
|
color: var(--sidebar-fg-hover);
|
|
}
|
|
`;
|
|
|
|
const _ItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
|
|
pointer-events: ${(props) => props.disabled && 'none'};
|
|
opacity: ${(props) => props.disabled && 0.6};
|
|
|
|
&:focus-visible {
|
|
border: 1px solid var(--primary-color);
|
|
}
|
|
|
|
${ItemStyle}
|
|
`;
|
|
|
|
const ItemLink = createPolymorphicComponent<'a', ListItemProps>(_ItemLink);
|
|
|
|
export const SidebarItem = ({ to, children, ...props }: ListItemProps) => {
|
|
if (to) {
|
|
return (
|
|
<ItemLink
|
|
component={Link}
|
|
to={to}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</ItemLink>
|
|
);
|
|
}
|
|
return (
|
|
<StyledItem
|
|
tabIndex={0}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</StyledItem>
|
|
);
|
|
};
|
|
|
|
SidebarItem.Link = ItemLink;
|
|
|
|
SidebarItem.defaultProps = {
|
|
disabled: false,
|
|
to: undefined,
|
|
};
|