added integration for calendar to have twake top bar (#576)

src/components/Calendar/Calendar.tsx

@@ -33,6 +33,7 @@ import { User } from "../Attendees/PeopleSearch";
 import { EventErrorSnackbar } from "../Error/ErrorSnackbar";
 import { EventErrorHandler } from "../Error/EventErrorHandler";
 import { EditModeDialog } from "../Event/EditModeDialog";
+import { Menubar, MenubarProps } from "../Menubar/Menubar";
 import "./Calendar.styl";
 import CalendarSelection from "./CalendarSelection";
 import "./CustomCalendar.styl";
@@ -59,12 +60,14 @@ interface CalendarAppProps {
   calendarRef: MutableRefObject<CalendarApi | null>;
   onDateChange?: (date: Date) => void;
   onViewChange?: (view: string) => void;
+  menubarProps?: MenubarProps;
 }
 
 export default function CalendarApp({
   calendarRef,
   onDateChange,
   onViewChange,
+  menubarProps,
 }: CalendarAppProps) {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [selectedMiniDate, setSelectedMiniDate] = useState(new Date());
@@ -661,6 +664,7 @@ export default function CalendarApp({
       </Box>
       <div className="calendar">
         <ImportAlert />
+        {menubarProps?.isIframe && <Menubar {...menubarProps} />}
         {view === "calendar" && (
           <FullCalendar
             ref={(ref) => {

src/components/Calendar/CalendarLayout.tsx

@@ -2,7 +2,8 @@ import { useAppDispatch, useAppSelector } from "@/app/hooks";
 import SettingsPage from "@/features/Settings/SettingsPage";
 import { getCalendarRange } from "@/utils/dateUtils";
 import type { CalendarApi } from "@fullcalendar/core";
-import { useEffect, useRef, useState } from "react";
+import CozyBridge from "cozy-external-bridge";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ErrorSnackbar } from "../Error/ErrorSnackbar";
 import { refreshCalendars } from "../Event/utils/eventUtils";
 import { Menubar, MenubarProps } from "../Menubar/Menubar";
@@ -17,6 +18,7 @@ export default function CalendarLayout() {
   const view = useAppSelector((state) => state.settings.view);
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
   const [currentView, setCurrentView] = useState<string>("timeGridWeek");
+  const isInIframe = useMemo(() => new CozyBridge().isInIframe(), []);
 
   const handleRefresh = async () => {
     // Get current calendar range
@@ -70,16 +72,18 @@ export default function CalendarLayout() {
     onDateChange: handleDateChange,
     currentView,
     onViewChange: handleViewChange,
+    isIframe: isInIframe,
   };
 
   return (
     <div className="App">
-      <Menubar {...menubarProps} />
+      {!isInIframe && <Menubar {...menubarProps} />}
       {(view === "calendar" || view === "search") && (
         <CalendarApp
           calendarRef={calendarRef}
           onDateChange={handleDateChange}
           onViewChange={handleViewChange}
+          menubarProps={menubarProps}
         />
       )}
       {view === "settings" && <SettingsPage />}