87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import {
|
|
Collapse,
|
|
Divider,
|
|
Drawer,
|
|
List,
|
|
ListItemButton,
|
|
ListItemText,
|
|
Toolbar,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
import { ExpandLess, ExpandMore } from "@mui/icons-material";
|
|
import ContactInfo from "../ContactInfo";
|
|
import Status from "../Status";
|
|
import ContactItem from "./sidebar-components/ContactItem";
|
|
|
|
const contacts: ContactInfo[] = [
|
|
{ name: "Taehee ...", status: Status.Online },
|
|
{ name: "Jincheng ...", status: Status.Offline },
|
|
{ name: "Mathew ...", status: Status.InMeeting },
|
|
{ name: "Esteban ...", status: Status.Away },
|
|
];
|
|
|
|
interface Props {
|
|
setContactSelected: (contactInfo: ContactInfo) => void;
|
|
}
|
|
|
|
const sidebarWidth = 240;
|
|
|
|
const Sidebar: React.FC<Props> = (props) => {
|
|
const [favoritesOpen, setFavoritesOpen] = React.useState<boolean>(true);
|
|
const [teamOpen, setTeamOpen] = React.useState<boolean>(false);
|
|
|
|
return (
|
|
<Drawer
|
|
variant="permanent"
|
|
sx={{
|
|
width: sidebarWidth,
|
|
["& .MuiDrawer-paper"]: { width: sidebarWidth },
|
|
}}
|
|
>
|
|
<Toolbar />
|
|
<List>
|
|
<ListItemText
|
|
primary="Contacts"
|
|
primaryTypographyProps={{ variant: "h6" }}
|
|
sx={{ textAlign: "center" }}
|
|
/>
|
|
<Divider />
|
|
<ListItemButton onClick={() => setFavoritesOpen(!favoritesOpen)}>
|
|
{favoritesOpen ? <ExpandLess /> : <ExpandMore />}
|
|
<ListItemText primary="Favorites" sx={{ textAlign: "center" }} />
|
|
<ListItemText primary="10" sx={{ textAlign: "right" }} />
|
|
</ListItemButton>
|
|
<Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
|
|
<List disablePadding>
|
|
{contacts.map((contact, i) => (
|
|
<ContactItem
|
|
contactInfo={contact}
|
|
key={i}
|
|
setContactSelected={props.setContactSelected}
|
|
/>
|
|
))}
|
|
</List>
|
|
</Collapse>
|
|
<ListItemButton onClick={() => setTeamOpen(!teamOpen)}>
|
|
{teamOpen ? <ExpandLess /> : <ExpandMore />}
|
|
<ListItemText primary="Team" sx={{ textAlign: "center" }} />
|
|
<ListItemText primary="10" sx={{ textAlign: "right" }} />
|
|
</ListItemButton>
|
|
<Collapse in={teamOpen} timeout="auto" unmountOnExit>
|
|
<List disablePadding>
|
|
{contacts.map((contact, i) => (
|
|
<ContactItem
|
|
contactInfo={contact}
|
|
key={i}
|
|
setContactSelected={props.setContactSelected}
|
|
/>
|
|
))}
|
|
</List>
|
|
</Collapse>
|
|
</List>
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|