[#668] Tablet view (#716)

* draft for tablet view * adapt sidebar to tablet view * split menubar to handle tablet and desktop separatly * split sidebar to handle tablet and desktop separatly * prettier day navigationin tablet view * added missing translations * coderabbit comments * fix UI of view switcher on tablet, remove hard text * fix style of selected view option * fix wrong I18n key * extracted menubar recurring components to own files * adjust test case of calendar component * refactor function change calendar view Co-authored-by: Camille Moussu <cmoussu@linagora.com> Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
2026-04-03 08:49:37 +02:00
parent c1d3cf5f3d
commit 4e57f6b342
36 changed files with 1549 additions and 576 deletions
@@ -0,0 +1,82 @@
+import { Box, Button, Drawer, radius } from '@linagora/twake-mui'
+import AddIcon from '@mui/icons-material/Add'
+import { useI18n } from 'twake-i18n'
+import { MiniCalendar } from '../MiniCalendar'
+import { CalendarSidebarProps } from './SideBar'
+import { SidebarCommonContent } from './SidebarCommonContent'
+
+export function DesktopSidebar({
+  calendarRef,
+  isIframe,
+  onCreateEvent,
+  selectedMiniDate,
+  setSelectedMiniDate,
+  tempUsers,
+  setTempUsers,
+  selectedCalendars,
+  setSelectedCalendars
+}: CalendarSidebarProps) {
+  const { t } = useI18n()
+
+  return (
+    <Drawer
+      variant="permanent"
+      open
+      className="sidebar"
+      sx={{
+        [`& .MuiDrawer-paper`]: {
+          paddingTop: 0,
+          paddingBottom: 3,
+          paddingLeft: 3,
+          paddingRight: 2,
+          width: '270px',
+          marginTop: '70px'
+        },
+        zIndex: 5
+      }}
+      slotProps={{ paper: { className: 'sidebar' } }}
+    >
+      <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>
+
+      <SidebarCommonContent
+        onCreateEvent={onCreateEvent}
+        tempUsers={tempUsers}
+        setTempUsers={setTempUsers}
+        selectedCalendars={selectedCalendars}
+        setSelectedCalendars={setSelectedCalendars}
+      />
+    </Drawer>
+  )
+}