#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 {
-  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 { Drawer } from '@linagora/twake-mui'
 import { CalendarSidebarProps } from './SideBar'
 import { SidebarCommonContent } from './SidebarCommonContent'
+import { ViewSwitcher } from './ViewSwitcher'
 
-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 function TabletSidebar({
+export const TabletSidebar: React.FC<CalendarSidebarProps> = ({
   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}>
-        <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>
+      <ViewSwitcher
+        onClose={onClose}
+        onViewChange={onViewChange}
+        currentView={currentView}
+      />
 
       <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
+  }
+}