Files
my-links/inertia/components/dashboard/side_nav/nav_item.tsx

30 lines
684 B
TypeScript

import styled from '@emotion/styled';
import { Link } from '@inertiajs/react';
import { rgba } from '~/lib/color';
export const Item = styled.div(({ theme }) => ({
userSelect: 'none',
height: '40px',
width: '250px',
color: theme.colors.font,
backgroundColor: theme.colors.background,
padding: '8px 12px',
borderRadius: theme.border.radius,
display: 'flex',
gap: '.75em',
alignItems: 'center',
'& > svg': {
height: '24px',
width: '24px',
},
// Disable hover effect for UserCard
'&:hover:not(.disable-hover)': {
cursor: 'pointer',
backgroundColor: rgba(theme.colors.font, 0.1),
},
}));
export const ItemLink = Item.withComponent(Link);