course-structure v1.1.8
Responsive Layout with Sidebar Toggle
Description
This project is a responsive web layout with a header, collapsible sidebar, and main content area. It includes:
- A sticky header with a toggle button.
- A collapsible sidebar that can be toggled on desktop.
- Responsive design for desktop views.
- Inline styles for dynamic styling.
Screenshots
Desktop View
How to Use
step 1: npm i course-structure
step 2: import { MyComponent } from "course-structure";
step 3: < MyComponent modules={modules} title="Course name" />
module example: [ { title: "Module Name 1", duration: "1hr", content: { cid: 1, type: "html", title: "Content HTML", url: "https://www.cs.unc.edu/~jbs/resources/www/page_prep/intro-html/dummy.html", }, { cid: 2, type: "pdf", title: "PDF", url: "https://pdfobject.com/pdf/sample.pdf", }, { cid: 3, type: "audio", title: "Audio", url: "https://file-examples.com/storage/fe6a71582967c9a269c25cd/2017/11/file_example_MP3_1MG.mp3", }, { cid: 4, type: "video", title: "Video", url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", }, , }, { title: "Module Name 2", duration: "1hr", content: { cid: 5, type: "text", title: "TextWeb Development", url: "#", content: "Hello Hi I am Naresh", }, , }, ];
