m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add selected state.

Browse Source
This commit is contained in:
Mike Cao 2023-04-16 20:46:38 -07:00
parent 7e79711900
commit 561770a469
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/layout/SideNav.js
View File

@ -1,12 +1,18 @@
import classNames from 'classnames';
import { Menu, Item } from 'react-basics'; import { Menu, Item } from 'react-basics';
import { useRouter } from 'next/router';
import Link from 'next/link'; import Link from 'next/link';
import styles from './SideNav.module.css'; import styles from './SideNav.module.css';
export default function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) { export default function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
const { asPath } = useRouter();
return ( return (
<Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}> <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
{({ key, label, url }) => ( {({ key, label, url }) => (
<Item key={key} className={styles.item}> <Item
key={key}
className={classNames(styles.item, { [styles.selected]: asPath.startsWith(url) })}
>
<Link href={url} shallow={shallow}> <Link href={url} shallow={shallow}>
{label} {label}
</Link> </Link>

4
components/layout/SideNav.module.css
View File

@ -13,3 +13,7 @@
padding: 0; padding: 0;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.selected {
font-weight: 700;
}