diff --git a/src/app/course/[courseName]/CollapsableSidebar.tsx b/src/app/course/[courseName]/CollapsableSidebar.tsx new file mode 100644 index 0000000..6745d43 --- /dev/null +++ b/src/app/course/[courseName]/CollapsableSidebar.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { useState } 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 [isCollapsed, setIsCollapsed] = useState(false); + + const widthClass = isCollapsed ? "w-0" : "w-96"; + const visibilityClass = isCollapsed ? "invisible" : "visible"; + return ( +
+
+
+ +
+
+ +
+
+
+ +
+
+ ); +} diff --git a/src/app/course/[courseName]/page.tsx b/src/app/course/[courseName]/page.tsx index 173ac33..b1492d8 100644 --- a/src/app/course/[courseName]/page.tsx +++ b/src/app/course/[courseName]/page.tsx @@ -1,9 +1,8 @@ import CourseCalendar from "./calendar/CourseCalendar"; -import CourseSettingsLink from "./CourseSettingsLink"; -import ModuleList from "./modules/ModuleList"; import DraggingContextProvider from "./context/drag/DraggingContextProvider"; import { CourseNavigation } from "./CourseNavigation"; import { DragStyleContextProvider } from "./context/drag/dragStyleContext"; +import CollapsableSidebar from "./CollapsableSidebar"; export default async function CoursePage({}: {}) { @@ -17,10 +16,7 @@ export default async function CoursePage({}: {}) { -
- - -
+ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b318445..4d9b072 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -26,7 +26,7 @@ export default async function RootLayout({ -
+
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index f9faf5d..5ded43c 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -44,7 +44,7 @@ export default function Modal({
+ + + ); +} diff --git a/src/components/icons/LeftChevron.tsx b/src/components/icons/LeftChevron.tsx new file mode 100644 index 0000000..6443ba2 --- /dev/null +++ b/src/components/icons/LeftChevron.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +export default function LeftChevron() { + return ( + + + + ); +} diff --git a/src/components/icons/RightChevron.tsx b/src/components/icons/RightChevron.tsx new file mode 100644 index 0000000..1df06c0 --- /dev/null +++ b/src/components/icons/RightChevron.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +export default function RightChevron() { + return ( + + + + ); +} diff --git a/src/components/icons/UpChevron.tsx b/src/components/icons/UpChevron.tsx new file mode 100644 index 0000000..eadeca9 --- /dev/null +++ b/src/components/icons/UpChevron.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +export default function UpChevron() { + return ( + + + + ); +}