1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { ReactElement } from 'react';
7 import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
8 import List from "@material-ui/core/List/List";
9 import ListItem from "@material-ui/core/ListItem/ListItem";
10 import ListItemText from "@material-ui/core/ListItemText/ListItemText";
11 import ListItemIcon from '@material-ui/core/ListItemIcon';
12 import Collapse from "@material-ui/core/Collapse/Collapse";
14 import { Typography } from '@material-ui/core';
16 export interface SidePanelItem {
26 interface SidePanelProps {
27 toggleOpen: (id: string) => void;
28 toggleActive: (id: string) => void;
29 sidePanelItems: SidePanelItem[];
32 class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
33 render(): ReactElement<any> {
34 const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
35 const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
37 <div className={leftSidePanelContainer}>
39 {sidePanelItems.map(it => (
41 <ListItem button className={list} onClick={() => toggleActive(it.id)}>
42 <span className={row}>
43 {it.openAble ? <i onClick={() => toggleOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow}
44 ${it.open ? `fas fa-caret-down ${arrowTransition}` : `fas fa-caret-down ${arrowRotate}`}`} /> : null}
45 <ListItemIcon className={it.active ? active : ''}>
46 <i className={`${it.icon} ${icon} ${it.margin ? projectIconMargin : ''}`} />
48 <ListItemText className={listItemText} primary={<Typography className={it.active ? active : ''}>{it.name}</Typography>} />
52 <Collapse in={it.open} timeout="auto" unmountOnExit>
63 type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIconMargin' |
64 'activeArrow' | 'inactiveArrow' | 'arrowRotate' | 'arrowTransition';
66 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
85 transition: 'all 0.1s ease',
88 transition: 'all 0.1s ease',
89 transform: 'rotate(-90deg)',
91 leftSidePanelContainer: {
100 paddingBottom: '5px',
113 export default withStyles(styles)(SidePanel);