sidebar collapsing is better

src/app/course/[courseName]/CollapsableSidebar.tsx

@@ -1,25 +1,61 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import CourseSettingsLink from "./CourseSettingsLink";
 import ModuleList from "./modules/ModuleList";
 import LeftChevron from "@/components/icons/LeftChevron";
 import RightChevron from "@/components/icons/RightChevron";
 
-export default function CollapsableSidebar() {
+const collapseThreshold = 1400;
-  const [isCollapsed, setIsCollapsed] = useState(false);
+
+export default function CollapsableSidebar() {
+  const [windowCollapseRecommended, setWindowCollapseRecommended] =
+    useState(window.innerWidth <= collapseThreshold);
+  const [userCollapsed, setUserCollapsed] = useState<
+    "unset" | "collapsed" | "uncollapsed"
+  >("unset");
+
+  useEffect(() => {
+    function handleResize() {
+      if (window.innerWidth <= collapseThreshold) {
+        setWindowCollapseRecommended(true);
+      } else {
+        setWindowCollapseRecommended(false);
+      }
+    }
+    handleResize(); // Set initial state
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  let collapsed;
+  if (userCollapsed === "unset") {
+    collapsed = windowCollapseRecommended;
+  } else {
+    collapsed = userCollapsed === "collapsed";
+  }
+
+  const widthClass = collapsed ? "w-0" : "w-96";
+  const visibilityClass = collapsed ? "invisible " : "visible";
 
-  const widthClass = isCollapsed ? "w-0" : "w-96";
-  const visibilityClass = isCollapsed ? "invisible " : "visible";
   return (
     <div className="h-full flex flex-col">
       <div className="flex flex-row justify-between mb-2">
         <div className="visible mx-3 mt-2">
-          <button onClick={() => setIsCollapsed((i) => !i)}>
+          <button
-            {isCollapsed ? <LeftChevron /> : <RightChevron />}
+            onClick={() => {
+              setUserCollapsed((prev) => {
+                if (prev === "unset") {
+                  return collapsed ? "uncollapsed" : "collapsed";
+                }
+                return prev === "collapsed" ? "uncollapsed" : "collapsed";
+              });
+            }}
+          >
+            {collapsed ? <LeftChevron /> : <RightChevron />}
           </button>
         </div>
-        <div className={" " + (isCollapsed ? "w-0 invisible hidden" : "")}>
+        <div className={" " + (collapsed ? "w-0 invisible hidden" : "")}>
           <CourseSettingsLink />
         </div>
       </div>

src/app/course/[courseName]/calendar/CourseCalendar.tsx

@@ -43,15 +43,15 @@ export default function CourseCalendar() {
   return (
     <div
       className="
-      min-h-0
+        min-h-0
-      flex-grow
+        flex-grow
-      border-2
+        border-2
-      border-gray-900
+        border-gray-900
-      rounded-lg
+        rounded-lg
-      bg-linear-to-br
+        bg-linear-to-br
-      from-blue-950/30
+        from-blue-950/30
-      to-fuchsia-950/10 to-60%
+        to-fuchsia-950/10 to-60%
-      sm:p-1
+        sm:p-1
       "
     >
       <div

src/app/course/[courseName]/page.tsx

@@ -11,7 +11,7 @@ export default async function CoursePage() {
       <div className="h-full flex flex-col">
         <DragStyleContextProvider>
           <DraggingContextProvider>
-            <div className="flex sm:flex-row h-full flex-col max-w-[2400px] mx-auto">
+            <div className="flex sm:flex-row h-full flex-col max-w-[2400px] w-full mx-auto">
               <div className="flex-1 h-full flex flex-col">
                 <CourseNavigation />
                 <CourseCalendar />