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>
) )

16
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,12 +37,13 @@ export const BorderedMenuRow: React.FC<BorderedMenuRowProps> = ({
}) => { }) => {
const styles = useStyles() const styles = useStyles()
const Component = () => ( return (
<NavLink className={styles.link} to={path}>
<ListItem <ListItem
classes={{ gutters: styles.rootGutters }} classes={{ gutters: styles.rootGutters }}
className={styles.root} className={styles.root}
onClick={onClick}
data-status={active ? "active" : "inactive"} data-status={active ? "active" : "inactive"}
onClick={onClick}
> >
<div className={styles.content} data-variant={variant}> <div className={styles.content} data-variant={variant}>
<div className={styles.contentTop}> <div className={styles.contentTop}>
@ -58,19 +59,10 @@ export const BorderedMenuRow: React.FC<BorderedMenuRowProps> = ({
)} )}
</div> </div>
</ListItem> </ListItem>
)
if (path) {
return (
<NavLink to={path} className={styles.link}>
<Component />
</NavLink> </NavLink>
) )
} }
return <Component />
}
const iconSize = 20 const iconSize = 20
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({