@@ -1,5 +1,5 @@ 
 {
 	"latest": "3.6.10",
-	"lastUpdateCheck": 1656335816122,
-	"lastNotification": 1656335816118
+	"lastUpdateCheck": 1657606331231,
+	"lastNotification": 1657606331226
 }

@@ -1,10 +1,7 @@ 
 import {Icon} from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import {makeStyles} from '@material-ui/core/styles';
-import {useEffect} from 'react';
-import {useElementSize, useEventListener} from 'usehooks-ts';
 import Markdown from '../Markdown';
-import useBannerStore from '../../stores/useBannerStore';
 
 interface Props {
   message: string;
@@ -15,14 +12,11 @@ 
 const Banner = (props: Props) => {
   const {message, open, onClear} = props;
   const classes = useStyles();
-  const [bannerRef, {height}] = useElementSize();
-  const setBannerHeight = useBannerStore(s => s.setBannerHeight);
-  useEffect(() => setBannerHeight({height}), [height]);
 
   if (!open) return null;
 
   return (
-    <div className={classes.banner} ref={bannerRef}>
+    <div className={classes.banner}>
       <Markdown className={classes.htmlReset}>{message}</Markdown>
       <Button
         className={classes.clear}

@@ -1,21 +1,20 @@ 
 import Drawer from '@material-ui/core/Drawer';
 import Icon from '@material-ui/core/Icon';
 import {useTranslation} from 'react-i18next';
-import router, {useRouter} from 'next/router';
+import {useRouter} from 'next/router';
 import DrawerMenuItem from './DrawerMenuItem';
 import useStyles from './styles';
-import useBannerStore from '../../stores/useBannerStore';
 import useEventStore from '../../stores/useEventStore';
 
 const DrawerMenu = () => {
   const {t} = useTranslation();
-  const bannerOffset = useBannerStore(s => s.offset);
   const areDetailsOpened = useEventStore(s => s.areDetailsOpened);
   const setAreDetailsOpened = useEventStore(s => s.setAreDetailsOpened);
-  const classes = useStyles({bannerOffset});
+  const classes = useStyles();
+  const router = useRouter();
   const {
     query: {uuid},
-  } = useRouter();
+  } = router;
 
   return (
     <Drawer variant="permanent" className={classes.drawer}>

@@ -1,11 +1,15 @@ 
 import {makeStyles} from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
-  drawer: ({bannerOffset}) => ({
+  drawer: () => ({
     width: '85px',
-    flexShrink: 0,
+
+    [theme.breakpoints.down('sm')]: {
+      width: '100%',
+    },
+
     '& .MuiDrawer-paper': {
-      paddingTop: theme.mixins.toolbar.minHeight + bannerOffset,
+      paddingTop: theme.mixins.toolbar.minHeight,
       zIndex: theme.zIndex.appBar - 1,
       width: '84px',
       display: 'flex',
@@ -16,6 +20,7 @@ top: 0,
       backgroundColor: theme.overrides.MuiAppBar.colorPrimary.backgroundColor,
       color: theme.overrides.MuiAppBar.colorPrimary.color,
       overflowX: 'hidden',
+      position: 'static',
 
       [theme.breakpoints.down('sm')]: {
         bottom: 0,

@@ -13,11 +13,8 @@ import {useTranslation} from 'react-i18next';
 import useAuthStore from '../../stores/useAuthStore';
 import useEventStore from '../../stores/useEventStore';
 import useProfile from '../../hooks/useProfile';
-import useSettings from '../../hooks/useSettings';
 import GenericMenu from '../GenericMenu';
 import EventDetails from '../EventDetails';
-import useBannerStore from '../../stores/useBannerStore';
-import Banner from '../../components/Banner';
 
 const EventBar = ({event, onAdd, onSave}) => {
   const {t} = useTranslation();
@@ -29,25 +26,7 @@ const setIsEditing = useEventStore(s => s.setIsEditing);
   const setAreDetailsOpened = useEventStore(s => s.setAreDetailsOpened);
   const token = useAuthStore(s => s.token);
   const {user} = useProfile();
-  const settings = useSettings();
-  const bannerOffset = useBannerStore(s => s.offset);
-  const bannerHeight = useBannerStore(s => s.height);
-  const classes = useStyles({areDetailsOpened, bannerOffset, bannerHeight});
-  const announcement = settings?.announcement || '';
-  const [lastAnnouncementSeen, setLastAnnouncementSeen] = useState(
-    typeof localStorage !== 'undefined'
-      ? localStorage.getItem('lastAnnouncementSeen')
-      : ''
-  );
-  const showAnnouncement =
-    announcement !== '' && announcement !== lastAnnouncementSeen;
-
-  const onBannerClear = () => {
-    if (typeof announcement != 'undefined') {
-      localStorage.setItem('lastAnnouncementSeen', String(announcement));
-    }
-    setLastAnnouncementSeen(announcement);
-  };
+  const classes = useStyles({areDetailsOpened});
 
   const signUp = () =>
     router.push({
@@ -112,17 +91,12 @@ 
   return (
     <AppBar
       className={classes.appbar}
-      position="fixed"
       color="primary"
+      position="static"
       id={
         (isEditing && 'EditEvent') || (areDetailsOpened && 'Details') || 'Menu'
       }
     >
-      <Banner
-        message={announcement}
-        open={showAnnouncement}
-        onClear={onBannerClear}
-      />
       <Toolbar>
         <div className={classes.name}>
           <Link href={appLink}>
@@ -217,12 +191,11 @@ );
 };
 
 const useStyles = makeStyles(theme => ({
-  appbar: ({detailsOpen, bannerOffset, bannerHeight}) => ({
+  appbar: ({detailsOpen}) => ({
     overflow: 'hidden',
     minHeight: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
     overflowY: detailsOpen ? 'scroll' : 'hidden',
     transition: 'height 0.3s ease',
-    marginTop: bannerOffset - bannerHeight,
   }),
   logo: {
     marginRight: theme.spacing(2),

@@ -11,7 +11,6 @@ import useEventStore from '../../stores/useEventStore';
 import {caroster} from '../../theme';
 import CopyLink from '../../components/CopyLink';
 import useToastStore from '../../stores/useToastStore';
-import useBannerStore from '../../stores/useBannerStore';
 
 const EventDetails = () => {
   const {t} = useTranslation();
@@ -21,8 +20,7 @@ const setEventUpdate = useEventStore(s => s.setEventUpdate);
   const isEditing = useEventStore(s => s.isEditing);
   const shareInput = useRef(null);
   const idPrefix = isEditing ? 'EditEvent' : 'Event';
-  const bannerOffset = useBannerStore(s => s.offset);
-  const classes = useStyles({bannerOffset});
+  const classes = useStyles();
 
   if (!event) return null;
 
@@ -161,18 +159,14 @@ },
 });
 
 const useStyles = makeStyles(theme => ({
-  container: ({bannerOffset}) => ({
+  container: () => ({
     padding: theme.spacing(2, 9),
     marginBottom: theme.spacing(12),
-    minHeight: `calc(100vh - ${
-      theme.mixins.toolbar.minHeight + bannerOffset
-    }px)`,
+    minHeight: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
 
     [theme.breakpoints.down('xs')]: {
       padding: theme.spacing(2),
-      minHeight: `calc(100vh - ${
-        theme.mixins.toolbar.minHeight + bannerOffset + 56
-      }px)`,
+      minHeight: `calc(100vh - ${theme.mixins.toolbar.minHeight + 56}px)`,
     },
   }),
   section: {

@@ -10,9 +10,6 @@ import Icon from '@material-ui/core/Icon';
 import useProfile from '../../hooks/useProfile';
 import GenericMenu from '../GenericMenu';
 import {ActionType} from '../GenericMenu/Action';
-import useBannerStore from '../../stores/useBannerStore';
-import Banner from '../../components/Banner';
-import useSettings from '../../hooks/useSettings';
 
 const GenericToolbar = ({
   title,
@@ -25,27 +22,8 @@ goBack: () => void | null;
 }) => {
   const router = useRouter();
   const [anchorEl, setAnchorEl] = useState(null);
-  const bannerOffset = useBannerStore(s => s.offset);
-  const bannerHeight = useBannerStore(s => s.height);
-  const classes = useStyles({bannerOffset, bannerHeight});
+  const classes = useStyles();
   const {user} = useProfile();
-  const settings = useSettings();
-  const [lastAnnouncementSeen, setLastAnnouncementSeen] = useState(
-    typeof localStorage !== 'undefined'
-      ? localStorage.getItem('lastAnnouncementSeen')
-      : ''
-  );
-  const announcement = settings?.announcement || '';
-  const showAnnouncement =
-    announcement !== '' &&
-    announcement !== lastAnnouncementSeen;
-
-  const onBannerClear = () => {
-    if (typeof announcement != 'undefined') {
-      localStorage.setItem('lastAnnouncementSeen', String(announcement));
-    }
-    setLastAnnouncementSeen(announcement);
-  };
 
   const userInfos = user
     ? [{label: user.username, id: 'Email'}, {divider: true}]
@@ -57,16 +35,11 @@ }, []);
 
   return (
     <AppBar
-      position="fixed"
+      position="static"
       color="primary"
       className={classes.appbar}
       id="Menu"
     >
-      <Banner
-        message={announcement}
-        open={showAnnouncement}
-        onClear={onBannerClear}
-      />
       <Toolbar>
         {goBack && (
           <IconButton
@@ -116,11 +89,10 @@ );
 };
 
 const useStyles = makeStyles(theme => ({
-  appbar: ({bannerHeight, bannerOffset}) => ({
+  appbar: () => ({
     minHeight: theme.mixins.toolbar.minHeight,
     transition: 'height 0.3s ease',
     display: 'block',
-    marginTop: bannerOffset - bannerHeight,
   }),
   name: {
     flexGrow: 1,

@@ -9,17 +9,15 @@ import {Enum_Userspermissionsuser_Lang} from '../../generated/graphql';
 import withLanguagesSelection, {
   LanguageSelectionComponentProps,
 } from './withLanguagesSelection';
-import useBannerStore from '../../stores/useBannerStore';
 
 const IconLanguageSelection = ({
   language,
   setLanguage,
   onConfirmCallback,
-  displayMenu
+  displayMenu,
 }: LanguageSelectionComponentProps & {displayMenu?: boolean}) => {
   const {t} = useTranslation();
   const [anchorEl, setAnchorEl] = useState(null);
-  const bannerHeight = useBannerStore(s => s.height);
 
   const handleClick = event => {
     setAnchorEl(event.currentTarget);
@@ -36,7 +34,7 @@ return (
     <>
       <Box
         position="absolute"
-        top={displayMenu ? 56 : 0 + bannerHeight}
+        top={displayMenu ? 56 : 0}
         right={0}
         zIndex={1050}
         p={1}

@@ -11,6 +11,8 @@ title: string;
   image?: boolean;
 }
 
+const url = typeof window !== 'undefined' ? window.location.href : '';
+
 const NoCar = ({eventName, title, image}: Props) => {
   const classes = useStyles({image});
   const {t} = useTranslation();
@@ -26,7 +28,7 @@ color="primary"
         className={classes.share}
         buttonText={t('event.fields.share')}
         title={`Caroster ${eventName}`}
-        url={`${window.location.href}`}
+        url={`${url}`}
         onShare={() => addToast(t('event.actions.copied'))}
       />
     </Box>

@@ -76,7 +76,10 @@ <Travel
                 travel={travel}
                 {...props}
                 canAddSelf={canAddSelf}
-                getAddPassengerFunction={(addSelf: boolean) => () => addSelf ? addSelfToTravel(travel): toggleNewPassengerToTravel({travel})}
+                getAddPassengerFunction={(addSelf: boolean) => () =>
+                  addSelf
+                    ? addSelfToTravel(travel)
+                    : toggleNewPassengerToTravel({travel})}
               />
             </Container>
           ))}
@@ -110,7 +113,6 @@ };
 
 const useStyles = makeStyles(theme => ({
   container: {
-    minHeight: '100vh',
     paddingLeft: `calc(${theme.spacing(6)}px + 80px)`,
     paddingRight: theme.spacing(6),
     [theme.breakpoints.down('sm')]: {

@@ -17,7 +17,6 @@ import AssignButton from './AssignButton';
 import TravelDialog from './TravelDialog';
 import Button from '@material-ui/core/Button';
 import router from 'next/dist/client/router';
-import useBannerStore from '../../stores/useBannerStore';
 import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 
@@ -30,8 +29,7 @@ const WaitingList = ({
   getToggleNewPassengerDialogFunction,
   canAddSelf,
 }: Props) => {
-  const bannerOffset = useBannerStore(s => s.offset);
-  const classes = useStyles({bannerOffset});
+  const classes = useStyles();
   const {t} = useTranslation();
   const clearToast = useToastStore(s => s.clearToast);
   const event = useEventStore(s => s.event);

@@ -1,29 +1,15 @@ 
-import {makeStyles} from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
+import Box from '@material-ui/core/Box';
 import DefaultLayout from './Default';
-import useBannerStore from '../stores/useBannerStore';
 
 const CenteredLayout = ({children, ...props}) => {
-  const bannerHeight = useBannerStore(s => s.height);
-  const bannerOffset = useBannerStore(s => s.offset);
-  const classes = useStyles({bannerHeight, bannerOffset});
-
   return (
-    <DefaultLayout className={classes.layout} {...props}>
-      <Container maxWidth="sm">{children}</Container>
+    <DefaultLayout {...props}>
+      <Box pt={12}>
+        <Container maxWidth="sm">{children}</Container>
+      </Box>
     </DefaultLayout>
   );
 };
-
-const useStyles = makeStyles(theme => ({
-  layout: ({bannerHeight, bannerOffset}) => ({
-    minHeight: `calc(100vh - ${bannerHeight})`,
-    paddingTop:
-      theme.mixins.toolbar.minHeight * 2 + bannerOffset,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }),
-}));
 
 export default CenteredLayout;

@@ -1,11 +1,18 @@ 
-import {ReactNode} from 'react';
+import {ReactNode, useState} from 'react';
 import {Helmet} from 'react-helmet';
 import useGTM from '../hooks/useGTM';
 import GenericToolbar from '../containers/GenericToolbar';
 import {ActionType} from '../containers/GenericMenu/Action';
+import Box from '@material-ui/core/Box';
+import Banner from '../components/Banner';
+import Headroom from 'react-headroom';
+import useSettings from '../hooks/useSettings';
+
+const ANNOUNCEMENT_STORAGE_KEY = 'lastAnnouncementSeen';
 
 interface Props {
   children: ReactNode;
+  Topbar?: ReactNode;
   className?: string;
   menuTitle?: string;
   menuActions?: Array<ActionType>;
@@ -15,8 +22,10 @@ goBack?: () => void;
 }
 
 const DefaultLayout = (props: Props) => {
+  useGTM();
   const {
     children,
+    Topbar = null,
     className,
     pageTitle = undefined,
     displayMenu = true,
@@ -24,24 +33,49 @@ menuTitle = 'Caroster',
     menuActions,
     goBack = null,
   } = props;
+  const {announcement = ''} = useSettings() || {};
+  const [lastAnnouncementSeen, setLastAnnouncementSeen] = useState(
+    getStoredValue(ANNOUNCEMENT_STORAGE_KEY)
+  );
+  const showBanner = !!announcement && announcement !== lastAnnouncementSeen;
 
-  useGTM();
+  const onBannerClear = () => {
+    setStoredValue(ANNOUNCEMENT_STORAGE_KEY, `${announcement}`);
+    setLastAnnouncementSeen(announcement);
+  };
 
   return (
     <div className={className}>
       <Helmet>
         <title>{pageTitle || menuTitle}</title>
       </Helmet>
-      {displayMenu && (menuTitle || menuActions) && (
-        <GenericToolbar
-          title={menuTitle}
-          actions={menuActions}
-          goBack={goBack}
-        />
-      )}
-      {children}
+      <Box display="flex" flexDirection="column" height="100vh" width="100%">
+        <Headroom>
+          <Banner
+            message={announcement}
+            open={showBanner}
+            onClear={onBannerClear}
+          />
+          {displayMenu && (menuTitle || menuActions) && (
+            <GenericToolbar
+              title={menuTitle}
+              actions={menuActions}
+              goBack={goBack}
+            />
+          )}
+          {Topbar && <Topbar />}
+        </Headroom>
+        {children}
+      </Box>
     </div>
   );
 };
+
+const getStoredValue = (storageKey: string) =>
+  typeof localStorage !== 'undefined' ? localStorage.getItem(storageKey) : '';
+
+const setStoredValue = (storageKey: string, value: string) =>
+  typeof localStorage !== 'undefined' &&
+  localStorage.setItem(storageKey, value);
 
 export default DefaultLayout;

@@ -1,5 +1,6 @@ 
 import {PropsWithChildren, useEffect, useState} from 'react';
-import {makeStyles} from '@material-ui/core/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import {useTheme} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
 import ErrorPage from '../pages/_error';
 import useEventStore from '../stores/useEventStore';
@@ -11,10 +12,10 @@ useEventByUuidQuery,
   useUpdateEventMutation,
   EditEventInput,
 } from '../generated/graphql';
-import useBannerStore from '../stores/useBannerStore';
 import DrawerMenu from '../containers/DrawerMenu';
 import AddToMyEventDialog from '../containers/AddToMyEventDialog';
 import useToastStore from '../stores/useToastStore';
+import Box from '@material-ui/core/Box';
 
 const POLL_INTERVAL = 10000;
 
@@ -27,9 +28,9 @@ }
 
 const EventLayout = (props: PropsWithChildren<Props>) => {
   const {eventUUID, Tab} = props;
-  const bannerOffset = useBannerStore(s => s.offset);
-  const classes = useStyles({bannerOffset});
   const {t} = useTranslation();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const addToast = useToastStore(s => s.addToast);
   const setEvent = useEventStore(s => s.setEvent);
   const eventUpdate = useEventStore(s => s.event);
@@ -64,14 +65,24 @@ };
 
   return (
     <Layout
-      className={classes.layout}
       pageTitle={t('event.title', {title: event.name})}
       menuTitle={t('event.title', {title: event.name})}
       displayMenu={false}
+      Topbar={() => (
+        <EventBar event={event} onAdd={setIsAddToMyEvent} onSave={onSave} />
+      )}
     >
-      <EventBar event={event} onAdd={setIsAddToMyEvent} onSave={onSave} />
-      <DrawerMenu />
-      <Tab event={event} />
+      <Box
+        flex={1}
+        display="flex"
+        alignItems="stretch"
+        flexDirection={isMobile ? 'column-reverse' : 'row'}
+      >
+        <DrawerMenu />
+        <Box flex={1}>
+          <Tab event={event} />
+        </Box>
+      </Box>
       <AddToMyEventDialog
         event={event}
         open={isAddToMyEvent}
@@ -80,11 +91,5 @@ />
     </Layout>
   );
 };
-
-const useStyles = makeStyles(theme => ({
-  layout: ({bannerOffset}) => ({
-    paddingTop: theme.mixins.toolbar.minHeight + bannerOffset,
-  }),
-}));
 
 export default EventLayout;

@@ -1,2 +1,6 @@ 
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

@@ -25,12 +25,12 @@ "next": "^11.0.0",
     "next-pwa": "^5.2.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-headroom": "^3.2.0",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.11.0",
     "react-joyride": "^2.3.2",
     "react-slick": "^0.28.1",
     "typescript": "^4.1.3",
-    "usehooks-ts": "^2.5.3",
     "zustand": "^3.3.1"
   },
   "devDependencies": {

@@ -1,6 +1,5 @@ 
 import {useMemo, useEffect} from 'react';
 import {useRouter} from 'next/router';
-import {makeStyles} from '@material-ui/core/styles';
 import moment from 'moment';
 import {useTranslation} from 'react-i18next';
 import useAuthStore from '../stores/useAuthStore';
@@ -10,7 +9,6 @@ import DashboardEvents from '../containers/DashboardEvents';
 import DashboardEmpty from '../containers/DashboardEmpty';
 import Loading from '../containers/Loading';
 import Fab from '../containers/Fab';
-import useBannerStore from '../stores/useBannerStore';
 
 const Dashboard = () => {
   const {t} = useTranslation();
@@ -18,8 +16,6 @@ const router = useRouter();
   const isAuth = useAuthStore(s => !!s.token);
   const {profile, isReady} = useProfile();
   const {events} = profile || {};
-  const bannerOffset = useBannerStore(s => s.offset);
-  const classes = useStyles({bannerOffset});
 
   useEffect(() => {
     if (!isAuth) router.push('/');
@@ -69,11 +65,7 @@ </LayoutDefault>
     );
 
   return (
-    <LayoutDefault
-      className={classes.root}
-      menuActions={menuActions}
-      menuTitle={t('dashboard.title')}
-    >
+    <LayoutDefault menuActions={menuActions} menuTitle={t('dashboard.title')}>
       {events.length === 0 ? (
         <DashboardEmpty />
       ) : (
@@ -91,12 +83,5 @@ );
 };
 
 const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
-
-const useStyles = makeStyles(theme => ({
-  root: ({bannerOffset}) => ({
-    minHeight: '100vh',
-    paddingTop: theme.mixins.toolbar.minHeight + bannerOffset,
-  }),
-}));
 
 export default Dashboard;

@@ -1,7 +1,7 @@ 
 import {useState, useReducer, PropsWithChildren} from 'react';
 import {makeStyles} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
-import EventLayout, { TabComponent } from '../../../layouts/Event';
+import EventLayout, {TabComponent} from '../../../layouts/Event';
 import TravelColumns from '../../../containers/TravelColumns';
 import NewTravelDialog from '../../../containers/NewTravelDialog';
 import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
@@ -11,8 +11,10 @@ useFindUserVehiclesQuery,
 } from '../../../generated/graphql';
 import useProfile from '../../../hooks/useProfile';
 import Fab from '../../../containers/Fab';
-import useBannerStore from '../../../stores/useBannerStore';
-import {initializeApollo} from '../../../lib/apolloClient';
+import {
+  initializeApollo,
+  APOLLO_STATE_PROP_NAME,
+} from '../../../lib/apolloClient';
 
 interface Props {
   eventUUID: string;
@@ -23,11 +25,10 @@ return <EventLayout {...props} Tab={TravelsTab} />;
 };
 
 const TravelsTab: TabComponent = (props: {event}) => {
-  const bannerOffset = useBannerStore(s => s.offset);
-  const classes = useStyles({bannerOffset});
+  const classes = useStyles();
   const {t} = useTranslation();
   const {user} = useProfile();
-  const {data: {me: {profile: {vehicles = []} = {}} = {}} = {}, loading} =
+  const {data: {me: {profile: {vehicles = []} = {}} = {}} = {}} =
     useFindUserVehiclesQuery();
   const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
   const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
@@ -76,24 +77,29 @@ }));
 
 export async function getServerSideProps(ctx) {
   const {uuid} = ctx.query;
+  const {host = ''} = ctx.req.headers;
+
   const apolloClient = initializeApollo();
-  const {data = {}} = await apolloClient.query({
+  const {data: {eventByUUID: event = null} = {}} = await apolloClient.query({
     query: EventByUuidDocument,
     variables: {uuid},
   });
-  const {eventByUUID: event} = data;
-  const {host = ''} = ctx.req.headers;
 
-  return {
-    props: {
-      event,
-      eventUUID: uuid,
-      metas: {
-        title: event?.name || '',
-        url: `https://${host}${ctx.resolvedUrl}`,
+  try {
+    return {
+      props: {
+        [APOLLO_STATE_PROP_NAME]: apolloClient.cache.extract(),
+        eventUUID: uuid,
+        metas: {
+          title: event?.name || '',
+          url: `https://${host}${ctx.resolvedUrl}`,
+        },
       },
-    },
-  };
+    };
+  } catch (error) {
+    console.error(error);
+    return {props: {}};
+  }
 }
 
 export default Page;

@@ -7,7 +7,6 @@ import useProfile from '../hooks/useProfile';
 import Loading from '../containers/Loading';
 import Profile from '../containers/Profile';
 import Layout from '../layouts/Centered';
-import Banner from '../components/Banner';
 
 const ProfilePage = () => {
   const router = useRouter();

@@ -1,24 +0,0 @@ 
-import create from 'zustand';
-
-type BannerState = {
-  height: number;
-  offset: number;
-};
-
-type BannerStore = BannerState & {
-  setBannerHeight: (store: Partial<BannerState>) => void;
-  setBannerOffset: (store: Partial<BannerState>) => void;
-};
-
-const useBannerStore = create<BannerStore>(set => ({
-  height: 0,
-  setBannerHeight: store => {
-    set(s => ({...s, offset:store.height ,height: store.height}));
-  },
-  offset: 0,
-  setBannerOffset: store => {
-    set(s => ({offset: store.offset}));
-  }
-}));
-
-export default useBannerStore;

@@ -6106,6 +6106,11 @@ ripemd160 "^2.0.1"
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -6213,7 +6218,7 @@ integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6284,6 +6289,13 @@ integrity sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==
   dependencies:
     inherits "~2.0.3"
 
+raf@^3.3.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -6344,6 +6356,15 @@ is-lite "^0.8.1"
     popper.js "^1.16.0"
     react-proptype-conditional-require "^1.0.4"
     tree-changes "^0.5.1"
+
+react-headroom@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-headroom/-/react-headroom-3.2.0.tgz#ff14d01343b850d02bf30624bfa2c7ed60c75558"
+  integrity sha512-8rbXBKN187DnPg8lyJa5IKZx9rA1DbkvO4X0F6A6lSGr54fr7CHphF84fxwlPbX93Uqs9daFt9q0j3fhC7RTEg==
+  dependencies:
+    prop-types "^15.5.8"
+    raf "^3.3.0"
+    shallowequal "^1.1.0"
 
 react-helmet@^6.1.0:
   version "6.1.0"
@@ -6838,6 +6859,11 @@ integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
+
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
 shebang-command@^2.0.0:
   version "2.0.0"
@@ -7628,11 +7654,6 @@ resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
   integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==
   dependencies:
     object-assign "^4.1.1"
-
-usehooks-ts@^2.5.3:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.5.4.tgz#e28ce0c1140e3ae172d9b8d2fca07dff68a476ab"
-  integrity sha512-NG4XKLh7csTFFtUgtUuR72zlJ1Bpt4+nDAnKQqcQcpxYnwAZZv3RpksKvxBIusPCHUL3NuC0xLwwJCpPxIuknQ==
 
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"