enhanced(new theme, menus):

* Added a logout option in the settings menu
* Centralized secondary menus definitions
* The menus in the drawer are now fully synced

frontend/src/components/app/AppFrame.js

@@ -9,7 +9,7 @@ import Chip from "@material-ui/core/Chip";
 import Avatar from "@material-ui/core/Avatar";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
-import {mainMenuItems, secondaryMenuItems} from "./menuItems";
+import {infoMenuItems, mainMenuItems, secondaryMenuItems, settingsMenuItems} from "./menuItems";
 import withStyles from "@material-ui/core/styles/withStyles";
 import PropTypes from "prop-types";
 import Fab from "@material-ui/core/Fab";
@@ -171,10 +171,10 @@ class AppFrame extends React.Component {
     const {classes} = this.props;
     return (
       <div className={classNames(classes.desktopOnly, classes.centered, classes.widthFitContent)}>
-        {items.map(({name, Icon, route}, idx) => (
+        {items.map(({label, Icon, route}, idx) => (
           <CustomNavLink to={route} key={idx}>
             <Button color="default" className={classNames(classes.mainMenuButton, classes.contrastTextPrimary)}>
-              {name}
+              {label}
               {<Icon className={classes.mainMenuButtonIcon}/>}
             </Button>
           </CustomNavLink>
@@ -192,12 +192,12 @@ class AppFrame extends React.Component {
     const {classes} = this.props;
     return (
       <div className={classes.ifNotTooSmallAndInlined}>
-        {items.map(({name, Icon, route}, idx) => (
+        {items.map(({label, Icon, route}, idx) => (
           <CustomNavLink to={route} key={idx}>
             <Fab size="medium"
                  color="primary"
                  classes={{primary: classes.primaryDark}}
-                 aria-label={name}
+                 aria-label={label}
                  className={classes.mobileIconContainer}>
               {<Icon className={classNames(classes.mobileIcon, classes.contrastTextSecondary)}/>}
             </Fab>
@@ -255,16 +255,12 @@ class AppFrame extends React.Component {
         <IconWithMenu Icon={InfoIcon}
                       iconProps={{color: "inherit", className: classes.mobileIcon}}
                       fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
-                      menuItems={[
-                        {label: "Mes informations", route: APP_ROUTES.userCurrent},
-                        {label: "Conditions d'utilisations", route: APP_ROUTES.aboutConditions},
-                        {label: "Le projet REX-DRI", route: APP_ROUTES.aboutProject}]}
-        />
+                      menuItems={infoMenuItems} />
+
         <IconWithMenu Icon={SettingsIcon}
                       iconProps={{color: "inherit", className: classes.mobileIcon}}
                       fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
-                      menuItems={[{label: "Thème", route: APP_ROUTES.themeSettings}]}
-        />
+                      menuItems={settingsMenuItems} />
       </div>
     );
   }

frontend/src/components/app/DrawerMenu.js

@@ -3,28 +3,47 @@ import PropTypes from "prop-types";
 import Drawer from "@material-ui/core/Drawer";
 import List from "@material-ui/core/List";
 import Divider from "@material-ui/core/Divider";
-import {mainMenuHome, mainMenuItems, secondaryMenuItems, thirdMenuItems} from "./menuItems";
+import {infoMenuItems, mainMenuHome, mainMenuItems, secondaryMenuItems, settingsMenuItems,} from "./menuItems";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 import CustomNavLink from "../common/CustomNavLink";
+import SettingsIcon from "@material-ui/icons/Settings";
+import InfoIcon from "@material-ui/icons/Info";
 
 class DrawerMenu extends React.Component {
 
 
-  toListItem(items) {
-    return items.map(({name, route, Icon}, idx) => (
+  toListItem(items, inset = false) {
+    return items.map(({label, route, Icon}, idx) => (
       <CustomNavLink key={idx} to={route} onClick={() => this.props.closeDrawer()}>
         <ListItem button onClick={() => this.props.closeDrawer()}>
-          <ListItemIcon>
-            <Icon/>
-          </ListItemIcon>
-          <ListItemText primary={name}/>
+          {
+            Icon !== null ?
+              <ListItemIcon>
+                <Icon/>
+              </ListItemIcon>
+              :
+              <></>
+          }
+          <ListItemText primary={label} inset={inset}/>
         </ListItem>
       </CustomNavLink>
     ));
   }
 
+  toListItemBasic(label, Icon) {
+    return (
+      <ListItem>
+        <ListItemIcon>
+          <Icon/>
+        </ListItemIcon>
+        <ListItemText primary={label}/>
+      </ListItem>
+    );
+  }
+
+
   render() {
     return (
       <div>
@@ -35,7 +54,17 @@ class DrawerMenu extends React.Component {
           <Divider/>
           <List>{this.toListItem(secondaryMenuItems)}</List>
           <Divider/>
-          <List>{this.toListItem(thirdMenuItems)}</List>
+          <List>
+            {this.toListItemBasic(<em>Informations</em>, InfoIcon)}
+            <Divider variant="inset"/>
+            {this.toListItem(infoMenuItems, true)}
+          </List>
+          <Divider/>
+          <List>
+            {this.toListItemBasic(<em>Paramètres</em>, SettingsIcon)}
+            <Divider variant="inset"/>
+            {this.toListItem(settingsMenuItems, true)}
+          </List>
         </Drawer>
       </div>
     );

frontend/src/components/app/menuItems.js

 import MapIcon from "@material-ui/icons/Map";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
-import PersonIcon from "@material-ui/icons/Person";
 import HomeIcon from "@material-ui/icons/Home";
 import SearchIcon from "@material-ui/icons/Search";
-import SettingsIcon from "@material-ui/icons/Settings";
 import AssignmentIcon from "@material-ui/icons/Assignment";
 import {APP_ROUTES} from "../../config/appRoutes";
 
-function item(name, route, Icon) {
-  return {type: "item", name, route, Icon};
+function item(label, route, Icon, hardRedirect = false) {
+  return {label, route, Icon, hardRedirect};
 }
 
 export const mainMenuItems = [
@@ -23,7 +21,13 @@ export const secondaryMenuItems = [
   item("Mes listes", APP_ROUTES.lists, AssignmentIcon),
 ];
 
-export const thirdMenuItems = [
-  item("Mes informations", APP_ROUTES.userCurrent, PersonIcon),
-  item("Réglage du thème", APP_ROUTES.themeSettings, SettingsIcon),
+export const infoMenuItems = [
+  item("Mes informations", APP_ROUTES.userCurrent, null),
+  item("Conditions d'utilisations", APP_ROUTES.aboutConditions, null),
+  item("Le projet REX-DRI", APP_ROUTES.aboutProject, null),
 ];
+
+export const settingsMenuItems = [
+  item("Personnalisation du thème", APP_ROUTES.themeSettings, null),
+  item("Se déconnecter", APP_ROUTES.logout, null, true),
+];
\ No newline at end of file

frontend/src/components/common/IconWithMenu.js

@@ -38,8 +38,22 @@ class IconWithMenu extends React.Component {
               open={open}
               onClose={this.handleCloseMenu}>
           {this.props.menuItems.map(
-            ({label, route}, idx) => <MenuItem key={idx} component={NavLink}
-                                               to={route} onClick={this.handleCloseMenu}>{label}</MenuItem>)}
+            ({label, route, hardRedirect}, idx) =>
+              hardRedirect ?
+                <MenuItem key={idx}
+                          component="a"
+                          href={route}
+                          onClick={this.handleCloseMenu}>
+                  {label}
+                </MenuItem>
+                :
+                <MenuItem key={idx}
+                          component={NavLink}
+                          to={route}
+                          onClick={this.handleCloseMenu}>
+                  {label}
+                </MenuItem>
+          )}
         </Menu>
       </>
     );

frontend/src/components/university/modules/common/PendingModeration.js

@@ -82,7 +82,7 @@ class PendingModeration extends CustomComponentForAPI {
     return (
       <>
         <Button
-          variant='outlined'
+          variant="contained"
           color="primary"
           className={this.props.classes.editButton}
           onClick={() => this.props.editFromPendingModeration(rawModelData)}

frontend/src/config/appRoutes.js

@@ -17,7 +17,8 @@ const base = "/app/",
   themeSettings = settings + "theme/",
   about = base + "about/",
   aboutProject = about + "project/",
-  aboutConditions = about + "conditions/";
+  aboutConditions = about + "conditions/",
+  logout = "/user/logout";
 
 export const APP_ROUTES = {
   base,
@@ -39,4 +40,5 @@ export const APP_ROUTES = {
   about,
   aboutProject,
   aboutConditions,
+  logout,
 };