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 CourseCalendar from "./calendar/CourseCalendar";
import CourseSettingsLink from "./CourseSettingsLink";
import ModuleList from "./modules/ModuleList";
import DraggingContextProvider from "./context/drag/DraggingContextProvider"; import DraggingContextProvider from "./context/drag/DraggingContextProvider";
import { CourseNavigation } from "./CourseNavigation"; import { CourseNavigation } from "./CourseNavigation";
import { DragStyleContextProvider } from "./context/drag/dragStyleContext"; import { DragStyleContextProvider } from "./context/drag/dragStyleContext";
import CollapsableSidebar from "./CollapsableSidebar";
export default async function CoursePage({}: {}) { export default async function CoursePage({}: {}) {
@@ -17,10 +16,7 @@ export default async function CoursePage({}: {}) {
<CourseNavigation /> <CourseNavigation />
<CourseCalendar /> <CourseCalendar />
</div> </div>
<div className="w-96 sm:p-3 h-full overflow-y-auto"> <CollapsableSidebar />
<CourseSettingsLink />
<ModuleList />
</div>
</div> </div>
</DraggingContextProvider> </DraggingContextProvider>
</DragStyleContextProvider> </DragStyleContextProvider>

2
src/app/layout.tsx
View File

@@ -26,7 +26,7 @@ export default async function RootLayout({
<html lang="en"> <html lang="en">
<head></head> <head></head>
<body className="flex justify-center"> <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 /> <MyToaster />
<Suspense> <Suspense>
<Providers> <Providers>

2
src/components/Modal.tsx
View File

@@ -44,7 +44,7 @@ export default function Modal({
<div <div
className={ className={
" fixed inset-0 flex items-center justify-center transition-all duration-400 h-screen " + " fixed inset-0 flex items-center justify-center transition-all duration-400 h-screen w-svw " +
" bg-black" + " bg-black" +
(modalControl.isOpen (modalControl.isOpen
? " bg-opacity-50 z-50 " ? " bg-opacity-50 z-50 "

20
src/components/icons/DownChevron.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from "react";
export default function DownChevron() {
return (
<svg
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 13L12 18L17 13M7 6L12 11L17 6"
className="stroke-slate-100"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

20
src/components/icons/LeftChevron.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from "react";
export default function LeftChevron() {
return (
<svg
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 17L13 12L18 7M11 17L6 12L11 7"
className="stroke-slate-100"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

20
src/components/icons/RightChevron.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from "react";
export default function RightChevron() {
return (
<svg
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 17L11 12L6 7M13 17L18 12L13 7"
className="stroke-slate-100"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

20
src/components/icons/UpChevron.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from "react";
export default function UpChevron() {
return (
<svg
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17 18L12 13L7 18M17 11L12 6L7 11"
className="stroke-slate-100"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}