remove empty space when sidebar closed, fix transition animation

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

@@ -125,12 +125,10 @@ const CourseSidebar = ({
       )}
       
       {/* Desktop sidebar */}
-      {!isMobileView && (
+      {!isMobileView && sidebarVisible && (
         <div className="relative flex flex-row-reverse z-[999]">
           <div 
-            className={`transition-all duration-500 ease-in-out flex ${
+            className={`transition-all duration-500 ease-in-out flex w-80 opacity-100`}
-              sidebarVisible ? 'w-80 opacity-100' : 'w-0 opacity-0 overflow-hidden'
-            }`}
           >
             <div className="ml-2 w-80 h-[calc(100vh-400px)] sticky overflow-hidden rounded-lg border border-gray-800 shadow-md bg-gray-800"
                  style={{ top: `${navbarHeight + 70}px` }}> {/* Adjusted to match new header spacing */}

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

@@ -278,20 +278,21 @@ const Course = () => {
           </div>
 
           {/* Course Sidebar - positioned absolutely on desktop when visible */}
-          {!isMobileView ? (
+          {!isMobileView && (
-            <div 
+            <div
-              className={`transition-all duration-500 ease-in-out ${
+              className={`transition-all duration-500 ease-in-out absolute top-0 right-0 w-[320px] h-full z-[999] overflow-visible
-                sidebarVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-full'
+                ${sidebarVisible ? 'opacity-100 translate-x-0 pointer-events-auto' : 'opacity-0 translate-x-full pointer-events-none'}
-              }`}
+              `}
               style={{
-                position: 'absolute',
+                // You can keep these if you want, but they're now in the className above
-                top: '0',
+                // position: 'absolute',
-                right: '0',
+                // top: '0',
-                width: '320px',
+                // right: '0',
-                height: '100%',
+                // width: '320px',
-                zIndex: 999,
+                // height: '100%',
-                overflow: 'visible',
+                // zIndex: 999,
-                pointerEvents: sidebarVisible ? 'auto' : 'none'
+                // overflow: 'visible',
+                // pointerEvents: sidebarVisible ? 'auto' : 'none'
               }}
             >
               <CourseSidebar
@@ -305,26 +306,6 @@ const Course = () => {
                 hideToggleButton={true}
               />
             </div>
-          ) : (
-            <div className={`flex-shrink-0 transition-all duration-300 z-[999] ${
-              (isMobileView && activeTab === 'lessons') ? 'ml-0 w-auto opacity-100' : 
-              'w-0 ml-0 opacity-0 overflow-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>
       </div>