saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-08-30 08:19:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

enforce correct lesson order in course sidebar, improve styling and seperation of course sidebar

Browse Source
This commit is contained in:
austinkelsay 2025-07-06 17:18:51 -05:00
parent 892ac6c7be
commit eda202c6a2
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE
2 changed files with 51 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/content/courses/layout/CourseSidebar.js
View File

@ -91,7 +91,7 @@ const CourseSidebar = ({
/>
)}
</div>
<div className="overflow-y-auto flex-1 pr-2">
<div className="flex-1 pr-2">
<ul className="space-y-2">
{lessons.map((lesson, index) => (
<LessonItem key={index} lesson={lesson} index={index} />
@ -128,13 +128,11 @@ const CourseSidebar = ({
{!isMobileView && sidebarVisible && (
<div className="relative flex flex-row-reverse z-[999]">
<div
className={`transition-all duration-500 ease-in-out flex w-80 opacity-100`}
className={`transition-all duration-500 ease-in-out opacity-100`}
>
<div className="ml-2 w-80 h-[calc(100vh-400px)] sticky overflow-hidden rounded-lg border border-gray-800 shadow-md bg-gray-800"
<div className="ml-2 w-80 sticky rounded-lg border border-gray-800 shadow-md bg-gray-800"
style={{ top: `${navbarHeight + 70}px` }}> {/* Adjusted to match new header spacing */}
<div className="h-full overflow-y-auto">
<SidebarContent />
</div>
<SidebarContent />
</div>
</div>
</div>

101
src/pages/course/[slug]/index.js
View File

@ -226,11 +226,10 @@ const Course = () => {
/>
</div>
{/* Main content area with fixed width */}
<div className="relative mt-4">
<div className={`transition-all duration-500 ease-in-out ${isMobileView ? 'w-full' : 'w-full'}`}
style={!isMobileView && sidebarVisible ? {paddingRight: '320px'} : {}}>
{/* Main content area with flex layout */}
<div className={`relative mt-4 ${!isMobileView ? 'flex items-start gap-x-8' : ''}`}>
{/* Main Content */}
<div className="flex-1 min-w-0">
{/* Overview tab content */}
<div className={`${activeTab === 'overview' ? 'block' : 'hidden'}`}>
<CourseOverview
@ -279,68 +278,52 @@ const Course = () => {
{/* QA tab content */}
<div className={`${activeTab === 'qa' ? 'block' : 'hidden'}`}>
<CourseQA
nAddress={nAddress}
isAuthorized={isAuthorized}
nsec={nsec}
npub={npub}
/>
<CourseQA nAddress={nAddress} isAuthorized={isAuthorized} nsec={nsec} npub={npub} />
</div>
{/* Mobile: Lessons are a tab */}
{isMobileView && (
<div className={`${activeTab === 'lessons' ? 'block' : 'hidden'}`}>
<CourseSidebar
lessons={uniqueLessons}
activeIndex={activeIndex}
onLessonSelect={handleLessonSelect}
completedLessons={completedLessons}
isMobileView={isMobileView}
onClose={() => {
setSidebarVisible(false);
toggleTab(getActiveTabIndex());
}}
sidebarVisible={sidebarVisible}
setSidebarVisible={setSidebarVisible}
hideToggleButton={true}
/>
</div>
)}
</div>
{/* Course Sidebar - positioned absolutely on desktop when visible */}
{!isMobileView ? (
{/* Desktop: Sidebar */}
{!isMobileView && (
<div
className={`transition-all duration-500 ease-in-out ${
sidebarVisible ? 'opacity-100 translate-x-0 shadow-2xl' : 'opacity-0 translate-x-full pointer-events-none'
className={`flex-shrink-0 transition-all duration-300 ease-in-out ${
sidebarVisible ? 'w-80 opacity-100' : 'w-0 opacity-0'
}`}
style={{
position: 'absolute',
top: '0',
right: '0',
width: '320px',
height: '100%',
zIndex: 999,
overflow: 'visible',
transformOrigin: 'right center',
transform: `translateX(${sidebarVisible ? '0' : '10px'}) scale(${sidebarVisible ? '1' : '0.97'})`,
transition: 'transform 1000ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease-in-out, box-shadow 1200ms ease'
pointerEvents: sidebarVisible ? 'auto' : 'none',
}}
>
<CourseSidebar
lessons={uniqueLessons}
activeIndex={activeIndex}
onLessonSelect={handleLessonSelect}
completedLessons={completedLessons}
isMobileView={isMobileView}
sidebarVisible={sidebarVisible}
setSidebarVisible={setSidebarVisible}
hideToggleButton={true}
/>
</div>
) : (
<div className={`flex-shrink-0 transition-all duration-300 z-[999] ${
(isMobileView && activeTab === 'lessons') ? 'ml-0 w-auto opacity-100 scale-100' :
'w-0 ml-0 opacity-0 scale-95 overflow-hidden'
}`}
style={{
transformOrigin: 'top center',
transition: 'opacity 300ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), width 300ms ease-in-out'
}}>
<CourseSidebar
lessons={uniqueLessons}
activeIndex={activeIndex}
onLessonSelect={handleLessonSelect}
completedLessons={completedLessons}
isMobileView={isMobileView}
onClose={() => {
setSidebarVisible(false);
toggleTab(getActiveTabIndex());
}}
sidebarVisible={sidebarVisible}
setSidebarVisible={setSidebarVisible}
hideToggleButton={true}
/>
{sidebarVisible && (
<CourseSidebar
lessons={uniqueLessons}
activeIndex={activeIndex}
onLessonSelect={handleLessonSelect}
completedLessons={completedLessons}
isMobileView={isMobileView}
sidebarVisible={sidebarVisible}
setSidebarVisible={setSidebarVisible}
hideToggleButton={true}
/>
)}
</div>
)}
</div>