@@ -0,0 +1,30 @@ 
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
+import useStyles from './styles';
+
+interface Props {
+  Icon: JSX.Element;
+  title: string;
+  href: string;
+}
+
+const DrawerMenuItem = ({Icon, title, href}: Props) => {
+  const classes = useStyles();
+  return (
+    <Box className={classes.drawerMenuItem}>
+      <Button className={classes.button} color="primary" variant='contained' href={href}>
+        {Icon}
+      </Button>
+      <Typography
+        variant="overline"
+        color="inherit"
+        className={classes.drawerText}
+      >
+        {title}
+      </Typography>
+    </Box>
+  );
+};
+
+export default DrawerMenuItem;

@@ -0,0 +1,42 @@ 
+import Drawer from '@material-ui/core/Drawer';
+import Icon from '@material-ui/core/Icon';
+import {useTranslation} from 'react-i18next';
+import { useRouter } from 'next/router';
+import DrawerMenuItem from './DrawerMenuItem';
+import useStyles from './styles';
+import useBannerStore from '../../stores/useBannerStore';
+
+const DrawerMenu = () => {
+  const {t} = useTranslation();
+  const bannerOffset = useBannerStore(s => s.offset)
+  const classes = useStyles({bannerOffset});
+  const {query: {uuid}} = useRouter();
+
+  return (
+    <Drawer variant="permanent" className={classes.drawer}>
+      <DrawerMenuItem
+        title={t('drawer.travels')}
+        href={`/e/${uuid}`}
+        Icon={
+          <Icon>directions_car</Icon>
+        }
+      />
+      <DrawerMenuItem
+        title={t('drawer.waitingList')}
+        href={`/e/${uuid}`}
+        Icon={
+          <Icon>group</Icon>
+        }
+      />
+      <DrawerMenuItem
+        title={t('drawer.information')}
+        href={`/e/${uuid}`}
+        Icon={
+          <Icon>info</Icon>
+        }
+      />
+    </Drawer>
+  );
+};
+
+export default DrawerMenu;

@@ -0,0 +1,61 @@ 
+import {makeStyles} from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  drawer: ({bannerOffset}) => ({
+    width: '85px',
+    flexShrink: 0,
+    '& .MuiDrawer-paper': {
+      paddingTop: theme.mixins.toolbar.minHeight + bannerOffset,
+      zIndex: theme.zIndex.appBar - 1,
+      width: '84px',
+      display: 'flex',
+      flexDirection: 'column',
+      boxSizing: 'border-box',
+      left: 0,
+      top: 0,
+      backgroundColor: theme.overrides.MuiAppBar.colorPrimary.backgroundColor,
+      color: theme.overrides.MuiAppBar.colorPrimary.color,
+
+      [theme.breakpoints.down('sm')]: {
+        bottom: 0,
+        top: 'auto',
+        paddingTop: theme.spacing(0.5),
+        paddingBottom: theme.spacing(2.5),
+        height: '80px',
+        width: '100%',
+        flexDirection: 'row',
+      },
+    },
+  }),
+  button: {
+    width: '100%',
+    height: '100%',
+    minWidth: 0,
+    padding: 0,
+    borderRadius: '50%',
+  },
+  drawerMenuItem: {
+    margin: `${theme.spacing(3)}px auto`,
+    width: `calc(${theme.mixins.toolbar.minHeight}px - 16px)`,
+    height: `calc(${theme.mixins.toolbar.minHeight}px - 16px)`,
+    textAlign: 'center',
+
+    [theme.breakpoints.down('sm')]: {
+      margin: '8px auto',
+    },
+  },
+  drawerText: {
+    paddingTop: theme.spacing(1),
+    fontSize: '0.7em',
+    lineHeight: '1.1em',
+    display: 'flex',
+    justifyContent: 'center',
+    textTransform: 'none',
+
+    [theme.breakpoints.down('sm')]: {
+      whiteSpace: 'nowrap',
+    },
+  },
+}));
+
+export default useStyles;

@@ -21,11 +21,6 @@ import EventDetails from '../EventDetails';
 import useBannerStore from '../../stores/useBannerStore';
 import Banner from '../../components/Banner';
 
-let persistedLastAnnouncementSeen = '';
-if (typeof localStorage !== 'undefined') {
-  persistedLastAnnouncementSeen = localStorage.getItem('lastAnnouncementSeen');
-}
-
 const EventBar = ({event, onAdd, onSave, onShare}) => {
   const {t} = useTranslation();
   const router = useRouter();
@@ -43,7 +38,9 @@ const bannerHeight = useBannerStore(s => s.height);
   const classes = useStyles({detailsOpen, bannerOffset, bannerHeight});
   const announcement = settings?.announcement || '';
   const [lastAnnouncementSeen, setLastAnnouncementSeen] = useState(
-    persistedLastAnnouncementSeen
+    typeof localStorage !== 'undefined'
+      ? localStorage.getItem('lastAnnouncementSeen')
+      : ''
   );
   const showAnnouncement =
     announcement !== '' && announcement !== lastAnnouncementSeen;
@@ -273,8 +270,7 @@ overflow: 'hidden',
     minHeight: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
     overflowY: detailsOpen ? 'scroll' : 'hidden',
     transition: 'height 0.3s ease',
-    zIndex: theme.zIndex.appBar,
-    marginTop: bannerOffset - bannerHeight ,
+    marginTop: bannerOffset - bannerHeight,
   }),
   logo: {
     marginRight: theme.spacing(2),

@@ -14,11 +14,6 @@ import useBannerStore from '../../stores/useBannerStore';
 import Banner from '../../components/Banner';
 import useSettings from '../../hooks/useSettings';
 
-let persistedLastAnnouncementSeen = '';
-if (typeof localStorage !== 'undefined') {
-  persistedLastAnnouncementSeen = localStorage.getItem('lastAnnouncementSeen');
-}
-
 const GenericToolbar = ({
   title,
   actions = [],
@@ -35,10 +30,12 @@ const bannerHeight = useBannerStore(s => s.height);
   const classes = useStyles({bannerOffset, bannerHeight});
   const {user} = useProfile();
   const settings = useSettings();
-  const announcement = settings?.announcement || '';
   const [lastAnnouncementSeen, setLastAnnouncementSeen] = useState(
-    persistedLastAnnouncementSeen
+    typeof localStorage !== 'undefined'
+      ? localStorage.getItem('lastAnnouncementSeen')
+      : ''
   );
+  const announcement = settings?.announcement || '';
   const showAnnouncement =
     announcement !== '' && announcement !== lastAnnouncementSeen;
 
@@ -121,7 +118,6 @@ const useStyles = makeStyles(theme => ({
   appbar: ({bannerHeight, bannerOffset}) => ({
     minHeight: theme.mixins.toolbar.minHeight,
     transition: 'height 0.3s ease',
-    zIndex: theme.zIndex.appBar,
     display: 'block',
     marginTop: bannerOffset - bannerHeight,
   }),

@@ -15,11 +15,11 @@ const IconLanguageSelection = ({
   language,
   setLanguage,
   onConfirmCallback,
-}: LanguageSelectionComponentProps) => {
+  displayMenu
+}: LanguageSelectionComponentProps & {displayMenu?: boolean}) => {
   const {t} = useTranslation();
   const [anchorEl, setAnchorEl] = useState(null);
   const bannerHeight = useBannerStore(s => s.height);
-  const bannerOffset = useBannerStore(s => s.offset);
 
   const handleClick = event => {
     setAnchorEl(event.currentTarget);
@@ -34,7 +34,13 @@ };
 
   return (
     <>
-      <Box position="absolute" top={bannerOffset - bannerHeight} right={0} zIndex={1050} p={1}>
+      <Box
+        position="absolute"
+        top={displayMenu ? 56 : 0 + bannerHeight}
+        right={0}
+        zIndex={1050}
+        p={1}
+      >
         <IconButton
           color="primary"
           aria-label="Languages"

@@ -20,7 +20,7 @@ LanguageSelectionComponent: (
       args: LanguageSelectionComponentProps
     ) => JSX.Element
   ) => 
-  () => {
+  (props) => {
     const language = useLangStore(s => s.language);
     const setLanguage = useLangStore(s => s.setLanguage);
     const {profile, connected} = useProfile();
@@ -47,6 +47,7 @@ <LanguageSelectionComponent
         language={language}
         setLanguage={setLanguage}
         onConfirmCallback={onConfirmCallback}
+        {...props}
       />
     );
   };

@@ -8,13 +8,11 @@ import {useTranslation} from 'react-i18next';
 import EditPassword from './EditPassword';
 import ProfileField from './ProfileField';
 import useToastStore from '../../stores/useToastStore';
-import useBannerStore from '../../stores/useBannerStore';
 
 const Profile = ({profile, updateProfile, logout}) => {
   const {t} = useTranslation();
   const addToast = useToastStore(s => s.addToast);
-  const bannerHeight = useBannerStore(s => s.height);
-  const classes = useStyles({bannerHeight});
+  const classes = useStyles();
   const [isEditing, setIsEditing] = useState(false);
   const [isEditingPassword, setIsEditingPassword] = useState(false);
   const [firstName, setFirstName] = useState(profile.firstName);
@@ -148,9 +146,6 @@ );
 };
 
 const useStyles = makeStyles(theme => ({
-  container: ({bannerHeight}) => ({
-    marginTop: bannerHeight + theme.mixins.toolbar.minHeight,
-  }),
   actions: {
     marginTop: theme.spacing(2),
     justifyContent: 'flex-end',

@@ -6,7 +6,7 @@ accessibility: true,
   dots: true,
   appendDots: dots => <Dots>{dots}</Dots>,
   nextArrow: <CustomArrow right={0} />,
-  prevArrow: <CustomArrow left={0} />,
+  prevArrow: <CustomArrow left={80} />,
   arrows: true,
   infinite: false,
   speed: 500,

@@ -158,7 +158,7 @@ 
 const useStyles = makeStyles(theme => ({
   container: {
     minHeight: '100vh',
-    paddingLeft: theme.spacing(6),
+    paddingLeft: `calc(${theme.spacing(6)}px + 80px)`,
     paddingRight: theme.spacing(6),
     [theme.breakpoints.down('sm')]: {
       paddingLeft: theme.spacing(),

@@ -5,7 +5,7 @@ import useBannerStore from '../stores/useBannerStore';
 
 const CenteredLayout = ({children, ...props}) => {
   const bannerHeight = useBannerStore(s => s.height);
-  const bannerOffset = useBannerStore(s => s.offset)
+  const bannerOffset = useBannerStore(s => s.offset);
   const classes = useStyles({bannerHeight, bannerOffset});
 
   return (
@@ -15,10 +15,11 @@ </DefaultLayout>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   layout: ({bannerHeight, bannerOffset}) => ({
     minHeight: `calc(100vh - ${bannerHeight})`,
-    paddingTop: theme.mixins.toolbar.minHeight + bannerOffset - bannerHeight,
+    paddingTop:
+      theme.mixins.toolbar.minHeight * 2 + bannerOffset,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',

@@ -1,4 +1,7 @@ 
 {
+  "drawer.information": "Information",
+  "drawer.travels": "Travels",
+  "drawer.waitingList": "Waiting list",
   "generic": {
     "me": "Me",
     "loading": "Loading ...",

@@ -1,4 +1,7 @@ 
 {
+  "drawer.information": "Information",
+  "drawer.travels": "Trajets",
+  "drawer.waitingList": "Liste d'attente",
   "generic": {
     "me": "Moi",
     "loading": "Chargement...",

@@ -27,6 +27,7 @@ import useProfile from '../../hooks/useProfile';
 import Fab from '../../containers/Fab';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import useBannerStore from '../../stores/useBannerStore';
+import DrawerMenu from '../../containers/DrawerMenu';
 
 const POLL_INTERVAL = 10000;
 
@@ -44,7 +45,7 @@ };
 
 const Event = (props: Props) => {
   const {eventUUID} = props;
-  const bannerOffset = useBannerStore(s => s.offset)
+  const bannerOffset = useBannerStore(s => s.offset);
   const classes = useStyles({bannerOffset});
   const theme = useTheme();
   const {t} = useTranslation();
@@ -99,11 +100,8 @@ pageTitle={t('event.title', {title: event.name})}
       menuTitle={t('event.title', {title: event.name})}
       displayMenu={false}
     >
-      <EventBar
-        event={event}
-        onAdd={setIsAddToMyEvent}
-        onSave={onSave}
-      />
+      <EventBar event={event} onAdd={setIsAddToMyEvent} onSave={onSave} />
+      <DrawerMenu />
       <TravelColumns toggle={addTravelClickHandler} />
       <Box className={classes.bottomRight}>
         <Fab
@@ -159,7 +157,7 @@ };
 }
 
 const useStyles = makeStyles(theme => ({
-  layout:  ({bannerOffset}) => ({
+  layout: ({bannerOffset}) => ({
     paddingTop: theme.mixins.toolbar.minHeight + bannerOffset,
   }),
   bottomRight: {

@@ -52,7 +52,7 @@ <Paper className={null}>
         <Logo />
         <CreateEvent />
       </Paper>
-      <LanguagesIcon/>
+      <LanguagesIcon displayMenu={!!profile}/>
     </Layout>
   );
 };