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) => (
<BorderedMenu {...args}>
<BorderedMenuRow title="Item 1" description="Here's a description" Icon={BuildingIcon} />
<BorderedMenuRow active title="Item 2" description="This BorderedMenuRow is active" Icon={UsersOutlinedIcon} />
<BorderedMenuRow title="Item 1" description="Here's a description" Icon={BuildingIcon} path="/" />
<BorderedMenuRow
active
title="Item 2"
description="This BorderedMenuRow is active"
Icon={UsersOutlinedIcon}
path="/"
/>
</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 */
Icon: typeof SvgIcon
/** URL path */
path?: string
path: string
/** Required title of this row */
title: string
/** Defaults to `"wide"` */
@ -37,38 +37,30 @@ export const BorderedMenuRow: React.FC<BorderedMenuRowProps> = ({
}) => {
const styles = useStyles()
const Component = () => (
<ListItem
classes={{ gutters: styles.rootGutters }}
className={styles.root}
onClick={onClick}
data-status={active ? "active" : "inactive"}
>
<div className={styles.content} data-variant={variant}>
<div className={styles.contentTop}>
<Icon className={styles.icon} />
<Typography className={styles.title}>{title}</Typography>
{active && <CheckIcon className={styles.checkMark} />}
return (
<NavLink className={styles.link} to={path}>
<ListItem
classes={{ gutters: styles.rootGutters }}
className={styles.root}
data-status={active ? "active" : "inactive"}
onClick={onClick}
>
<div className={styles.content} data-variant={variant}>
<div className={styles.contentTop}>
<Icon className={styles.icon} />
<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>
{description && (
<Typography className={styles.description} color="textSecondary" variant="caption">
{ellipsizeText(description)}
</Typography>
)}
</div>
</ListItem>
</ListItem>
</NavLink>
)
if (path) {
return (
<NavLink to={path} className={styles.link}>
<Component />
</NavLink>
)
}
return <Component />
}
const iconSize = 20