fix(settings): overhaul settings layout

client/src/theme/index.tsx

@@ -16,7 +16,6 @@ const theme = createMuiTheme({
         secondary: {
             main: '#1abc9c'
         },
-
         background: {
             default: '#f1f3f4'
         }

client/src/views/Settings.tsx

@@ -1,28 +1,43 @@
 import React from 'react';
+import classnames from 'classnames';
+
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
 
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
 import Slide from '@material-ui/core/Slide';
 import { TransitionProps } from '@material-ui/core/transitions';
-import SettingsIcon from '@material-ui/icons/Settings';
-
+import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 
-import BugReportSettings from './components/BugReportSettings';
-import UpdateSettings from './components/UpdateSettngs';
-import SettingsLanguage from './components/SettingsLanguage';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
 
-import UsageStatisticsSettingsCard from './components/UsageAnalyticsSettings';
+import CloseIcon from '@material-ui/icons/Close';
+import SettingsIcon from '@material-ui/icons/Settings';
+// import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
+import AccountBoxIcon from '@material-ui/icons/AccountBox';
+import UpdateIcon from '@material-ui/icons/Update';
+
+import SettingsList from './components/Settings/GeneralSettingsList';
+import AccountSettingsList from './components/Settings/AccountSettingsList';
+import SettingsLibraryManagement from './components/Settings/LibraryManagement';
+import UpdateSettings from './components/Settings/UpdatesSettings';
 
 import { track } from '../state/track/actions';
 
+const drawerWidth = 240;
+
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
         appBar: {
@@ -33,8 +48,8 @@ const useStyles = makeStyles((theme: Theme) =>
             flex: 1
         },
         root: {
-            width: '100%',
-            display: 'flex'
+            display: 'flex',
+            marginLeft: '100px'
         },
         heading: {
             fontSize: theme.typography.pxToRem(15),
@@ -48,6 +63,24 @@ const useStyles = makeStyles((theme: Theme) =>
         center: {
             padding: 20,
             margin: 'auto'
+        },
+        bg: {
+            background: theme.palette.background.default
+        },
+        paper: {
+            minWidth: '640px'
+        },
+        drawer: {
+            width: drawerWidth,
+            flexShrink: 0
+        },
+        drawerPaper: {
+            width: drawerWidth,
+            marginTop: '64px'
+        },
+        selected: {
+            backgroundColor: theme.palette.background.default,
+            color: theme.palette.primary.main
         }
     })
 );
@@ -65,6 +98,8 @@ export default function FullScreenDialog() {
     const { t } = useTranslation();
     const dispatch = useDispatch();
 
+    const [section, setSection] = React.useState('general');
+
     const handleClickOpen = () => {
         setOpen(true);
         dispatch(track('Settings', 'click', 'open'));
@@ -81,7 +116,7 @@ export default function FullScreenDialog() {
                 <SettingsIcon />
             </IconButton>
             <Dialog
-                fullScreen
+                fullScreen={true}
                 open={open}
                 onClose={handleClose}
                 TransitionComponent={Transition}
@@ -101,14 +136,109 @@ export default function FullScreenDialog() {
                         </Typography>
                     </Toolbar>
                 </AppBar>
-                <div className={classes.root}>
-                    <div className={classes.center}>
-                        <BugReportSettings />
-                        <UsageStatisticsSettingsCard />
-                        <UpdateSettings />
-                        <SettingsLanguage />
+                <Drawer
+                    className={classes.drawer}
+                    variant="permanent"
+                    classes={{
+                        paper: classes.drawerPaper
+                    }}
+                    anchor="left"
+                >
+                    <Divider />
+                    <List>
+                        <ListItem
+                            button
+                            key="general"
+                            onClick={() => setSection('general')}
+                            className={classnames({
+                                [classes.selected]: section === 'general'
+                            })}
+                        >
+                            <ListItemIcon>
+                                <SettingsIcon />
+                            </ListItemIcon>
+                            <ListItemText
+                                primary={t('settings.menu.general')}
+                            />
+                        </ListItem>
+                        <ListItem
+                            button
+                            key="updates"
+                            onClick={() => setSection('updates')}
+                            className={classnames({
+                                [classes.selected]: section === 'updates'
+                            })}
+                        >
+                            <ListItemIcon>
+                                <UpdateIcon />
+                            </ListItemIcon>
+                            <ListItemText
+                                primary={t('settings.menu.updates')}
+                            />
+                        </ListItem>
+                        {/* <ListItem
+                            button
+                            key="h5p-libraries"
+                            onClick={() => setSection('h5p-libraries')}
+                               style={{
+                                backgroundColor:
+                                    section === 'general'
+                                        ? '#EFEFEF'
+                                        : '#FFFFFF',
+                                color: '#3498db'
+                            }}
+                        >
+                            <ListItemIcon>
+                                <LibraryBooksIcon />
+                            </ListItemIcon>
+                            <ListItemText
+                                primary={t('settings.menu.h5p-libraries')}
+                            />
+                        </ListItem>
+                        */}
+                        <ListItem
+                            button
+                            key="account"
+                            onClick={() => setSection('account')}
+                            className={classnames({
+                                [classes.selected]: section === 'account'
+                            })}
+                        >
+                            <ListItemIcon>
+                                <AccountBoxIcon />
+                            </ListItemIcon>
+                            <ListItemText
+                                primary={t('settings.menu.account')}
+                            />
+                        </ListItem>
+                    </List>
+                </Drawer>
+                <DialogContent className={classes.bg}>
+                    <div className={classes.root}>
+                        <div className={classes.center}>
+                            <Paper className={classes.paper}>
+                                {(() => {
+                                    switch (section) {
+                                        case 'general':
+                                        default:
+                                            return <SettingsList />;
+
+                                        case 'updates':
+                                            return <UpdateSettings />;
+
+                                        case 'h5p-libraries':
+                                            return (
+                                                <SettingsLibraryManagement />
+                                            );
+
+                                        case 'account':
+                                            return <AccountSettingsList />;
+                                    }
+                                })()}
+                            </Paper>
+                        </div>
                     </div>
-                </div>
+                </DialogContent>
             </Dialog>
         </div>
     );

client/src/views/components/Settings/AccountSettingsList.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
+
+import Button from '@material-ui/core/Button';
+
+import EmailIcon from '@material-ui/icons/Email';
+
+const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        root: {
+            width: '100%',
+            backgroundColor: theme.palette.background.paper
+        }
+    })
+);
+
+export default function SettingsAccountSettingsList() {
+    const classes = useStyles();
+
+    const { t } = useTranslation();
+
+    return (
+        <List
+            subheader={
+                <ListSubheader>{t('settings.account.label')}</ListSubheader>
+            }
+            className={classes.root}
+        >
+            <ListItem>
+                <ListItemIcon>
+                    <EmailIcon />
+                </ListItemIcon>
+                <ListItemText
+                    id="switch-list-label-privacy-policy"
+                    primary={t('settings.account.email.title')}
+                    secondary={
+                        /* settings.email || */ t(
+                            'settings.account.email.not-set'
+                        )
+                    }
+                />
+                <ListItemSecondaryAction>
+                    <Button variant="contained">
+                        {t('settings.account.email.change')}
+                    </Button>
+                </ListItemSecondaryAction>
+            </ListItem>
+        </List>
+    );
+}