#681 day view with sidebar on mobile

src/components/Calendar/Calendar.tsx

@@ -385,6 +385,7 @@ const CalendarApp: React.FC<CalendarAppProps> = ({
         tempUsers={tempUsers}
         setTempUsers={setTempUsers}
         currentView={currentView}
+        onDateChange={onDateChange}
       />
       <div className="calendar">
         <ImportAlert />
@@ -505,7 +506,7 @@ const CalendarApp: React.FC<CalendarAppProps> = ({
               hour12: false
             }}
             datesSet={arg => {
-              setCurrentView(arg.view.type)
+              onViewChange?.(arg.view.type)
               const calendarCurrentDate =
                 calendarRef.current?.getDate() || new Date(arg.start)
               setDisplayedDateAndRange(calendarCurrentDate)

src/components/Calendar/CalendarLayout.tsx

@@ -72,8 +72,6 @@ export default function CalendarLayout(): JSX.Element {
     if (!calendarRef.current) return
     dispatch(setView('calendar'))
 
-    calendarRef.current.changeView(view)
-
     // Notify parent about view change
     setCurrentView(view)
 

src/components/Calendar/SideBar.tsx

@@ -1,148 +0,0 @@
-import { CalendarApi } from '@fullcalendar/core'
-import { Box, Button, Drawer, radius } from '@linagora/twake-mui'
-import AddIcon from '@mui/icons-material/Add'
-import CalendarViewDayOutlinedIcon from '@mui/icons-material/CalendarViewDayOutlined'
-import CalendarViewMonthOutlinedIcon from '@mui/icons-material/CalendarViewMonthOutlined'
-import CalendarViewWeekOutlinedIcon from '@mui/icons-material/CalendarViewWeekOutlined'
-import { Dispatch, MutableRefObject, SetStateAction } from 'react'
-import { useI18n } from 'twake-i18n'
-import { User } from '../Attendees/PeopleSearch'
-import { FieldWithLabel } from '../Event/components/FieldWithLabel'
-import CalendarSelection from './CalendarSelection'
-import { MiniCalendar } from './MiniCalendar'
-import { TempCalendarsInput } from './TempCalendarsInput'
-
-interface CalendarSidebarProps {
-  isTablet: boolean
-  open: boolean
-  onClose: () => void
-  calendarRef: MutableRefObject<CalendarApi | null>
-  isIframe?: boolean
-  onCreateEvent: () => void
-  onViewChange: (view: string) => void
-  selectedMiniDate: Date
-  setSelectedMiniDate: (date: Date) => void
-  selectedCalendars: string[]
-  setSelectedCalendars: Dispatch<SetStateAction<string[]>>
-  tempUsers: User[]
-  setTempUsers: Dispatch<SetStateAction<User[]>>
-}
-
-export default function Sidebar({
-  isTablet,
-  open,
-  onClose,
-  calendarRef,
-  isIframe,
-  onCreateEvent,
-  onViewChange,
-  selectedMiniDate,
-  setSelectedMiniDate,
-  selectedCalendars,
-  setSelectedCalendars,
-  tempUsers,
-  setTempUsers
-}: CalendarSidebarProps) {
-  const { t } = useI18n()
-
-  return (
-    <Drawer
-      variant={isTablet ? 'temporary' : 'permanent'}
-      open={isTablet ? open : true}
-      onClose={onClose}
-      className="sidebar"
-      sx={{
-        [`& .MuiDrawer-paper`]: {
-          paddingTop: isTablet ? 2 : 0,
-          paddingBottom: 3,
-          paddingLeft: 3,
-          paddingRight: 2,
-          width: '270px',
-          marginTop: isTablet ? 0 : '70px'
-        },
-        zIndex: isTablet ? 3000 : 5
-      }}
-      slotProps={{ paper: { className: 'sidebar' } }}
-    >
-      {!isTablet && (
-        <>
-          <Box
-            sx={{
-              position: 'sticky',
-              top: 0,
-              zIndex: 10,
-              backgroundColor: '#fff',
-              paddingTop: isIframe ? '10px' : 3
-            }}
-          >
-            <Button
-              size="medium"
-              variant="contained"
-              fullWidth
-              onClick={onCreateEvent}
-              sx={{
-                borderRadius: radius.lg,
-                fontSize: '16px',
-                fontWeight: 500,
-                lineHeight: 'normal'
-              }}
-            >
-              <AddIcon sx={{ marginRight: 0.5, fontSize: '20px' }} />{' '}
-              {t('event.createEvent')}
-            </Button>
-          </Box>
-          <Box>
-            <MiniCalendar
-              calendarRef={calendarRef}
-              selectedDate={selectedMiniDate}
-              setSelectedMiniDate={setSelectedMiniDate}
-            />
-          </Box>
-        </>
-      )}
-
-      {isTablet && (
-        <FieldWithLabel label={t('sidebar.displayMode')} isExpanded={false}>
-          <Button
-            variant="text"
-            onClick={() => onViewChange('timeGridDay')}
-            startIcon={<CalendarViewDayOutlinedIcon />}
-          >
-            {t('menubar.views.day')}
-          </Button>
-          <Button
-            variant="text"
-            onClick={() => {
-              onViewChange('timeGridWeek')
-            }}
-            startIcon={<CalendarViewWeekOutlinedIcon />}
-          >
-            {t('menubar.views.week')}
-          </Button>
-          <Button
-            variant="text"
-            onClick={() => onViewChange('dayGridMonth')}
-            startIcon={<CalendarViewMonthOutlinedIcon />}
-          >
-            {t('menubar.views.month')}
-          </Button>
-        </FieldWithLabel>
-      )}
-
-      <Box sx={{ mb: 3, mt: 2 }}>
-        <TempCalendarsInput
-          tempUsers={tempUsers}
-          setTempUsers={setTempUsers}
-          handleToggleEventPreview={onCreateEvent}
-        />
-      </Box>
-
-      <Box className="calendarList">
-        <CalendarSelection
-          selectedCalendars={selectedCalendars}
-          setSelectedCalendars={setSelectedCalendars}
-        />
-      </Box>
-    </Drawer>
-  )
-}

src/components/Calendar/Sidebar/MobileSidebar.tsx

@@ -0,0 +1,125 @@
+import { Drawer, IconButton, Box } from '@linagora/twake-mui'
+import { CalendarSidebarProps } from './SideBar'
+import { SidebarCommonContent } from './SidebarCommonContent'
+import { ViewSwitcher } from './ViewSwitcher'
+import { MainTitle } from '@/components/Menubar/MainTitle'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import { useI18n } from 'twake-i18n'
+import { AppListMenu } from '@/components/Menubar/AppListMenu'
+import { UserMenu } from '@/components/Menubar/UserMenu'
+import { useAppSelector } from '@/app/hooks'
+import { useUtilMenus } from '../hooks/useUtilMenus'
+
+export const MobileSidebar: React.FC<CalendarSidebarProps> = ({
+  open,
+  onClose,
+  onViewChange,
+  onCreateEvent,
+  tempUsers,
+  setTempUsers,
+  selectedCalendars,
+  setSelectedCalendars,
+  currentView,
+  isIframe,
+  calendarRef,
+  onDateChange
+}) => {
+  const { t } = useI18n()
+  const user = useAppSelector(state => state.user.userData)
+
+  const {
+    anchorEl,
+    supportLink,
+    userMenuAnchorEl,
+    handleAppMenuOpen,
+    handleAppMenuClose,
+    handleUserMenuOpen,
+    handleUserMenuClose,
+    handleSettingsClick,
+    handleLogoutClick
+  } = useUtilMenus()
+
+  return (
+    <Drawer
+      variant="temporary"
+      open={open}
+      onClose={onClose}
+      className="sidebar"
+      sx={{
+        [`& .MuiDrawer-paper`]: {
+          paddingTop: 2,
+          paddingBottom: 3,
+          paddingLeft: 3,
+          paddingRight: 2,
+          width: '270px',
+          marginTop: 0
+        }
+      }}
+      slotProps={{ paper: { className: 'sidebar' } }}
+    >
+      {!isIframe && (
+        <Box
+          display="flex"
+          flexDirection="row"
+          justifyContent="space-between"
+          sx={{ mb: 2 }}
+        >
+          <MainTitle
+            calendarRef={calendarRef}
+            currentView={currentView}
+            onViewChange={onViewChange}
+            onDateChange={onDateChange}
+          />
+
+          <Box display="flex" alignItems="center">
+            {supportLink && (
+              <IconButton
+                component="a"
+                href={supportLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ marginRight: 4 }}
+                aria-label={t('menubar.help')}
+                title={t('menubar.help')}
+              >
+                <HelpOutlineIcon fontSize="small" />
+              </IconButton>
+            )}
+
+            <AppListMenu
+              anchorEl={anchorEl}
+              onAppMenuOpen={handleAppMenuOpen}
+              onAppMenuClose={handleAppMenuClose}
+              iconSize="small"
+            />
+
+            <UserMenu
+              anchorEl={userMenuAnchorEl}
+              onClose={handleUserMenuClose}
+              onSettingsClick={handleSettingsClick}
+              onLogoutClick={() => void handleLogoutClick()}
+              onUserMenuOpen={handleUserMenuOpen}
+              isIframe={isIframe}
+              user={user}
+              size="s"
+            />
+          </Box>
+        </Box>
+      )}
+
+      <ViewSwitcher
+        onClose={onClose}
+        onViewChange={onViewChange}
+        currentView={currentView}
+      />
+
+      <SidebarCommonContent
+        onCreateEvent={onCreateEvent}
+        tempUsers={tempUsers}
+        setTempUsers={setTempUsers}
+        selectedCalendars={selectedCalendars}
+        setSelectedCalendars={setSelectedCalendars}
+      />
+    </Drawer>
+  )
+}

src/components/Calendar/Sidebar/SideBar.tsx

@@ -4,6 +4,7 @@ import { Dispatch, MutableRefObject, SetStateAction } from 'react'
 import { User } from '../../Attendees/PeopleSearch'
 import { DesktopSidebar } from './DesktopSidebar'
 import { TabletSidebar } from './TabletSidebar'
+import { MobileSidebar } from './MobileSidebar'
 
 export interface CalendarSidebarProps {
   open: boolean
@@ -19,6 +20,7 @@ export interface CalendarSidebarProps {
   tempUsers: User[]
   setTempUsers: Dispatch<SetStateAction<User[]>>
   currentView: string
+  onDateChange?: (date: Date) => void
 }
 
 const Sidebar: React.FC<CalendarSidebarProps> = (
@@ -26,9 +28,11 @@ const Sidebar: React.FC<CalendarSidebarProps> = (
 ) => {
   const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
 
-  if (isMobile) return null
+  if (isMobile) {
+    return <MobileSidebar {...sharedProps} />
+  }
 
-  return isTablet ? (
+  return isTablet || isMobile ? (
     <TabletSidebar {...sharedProps} />
   ) : (
     <DesktopSidebar {...sharedProps} />

src/components/Calendar/Sidebar/TabletSidebar.tsx

@@ -1,39 +1,9 @@
-import {
+import { Drawer } from '@linagora/twake-mui'
-  Drawer,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-  MenuList,
-  useTheme
-} from '@linagora/twake-mui'
-import CalendarViewDayOutlinedIcon from '@mui/icons-material/CalendarViewDayOutlined'
-import CalendarViewMonthOutlinedIcon from '@mui/icons-material/CalendarViewMonthOutlined'
-import CalendarViewWeekOutlinedIcon from '@mui/icons-material/CalendarViewWeekOutlined'
-import { useI18n } from 'twake-i18n'
-import { FieldWithLabel } from '../../Event/components/FieldWithLabel'
-import { CALENDAR_VIEWS } from '../utils/constants'
 import { CalendarSidebarProps } from './SideBar'
 import { SidebarCommonContent } from './SidebarCommonContent'
+import { ViewSwitcher } from './ViewSwitcher'
 
-const VIEW_OPTIONS = [
+export const TabletSidebar: React.FC<CalendarSidebarProps> = ({
-  {
-    label: 'menubar.views.day',
-    value: CALENDAR_VIEWS.timeGridDay,
-    icon: <CalendarViewDayOutlinedIcon />
-  },
-  {
-    label: 'menubar.views.week',
-    value: CALENDAR_VIEWS.timeGridWeek,
-    icon: <CalendarViewWeekOutlinedIcon />
-  },
-  {
-    label: 'menubar.views.month',
-    value: CALENDAR_VIEWS.dayGridMonth,
-    icon: <CalendarViewMonthOutlinedIcon />
-  }
-]
-
-export function TabletSidebar({
   open,
   onClose,
   onViewChange,
@@ -43,15 +13,7 @@ export function TabletSidebar({
   selectedCalendars,
   setSelectedCalendars,
   currentView
-}: CalendarSidebarProps) {
+}) => {
-  const { t } = useI18n()
-  const theme = useTheme()
-
-  const changeViewAndClose = (view: string): void => {
-    onViewChange(view)
-    onClose()
-  }
-
   return (
     <Drawer
       variant="temporary"
@@ -70,43 +32,11 @@ export function TabletSidebar({
       }}
       slotProps={{ paper: { className: 'sidebar' } }}
     >
-      <FieldWithLabel label={t('sidebar.displayMode')} isExpanded={false}>
+      <ViewSwitcher
-        <MenuList>
+        onClose={onClose}
-          {VIEW_OPTIONS.map(option => {
+        onViewChange={onViewChange}
-            const isSelected = option.value === currentView
+        currentView={currentView}
-            return (
+      />
-              <MenuItem
-                key={option.value}
-                selected={isSelected}
-                onClick={() => changeViewAndClose(option.value)}
-              >
-                <ListItemIcon
-                  sx={{
-                    color: isSelected
-                      ? theme.palette.primary.main
-                      : theme.palette.text.primary
-                  }}
-                >
-                  {option.icon}
-                </ListItemIcon>
-                <ListItemText
-                  primary={t(option.label)}
-                  primaryTypographyProps={{
-                    sx: {
-                      fontSize: '14px',
-                      fontWeight: 500,
-                      lineHeight: '20px',
-                      color: isSelected
-                        ? theme.palette.primary.main
-                        : theme.palette.text.primary
-                    }
-                  }}
-                />
-              </MenuItem>
-            )
-          })}
-        </MenuList>
-      </FieldWithLabel>
 
       <SidebarCommonContent
         onCreateEvent={onCreateEvent}

src/components/Calendar/Sidebar/ViewSwitcher.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import {
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  MenuList,
+  useTheme
+} from '@linagora/twake-mui'
+import CalendarViewDayOutlinedIcon from '@mui/icons-material/CalendarViewDayOutlined'
+import CalendarViewMonthOutlinedIcon from '@mui/icons-material/CalendarViewMonthOutlined'
+import CalendarViewWeekOutlinedIcon from '@mui/icons-material/CalendarViewWeekOutlined'
+import { useI18n } from 'twake-i18n'
+import { FieldWithLabel } from '../../Event/components/FieldWithLabel'
+import { CALENDAR_VIEWS } from '../utils/constants'
+import { CalendarSidebarProps } from './SideBar'
+
+const VIEW_OPTIONS = [
+  {
+    label: 'menubar.views.day',
+    value: CALENDAR_VIEWS.timeGridDay,
+    icon: <CalendarViewDayOutlinedIcon />
+  },
+  {
+    label: 'menubar.views.week',
+    value: CALENDAR_VIEWS.timeGridWeek,
+    icon: <CalendarViewWeekOutlinedIcon />
+  },
+  {
+    label: 'menubar.views.month',
+    value: CALENDAR_VIEWS.dayGridMonth,
+    icon: <CalendarViewMonthOutlinedIcon />
+  }
+]
+
+export const ViewSwitcher: React.FC<
+  Pick<CalendarSidebarProps, 'onClose' | 'onViewChange' | 'currentView'>
+> = ({ onClose, onViewChange, currentView }) => {
+  const { t } = useI18n()
+  const theme = useTheme()
+
+  const changeViewAndClose = (view: string): void => {
+    onViewChange(view)
+    onClose()
+  }
+
+  return (
+    <FieldWithLabel label={t('sidebar.displayMode')} isExpanded={false}>
+      <MenuList>
+        {VIEW_OPTIONS.map(option => {
+          const isSelected = option.value === currentView
+          return (
+            <MenuItem
+              key={option.value}
+              selected={isSelected}
+              onClick={() => changeViewAndClose(option.value)}
+            >
+              <ListItemIcon
+                sx={{
+                  color: isSelected
+                    ? theme.palette.primary.main
+                    : theme.palette.text.primary
+                }}
+              >
+                {option.icon}
+              </ListItemIcon>
+              <ListItemText
+                primary={t(option.label)}
+                primaryTypographyProps={{
+                  sx: {
+                    fontSize: '14px',
+                    fontWeight: 500,
+                    lineHeight: '20px',
+                    color: isSelected
+                      ? theme.palette.primary.main
+                      : theme.palette.text.primary
+                  }
+                }}
+              />
+            </MenuItem>
+          )
+        })}
+      </MenuList>
+    </FieldWithLabel>
+  )
+}

src/components/Calendar/hooks/useCalendarViewHandlers.ts

@@ -2,7 +2,9 @@
 import { useCallback } from 'react'
 import { createViewHandlers, ViewHandlersProps } from '../handlers/viewHandlers'
 
-export const useCalendarViewHandlers = (props: ViewHandlersProps) => {
+export const useCalendarViewHandlers = (
+  props: ViewHandlersProps
+): ReturnType<typeof createViewHandlers> => {
   const viewHandlers = createViewHandlers(props)
 
   return {

src/components/Calendar/hooks/useUtilMenus.ts

@@ -0,0 +1,77 @@
+import { useAppDispatch } from '@/app/hooks'
+import { setView } from '@/features/Settings/SettingsSlice'
+import { Logout } from '@/features/User/oidcAuth'
+import { useScreenSizeDetection } from '@/useScreenSizeDetection'
+import { redirectTo } from '@/utils/navigation'
+import { useEffect, useState } from 'react'
+
+export const useUtilMenus = (): {
+  anchorEl: null | HTMLElement
+  userMenuAnchorEl: null | HTMLElement
+  supportLink: string
+  handleAppMenuOpen: (event: React.MouseEvent<HTMLElement>) => void
+  handleAppMenuClose: () => void
+  handleUserMenuOpen: (event: React.MouseEvent<HTMLElement>) => void
+  handleUserMenuClose: () => void
+  handleSettingsClick: () => void
+  handleLogoutClick: () => Promise<void>
+} => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [userMenuAnchorEl, setUserMenuAnchorEl] = useState<null | HTMLElement>(
+    null
+  )
+
+  const supportLink = window.SUPPORT_URL
+
+  const dispatch = useAppDispatch()
+  const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
+
+  useEffect(() => {
+    const resetMenuAnchorsOnResize = (): void => {
+      setAnchorEl(null)
+      setUserMenuAnchorEl(null)
+    }
+    resetMenuAnchorsOnResize()
+  }, [isTablet, isMobile])
+
+  const handleAppMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
+    setAnchorEl(event.currentTarget)
+
+  const handleAppMenuClose = (): void => setAnchorEl(null)
+
+  const handleUserMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
+    setUserMenuAnchorEl(event.currentTarget)
+
+  const handleUserMenuClose = (): void => {
+    setUserMenuAnchorEl(null)
+  }
+
+  const handleSettingsClick = (): void => {
+    dispatch(setView('settings'))
+    handleUserMenuClose()
+  }
+
+  const handleLogoutClick = async (): Promise<void> => {
+    try {
+      const logoutUrl = await Logout()
+      redirectTo(logoutUrl.href)
+    } catch (error) {
+      console.error('Logout failed:', error)
+    } finally {
+      sessionStorage.removeItem('tokenSet')
+      handleUserMenuClose()
+    }
+  }
+
+  return {
+    anchorEl,
+    userMenuAnchorEl,
+    supportLink,
+    handleAppMenuOpen,
+    handleAppMenuClose,
+    handleUserMenuOpen,
+    handleUserMenuClose,
+    handleSettingsClick,
+    handleLogoutClick
+  }
+}

src/components/Menubar/AppListMenu.tsx

@@ -3,15 +3,12 @@ import WidgetsOutlinedIcon from '@mui/icons-material/WidgetsOutlined'
 import { useI18n } from 'twake-i18n'
 import { AppIcon, AppIconProps } from './AppIcon'
 
-export function AppListMenu({
+export const AppListMenu: React.FC<{
-  anchorEl,
-  onAppMenuOpen,
-  onAppMenuClose
-}: {
   anchorEl: HTMLElement | null
   onAppMenuOpen: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onAppMenuClose: () => void
-}) {
+  iconSize?: 'inherit' | 'small' | 'medium' | 'large'
+}> = ({ anchorEl, onAppMenuOpen, onAppMenuClose, iconSize = 'inherit' }) => {
   const { t } = useI18n()
 
   const applist: AppIconProps[] = window.appList ?? []
@@ -27,7 +24,7 @@ export function AppListMenu({
         aria-label={t('menubar.apps')}
         title={t('menubar.apps')}
       >
-        <WidgetsOutlinedIcon />
+        <WidgetsOutlinedIcon fontSize={iconSize} />
       </IconButton>
 
       <Popover

src/components/Menubar/MainTitle.tsx

@@ -6,6 +6,7 @@ import { Button } from '@linagora/twake-mui'
 import React from 'react'
 import { useI18n } from 'twake-i18n'
 import { CALENDAR_VIEWS } from '../Calendar/utils/constants'
+import { useScreenSizeDetection } from '@/useScreenSizeDetection'
 
 export type MainTitleProps = {
   calendarRef: React.RefObject<CalendarApi | null>
@@ -14,33 +15,36 @@ export type MainTitleProps = {
   onDateChange?: (date: Date) => void
 }
 
-export function MainTitle({
+export const MainTitle: React.FC<MainTitleProps> = ({
   calendarRef,
   currentView,
   onViewChange,
   onDateChange
-}: MainTitleProps) {
+}: MainTitleProps) => {
   const { t } = useI18n()
   const dispatch = useAppDispatch()
+  const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
 
-  const handleLogoClick = async () => {
+  const isDesktop = !isTablet && !isMobile
+
+  const handleLogoClick = (): void => {
     if (!calendarRef.current) return
 
-    await dispatch(setView('calendar'))
+    dispatch(setView('calendar'))
 
-    if (currentView !== CALENDAR_VIEWS.timeGridWeek) {
+    if (currentView !== CALENDAR_VIEWS.timeGridWeek && isDesktop) {
       calendarRef.current.changeView(CALENDAR_VIEWS.timeGridWeek)
-      if (onViewChange) {
+      onViewChange?.(CALENDAR_VIEWS.timeGridWeek)
-        onViewChange(CALENDAR_VIEWS.timeGridWeek)
+    }
-      }
+
+    if (currentView !== CALENDAR_VIEWS.timeGridDay && !isDesktop) {
+      calendarRef.current.changeView(CALENDAR_VIEWS.timeGridDay)
+      onViewChange?.(CALENDAR_VIEWS.timeGridDay)
     }
 
     calendarRef.current.today()
 
-    if (onDateChange) {
+    onDateChange?.(calendarRef.current.getDate())
-      const newDate = calendarRef.current.getDate()
-      onDateChange(newDate)
-    }
   }
 
   return (
@@ -51,7 +55,7 @@ export function MainTitle({
         style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer' }}
       >
         <img
-          className="logo"
+          className={`logo ${isMobile ? 'logo--mobile' : ''}`}
           src={logo}
           alt={t('menubar.logoAlt')}
           onClick={handleLogoClick}

src/components/Menubar/Menubar.styl

@@ -55,6 +55,10 @@
   max-width 230px
   margin-left 1rem
 
+  &--mobile
+    max-width 130px
+    margin-left 0
+
 .nav-month
   padding-right 2px
   padding-left 2px

src/components/Menubar/Menubar.tsx

@@ -1,17 +1,16 @@
 import { useAppDispatch, useAppSelector } from '@/app/hooks'
 import { setView } from '@/features/Settings/SettingsSlice'
-import { Logout } from '@/features/User/oidcAuth'
 import { userData } from '@/features/User/userDataTypes'
 import { useScreenSizeDetection } from '@/useScreenSizeDetection'
-import { redirectTo } from '@/utils/navigation'
 import { CalendarApi } from '@fullcalendar/core'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { push } from 'redux-first-history'
 import { useI18n } from 'twake-i18n'
 import { DesktopMenubar } from './DesktopMenubar'
 import './Menubar.styl'
 import { TabletMenubar } from './TabletMenubar'
 import { MobileMenubar } from './MobileMenuBar'
+import { useUtilMenus } from '../Calendar/hooks/useUtilMenus'
 
 export type AppIconProps = {
   name: string
@@ -59,22 +58,22 @@ export const Menubar: React.FC<MenubarProps> = ({
   const { t } = useI18n() // deliberately NOT using f()
 
   const user = useAppSelector(state => state.user.userData)
-  const supportLink = window.SUPPORT_URL
+
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const {
-  const [userMenuAnchorEl, setUserMenuAnchorEl] = useState<null | HTMLElement>(
+    anchorEl,
-    null
+    userMenuAnchorEl,
-  )
+    supportLink,
+    handleAppMenuOpen,
+    handleAppMenuClose,
+    handleUserMenuOpen,
+    handleUserMenuClose,
+    handleSettingsClick,
+    handleLogoutClick
+  } = useUtilMenus()
+
   const dispatch = useAppDispatch()
   const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
 
-  useEffect(() => {
-    const resetMenuAnchorsOnResize = (): void => {
-      setAnchorEl(null)
-      setUserMenuAnchorEl(null)
-    }
-    resetMenuAnchorsOnResize()
-  }, [isTablet])
-
   useEffect(() => {
     if (!user) {
       dispatch(push('/'))
@@ -114,30 +113,6 @@ export const Menubar: React.FC<MenubarProps> = ({
     }
   }
 
-  const handleAppMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
-    setAnchorEl(event.currentTarget)
-
-  const handleAppMenuClose = (): void => setAnchorEl(null)
-
-  const handleUserMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
-    setUserMenuAnchorEl(event.currentTarget)
-
-  const handleUserMenuClose = (): void => {
-    setUserMenuAnchorEl(null)
-  }
-
-  const handleSettingsClick = (): void => {
-    dispatch(setView('settings'))
-    handleUserMenuClose()
-  }
-
-  const handleLogoutClick = async (): Promise<void> => {
-    const logoutUrl = await Logout()
-    sessionStorage.removeItem('tokenSet')
-    redirectTo(logoutUrl.href)
-    handleUserMenuClose()
-  }
-
   // Use i18n for month names instead of date-fns
   const monthIndex = currentDate.getMonth()
   const year = currentDate.getFullYear()
@@ -174,6 +149,7 @@ export const Menubar: React.FC<MenubarProps> = ({
         currentDate={currentDate}
         onDateChange={onDateChange}
         handleNavigation={handleNavigation}
+        onOpenSidebar={onToggleSidebar}
       />
     )
   }

src/components/Menubar/MobileMenuBar.tsx

@@ -2,6 +2,7 @@ import { CalendarApi } from '@fullcalendar/core'
 import { IconButton, Stack } from '@linagora/twake-mui'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
+import MenuIcon from '@mui/icons-material/Menu'
 import React, { useState } from 'react'
 import { useI18n } from 'twake-i18n'
 import SearchBar from './EventSearchBar'
@@ -15,13 +16,15 @@ export type MobileMenubarProps = {
   currentDate: Date
   onDateChange?: (date: Date) => void
   handleNavigation: (action: 'prev' | 'next' | 'today') => void
+  onOpenSidebar: () => void
 }
 
 export const MobileMenubar: React.FC<MobileMenubarProps> = ({
   calendarRef,
   currentDate,
   onDateChange,
-  handleNavigation
+  handleNavigation,
+  onOpenSidebar
 }) => {
   const { t } = useI18n()
 
@@ -37,6 +40,9 @@ export const MobileMenubar: React.FC<MobileMenubarProps> = ({
     <>
       <header className="menubar">
         <div className="left-menu">
+          <IconButton onClick={onOpenSidebar}>
+            <MenuIcon />
+          </IconButton>
           <div className="menu-items">
             <SmallNavigationControls onNavigate={handleNavigation} />
           </div>

src/components/Menubar/UserMenu.tsx

@@ -25,6 +25,7 @@ export type UserMenuProps = {
   onUserMenuOpen: (event: MouseEvent<HTMLElement>) => void
   user: userData | null
   isIframe?: boolean
+  size?: 's' | 'm' | 'l'
 }
 
 export function UserMenu({
@@ -34,7 +35,8 @@ export function UserMenu({
   onLogoutClick,
   onUserMenuOpen,
   user,
-  isIframe = false
+  isIframe = false,
+  size = 'm'
 }: UserMenuProps): JSX.Element {
   const { t } = useI18n()
   const theme = useTheme()
@@ -50,7 +52,7 @@ export function UserMenu({
         title={isIframe ? t('menubar.settings') : t('menubar.userProfile')}
       >
         {!isIframe ? (
-          <Avatar color={stringToGradient(displayName)} size="m">
+          <Avatar color={stringToGradient(displayName)} size={size}>
             {getInitials(displayName)}
           </Avatar>
         ) : (

src/components/Menubar/components/MonthSelector.tsx

@@ -49,6 +49,7 @@ export const MonthSelector: React.FC<MonthSelectorProps> = ({
             key={i}
             size="large"
             variant={isSelected ? 'contained' : 'outlined'}
+            aria-pressed={isSelected}
             sx={{
               borderRadius: radius.md
             }}

src/locales/fr.json

@@ -232,8 +232,8 @@
   },
   "menubar": {
     "today": "Aujourd'hui",
-    "next": "Précédent",
+    "next": "Suivant",
-    "prev": "Suivant",
+    "prev": "Précédent",
     "refresh": "Actualiser",
     "viewSelector": "Sélectionner la vue",
     "languageSelector": "Sélectionner la langue",