feat: implement skeleton layout for settings and search pages (#366)

Co-authored-by: Lê Nhân Phụng <lenhanphung@Phung-Mac-M4.local>

src/components/Calendar/Calendar.styl

@@ -5,10 +5,12 @@
   justify-content space-between
 
 .main-layout
+  display flex
+  height calc(100vh - 90px)
+  
+.main-layout.calendar-layout
   background-color #fff
   flex-direction row
-  height calc(100vh - 90px)
-  display flex
 
 .calendar
   flex-grow 1

src/components/Calendar/Calendar.tsx

@@ -574,7 +574,7 @@ export default function CalendarApp({
   const { t, lang } = useI18n();
 
   return (
-    <main className="main-layout">
+    <main className="main-layout calendar-layout">
       <Box
         className="sidebar"
         sx={{

src/components/Calendar/CalendarLayout.tsx

@@ -7,12 +7,16 @@ import { useAppSelector } from "../../app/hooks";
 import { refreshCalendars } from "../Event/utils/eventUtils";
 import { ErrorSnackbar } from "../Error/ErrorSnackbar";
 
+import SettingsPage from "../../features/Settings/SettingsPage";
+import SearchResultsPage from "../../features/Search/SearchResultsPage";
+
 export default function CalendarLayout() {
   const calendarRef = useRef<any>(null);
   const dispatch = useAppDispatch();
   const error = useAppSelector((state) => state.calendars.error);
   const selectedCalendars = useAppSelector((state) => state.calendars.list);
   const tempcalendars = useAppSelector((state) => state.calendars.templist);
+  const view = useAppSelector((state) => state.settings.view);
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
   const [currentView, setCurrentView] = useState<string>("timeGridWeek");
 
@@ -59,11 +63,15 @@ export default function CalendarLayout() {
   return (
     <div className="App">
       <Menubar {...menubarProps} />
-      <CalendarApp
-        calendarRef={calendarRef}
-        onDateChange={handleDateChange}
-        onViewChange={handleViewChange}
-      />
+      {view === "calendar" && (
+        <CalendarApp
+          calendarRef={calendarRef}
+          onDateChange={handleDateChange}
+          onViewChange={handleViewChange}
+        />
+      )}
+      {view === "settings" && <SettingsPage />}
+      {view === "search" && <SearchResultsPage />}
       <ErrorSnackbar error={error} type="calendar" />
     </div>
   );