added tab panel

src/frontend/src/components/StreamTabPanel/StreamTabPanel.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import VideocamIcon from '@material-ui/icons/Videocam';
+import ChatIcon from '@material-ui/icons/Chat';
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`vertical-tabpanel-${index}`}
+      aria-labelledby={`vertical-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box p={18}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `vertical-tab-${index}`,
+    'aria-controls': `vertical-tabpanel-${index}`,
+  };
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    backgroundColor: theme.palette.background.paper,
+  },
+  tabs: {
+    borderLeft: `1px solid ${theme.palette.divider}`,
+    width: '40px',
+  },
+}));
+
+export default function StreamTabPanel() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div className={classes.root}>
+      <TabPanel value={value} index={0}>
+        Videos
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        Chat
+      </TabPanel>
+      <Tabs
+        orientation="vertical"
+        value={value}
+        onChange={handleChange}
+        aria-label="Vertical tabs example"
+        className={classes.tabs}
+      >
+        <Tab icon={<VideocamIcon />} {...a11yProps(0)} />
+        <Tab icon={<ChatIcon />} {...a11yProps(1)} />
+      </Tabs>
+    </div>
+  );
+}

src/frontend/src/components/StreamTabPanel/index.js

@@ -0,0 +1,3 @@
+import StreamTabPanel from './StreamTabPanel.jsx';
+
+export default StreamTabPanel;

src/frontend/src/components/StreamsPage/StreamsPage.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactPlayer from 'react-player';
 import { makeStyles } from '@material-ui/core/styles';
-import { Container, Grid, Paper } from '@material-ui/core';
+import { Container, Grid } from '@material-ui/core';
 
 import ChannelsDrawer from '../ChannelsDrawer';
+import StreamTabPanel from '../StreamTabPanel';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -30,9 +31,11 @@ export default function StreamsPage() {
 
   return (
     <div className={classes.root}>
-      <ChannelsDrawer />
-      <Grid container spacing={3}>
-        <Grid item xs={12} md={8}>
+      <Grid container justify="space-between" alignItems="stretch">
+        <Grid item xs={2}>
+          <ChannelsDrawer />
+        </Grid>
+        <Grid item xs={7}>
           <Container className={classes.playerContainer} maxWidth="md">
             <ReactPlayer
               className={classes.player}
@@ -42,8 +45,8 @@ export default function StreamsPage() {
             />
           </Container>
         </Grid>
-        <Grid item xs={12} md={4}>
-          <Paper className={classes.paper}>xs=12 sm=6</Paper>
+        <Grid item xs={3}>
+          <StreamTabPanel />
         </Grid>
       </Grid>
     </div>