watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 22:27:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Initial expanded view in details.

Browse source
This commit is contained in:
Mike Cao 2020-08-09 03:04:48 -07:00
parent b392a51676
commit f535dca7b9
14 changed files with 108 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

32
components/layout/MenuLayout.js
View file

@ -2,26 +2,34 @@ import React, { useState } from 'react';
import classNames from 'classnames';
import styles from './MenuLayout.module.css';
export default function MenuLayout({ menu, selectedOption, onMenuSelect, children }) {
const [option, setOption] = useState(selectedOption);
export default function MenuLayout({
menu,
selectedOption,
onMenuSelect,
className,
menuClassName,
contentClassName,
children,
}) {
function handleMenuSelect(option) {
onMenuSelect(option);
}
return (
<div className={styles.container}>
<div className={styles.menu}>
{menu.map(item =>
item ? (
<div className={classNames(styles.container, className)}>
<div className={classNames(styles.menu, menuClassName)}>
{menu.map(option =>
option ? (
<div
className={classNames(styles.option, { [styles.active]: option === item })}
onClick={() => setOption(item)}
className={classNames(styles.option, { [styles.active]: option === selectedOption })}
onClick={() => handleMenuSelect(option)}
>
{item}
{option}
</div>
) : null,
)}
</div>
<div className={styles.content}>
{typeof children === 'function' ? children(option) : children}
</div>
<div className={classNames(styles.content, contentClassName)}>{children}</div>
</div>
);
}