diff --git a/apps/antalmanac/src/components/SharedRoot.tsx b/apps/antalmanac/src/components/SharedRoot.tsx index 39d006abc..fa23ff437 100644 --- a/apps/antalmanac/src/components/SharedRoot.tsx +++ b/apps/antalmanac/src/components/SharedRoot.tsx @@ -10,7 +10,6 @@ import loadingGif from './RightPane/CoursePane/SearchForm/Gifs/loading.gif'; import { CoursePaneRoot } from '$components/RightPane/CoursePane/CoursePaneRoot'; import { getLocalStorageUserId } from '$lib/localStorage'; -import { useScheduleManagementStore } from '$stores/ScheduleManagementStore'; import { useThemeStore } from '$stores/SettingsStore'; import { useTabStore } from '$stores/TabStore'; @@ -222,26 +221,6 @@ export default function ScheduleManagement() { */ const ref = useRef(); - const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth); - - useEffect(() => { - const element = ref.current; - - if (!element) return; - - const observer = new ResizeObserver(([entry]) => { - if (entry.contentRect) { - setScheduleManagementWidth(entry.contentRect.width); - } - }); - - observer.observe(element); - - return () => { - observer.disconnect(); - }; - }, [setScheduleManagementWidth]); - const value = isMobile ? activeTab : activeTab - 1 >= 0 ? activeTab - 1 : 0; // Save the current scroll position to the store. diff --git a/apps/antalmanac/src/routes/Home.tsx b/apps/antalmanac/src/routes/Home.tsx index 6ed8aed5c..ba77aaeb8 100644 --- a/apps/antalmanac/src/routes/Home.tsx +++ b/apps/antalmanac/src/routes/Home.tsx @@ -10,6 +10,7 @@ import NotificationSnackbar from '$components/NotificationSnackbar'; import PatchNotes from '$components/PatchNotes'; import ScheduleManagement from '$components/SharedRoot'; import { Tutorial } from '$components/Tutorial'; +import { useScheduleManagementStore } from '$stores/ScheduleManagementStore'; function MobileHome() { return ( @@ -22,6 +23,23 @@ function MobileHome() { function DesktopHome() { const theme = useTheme(); + const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth); + + const handleDrag = (sizes: number[]) => { + if (!window.innerWidth) { + return; + } + + /** + * Sizes is a two element array containing the size of each side (in percentages) + * + * @example [25, 75] + */ + const [_, scheduleManagementPercentage] = sizes; + const scheduleManagementWidth = window.innerWidth * scheduleManagementPercentage * 0.01; + + setScheduleManagementWidth(scheduleManagementWidth); + }; return ( <> @@ -30,7 +48,7 @@ function DesktopHome() {