alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-25 23:28:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

can hide sidebar

Browse Source
This commit is contained in:
Alex Mickelson
2025-01-22 13:14:02 -07:00
parent da116abfae
commit f96dcb070f
8 changed files with 117 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/course/[courseName]/CollapsableSidebar.tsx Normal file
View File

@@ -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 (
<div>
<div className="flex flex-row justify-between mb-2">
<div className="visible mx-3 mt-2">
<button onClick={() => setIsCollapsed((i) => !i)}>
{isCollapsed ? <LeftChevron /> : <RightChevron />}
</button>
</div>
<div className={isCollapsed ? "w-0 invisible hidden" : ""}>
<CourseSettingsLink />
</div>
</div>
<div
className={`${widthClass} sm:p-3 h-full overflow-y-auto transition-all ${visibilityClass}`}
>
<ModuleList />
</div>
</div>
);
}

8
src/app/course/[courseName]/page.tsx
View File

@@ -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({}: {}) {
<CourseNavigation />
<CourseCalendar />
</div>
<div className="w-96 sm:p-3 h-full overflow-y-auto">
<CourseSettingsLink />
<ModuleList />
</div>
<CollapsableSidebar />
</div>
</DraggingContextProvider>
</DragStyleContextProvider>

2
src/app/layout.tsx
View File

@@ -26,7 +26,7 @@ export default async function RootLayout({
<html lang="en">
<head></head>
<body className="flex justify-center">
<div className="bg-slate-900 h-screen text-slate-300 w-full sm:p-1">
<div className="bg-slate-900 h-screen text-slate-300 w-screen sm:p-1">
<MyToaster />
<Suspense>
<Providers>