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 {
24 interface SidePanelProps {
25 toggleOpen: (id: string) => void;
26 toggleActive: (id: string) => void;
27 sidePanelItems: SidePanelItem[];
30 class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
31 render(): ReactElement<any> {
32 const { classes, toggleOpen, toggleActive, sidePanelItems } = this.props;
33 const { listItemText, leftSidePanelContainer, row, list, icon, projectIcon, active, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
35 <div className={leftSidePanelContainer}>
37 {sidePanelItems.map(it => (
39 <ListItem button className={list} onClick={() => toggleActive(it.id)}>
40 <span className={row}>
41 {it.name === "Projects" ? <i onClick={() => toggleOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow}
42 ${it.open ? `fas fa-caret-down ${arrowTransition}` : `fas fa-caret-down ${arrowRotate}`}`} /> : null}
43 <ListItemIcon className={it.active ? active : ''}>
44 <i className={`${it.icon} ${icon} ${it.name === "Projects" ? projectIcon : ''}`} />
46 <ListItemText className={listItemText} primary={<Typography className={it.active ? active : ''}>{it.name}</Typography>} />
49 {it.name === "Projects" ? (
50 <Collapse in={it.open} timeout="auto" unmountOnExit>
61 type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIcon' |
62 'activeArrow' | 'inactiveArrow' | 'arrowRotate' | 'arrowTransition';
64 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
83 transition: 'all 0.1s ease',
86 transition: 'all 0.1s ease',
87 transform: 'rotate(-90deg)',
89 leftSidePanelContainer: {
111 export default withStyles(styles)(SidePanel);