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

src/components/content/courses/layout/CourseSidebar.js

@@ -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 />
-                <SidebarContent />
-              </div>
             </div>
           </div>
         </div>

src/pages/course/[slug]/index.js

@@ -226,14 +226,13 @@ const Course = () => {
           />
         </div>
 
-        {/* Main content area with fixed width */}
+        {/* Main content area with flex layout */}
-        <div className="relative mt-4">
+        <div className={`relative mt-4 ${!isMobileView ? 'flex items-start gap-x-8' : ''}`}>
-          <div className={`transition-all duration-500 ease-in-out ${isMobileView ? 'w-full' : 'w-full'}`} 
+          {/* Main Content */}
-              style={!isMobileView && sidebarVisible ? {paddingRight: '320px'} : {}}>
+          <div className="flex-1 min-w-0">
-            
             {/* Overview tab content */}
             <div className={`${activeTab === 'overview' ? 'block' : 'hidden'}`}>
-              <CourseOverview 
+              <CourseOverview
                 course={course}
                 paidCourse={paidCourse}
                 lessons={uniqueLessons}
@@ -246,7 +245,7 @@ const Course = () => {
                 toggleToContentTab={() => toggleTab(1)} // Assuming content tab is at index 1
               />
             </div>
-            
+
             {/* Content tab content */}
             <div className={`${activeTab === 'content' ? 'block' : 'hidden'}`}>
               {!isAuthorized ? (
@@ -266,11 +265,11 @@ const Course = () => {
                   </div>
                 </div>
               ) : (
-                <CourseContent 
+                <CourseContent
                   lessons={uniqueLessons}
                   activeIndex={activeIndex}
                   course={course}
-                  paidCourse={paidCourse} 
+                  paidCourse={paidCourse}
                   decryptedLessonIds={decryptedLessonIds || {}}
                   setCompleted={setCompleted}
                 />
@@ -279,68 +278,52 @@ const Course = () => {
 
             {/* QA tab content */}
             <div className={`${activeTab === 'qa' ? 'block' : 'hidden'}`}>
-              <CourseQA 
+              <CourseQA nAddress={nAddress} isAuthorized={isAuthorized} nsec={nsec} npub={npub} />
-                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 */}
+          {/* Desktop: Sidebar */}
-          {!isMobileView ? (
+          {!isMobileView && (
-            <div 
+            <div
-              className={`transition-all duration-500 ease-in-out ${
+              className={`flex-shrink-0 transition-all duration-300 ease-in-out ${
-                sidebarVisible ? 'opacity-100 translate-x-0 shadow-2xl' : 'opacity-0 translate-x-full pointer-events-none'
+                sidebarVisible ? 'w-80 opacity-100' : 'w-0 opacity-0'
               }`}
               style={{
-                position: 'absolute',
+                pointerEvents: sidebarVisible ? 'auto' : 'none',
-                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'
               }}
             >
-              <CourseSidebar
+              {sidebarVisible && (
-                lessons={uniqueLessons}
+                <CourseSidebar
-                activeIndex={activeIndex}
+                  lessons={uniqueLessons}
-                onLessonSelect={handleLessonSelect}
+                  activeIndex={activeIndex}
-                completedLessons={completedLessons}
+                  onLessonSelect={handleLessonSelect}
-                isMobileView={isMobileView}
+                  completedLessons={completedLessons}
-                sidebarVisible={sidebarVisible}
+                  isMobileView={isMobileView}
-                setSidebarVisible={setSidebarVisible}
+                  sidebarVisible={sidebarVisible}
-                hideToggleButton={true}
+                  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}
-              />
             </div>
           )}
         </div>