synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-12 00:14:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

bug: using NavLink for menus (#1530)

Browse Source 
* bug: using NavLink for menus

resolves #955

* lets fix our story
This commit is contained in:
Kira Pilot
2022-05-17 15:01:53 -04:00
committed by GitHub
parent 4ad5ac2d4a
commit 65acfc9bef
2 changed files with 31 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
site/src/components/BorderedMenu/BorderedMenu.stories.tsx
View File

@ -12,8 +12,14 @@ export default {
const Template: Story<BorderedMenuProps> = (args: BorderedMenuProps) => ( const Template: Story<BorderedMenuProps> = (args: BorderedMenuProps) => (
<BorderedMenu {...args}> <BorderedMenu {...args}>
<BorderedMenuRow title="Item 1" description="Here's a description" Icon={BuildingIcon} /> <BorderedMenuRow title="Item 1" description="Here's a description" Icon={BuildingIcon} path="/" />
<BorderedMenuRow active title="Item 2" description="This BorderedMenuRow is active" Icon={UsersOutlinedIcon} /> <BorderedMenuRow
active
title="Item 2"
description="This BorderedMenuRow is active"
Icon={UsersOutlinedIcon}
path="/"
/>
</BorderedMenu> </BorderedMenu>
) )

54
site/src/components/BorderedMenuRow/BorderedMenuRow.tsx
View File

@ -17,7 +17,7 @@ interface BorderedMenuRowProps {
/** An SvgIcon that will be rendered to the left of the title */ /** An SvgIcon that will be rendered to the left of the title */
Icon: typeof SvgIcon Icon: typeof SvgIcon
/** URL path */ /** URL path */
path?: string path: string
/** Required title of this row */ /** Required title of this row */
title: string title: string
/** Defaults to `"wide"` */ /** Defaults to `"wide"` */
@ -37,38 +37,30 @@ export const BorderedMenuRow: React.FC<BorderedMenuRowProps> = ({
}) => { }) => {
const styles = useStyles() const styles = useStyles()
const Component = () => ( return (
<ListItem <NavLink className={styles.link} to={path}>
classes={{ gutters: styles.rootGutters }} <ListItem
className={styles.root} classes={{ gutters: styles.rootGutters }}
onClick={onClick} className={styles.root}
data-status={active ? "active" : "inactive"} data-status={active ? "active" : "inactive"}
> onClick={onClick}
<div className={styles.content} data-variant={variant}> >
<div className={styles.contentTop}> <div className={styles.content} data-variant={variant}>
<Icon className={styles.icon} /> <div className={styles.contentTop}>
<Typography className={styles.title}>{title}</Typography> <Icon className={styles.icon} />
{active && <CheckIcon className={styles.checkMark} />} <Typography className={styles.title}>{title}</Typography>
{active && <CheckIcon className={styles.checkMark} />}
</div>
{description && (
<Typography className={styles.description} color="textSecondary" variant="caption">
{ellipsizeText(description)}
</Typography>
)}
</div> </div>
</ListItem>
{description && ( </NavLink>
<Typography className={styles.description} color="textSecondary" variant="caption">
{ellipsizeText(description)}
</Typography>
)}
</div>
</ListItem>
) )
if (path) {
return (
<NavLink to={path} className={styles.link}>
<Component />
</NavLink>
)
}
return <Component />
} }
const iconSize = 20 const iconSize = 20