// Kiebitz - Privacy-Friendly Appointments // Copyright (C) 2021-2021 The Kiebitz Authors // README.md contains license information. import React from 'react'; import PropTypes from 'prop-types'; import { A } from 'components'; import classnames from 'helpers/classnames'; import './sidebar-menu.scss'; class NavItem extends React.Component { render() { const { href, onToggle } = this.props; return ( <li className="kip-nav-item"> <A href={href} onClick={onToggle}> {this.props.children} </A> </li> ); } } class DropdownItem extends React.Component { render() { const { href, onToggle } = this.props; return ( <li className="kip-nav-item"> <A href={href} onClick={onToggle}> {this.props.children} </A> </li> ); } } class DropdownMenu extends React.Component { constructor(props) { super(props); this.state = { active: false, }; this.self = React.createRef(); } isActive = () => { return this.state.active; }; onToggle = (event) => { this.toggleActive(); this.props.onToggle(event); }; toggleActive = () => { this.setState({ active: !this.state.active }); }; render() { const { title, items, user } = this.props; const navItems = items .filter((item) => { if (item.show !== undefined && item.show(user.user) === false) return false; return true; }) .map((item, i) => { let href; if (item.route !== undefined) href = '/' + item.route; return ( <DropdownItem key={i} href={href} onToggle={(e) => this.props.onToggle(e)} > {item.title} </DropdownItem> ); }); let subMenu; if (this.isActive()) { subMenu = <ul>{navItems}</ul>; } return ( <li className="kip-nav-item" ref={this.self}> <A className={this.isActive() ? 'is-active' : ''} onClick={this.toggleActive} > {title} </A> {subMenu} </li> ); } } class MenuItems extends React.Component { render() { const { menu, onToggle, user } = this.props; const items = []; for (const [, item] of menu) { items.push(item); } return items .filter((item) => { if (item.show !== undefined && item.show(user.user) === false) return false; return true; }) .map((item, i) => { if (item.subMenu !== undefined) { return ( <DropdownMenu key={i} title={item.title} items={item.subMenu} onToggle={onToggle} /> ); } else { let href; if (item.route !== undefined) href = '/' + item.route; return ( <NavItem key={i} href={href} onToggle={onToggle}> {item.title} </NavItem> ); } }); } } const MenuItemsWithUser = MenuItems; const Menu = ({ title, menu, onToggle, mobileOnly }) => ( <aside className={classnames('kip-menu-aside', { 'kip-mobile-only': mobileOnly, })} > {title && <p className="kip-menu-label">{title}</p>} <ul className="kip-menu-list"> <MenuItemsWithUser menu={menu} onToggle={onToggle} /> </ul> </aside> ); Menu.propTypes = { title: PropTypes.node, onToggle: PropTypes.func, }; export default Menu;