saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-03 07:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove empty space when sidebar closed, fix transition animation

Browse Source
This commit is contained in:
austinkelsay 2025-05-12 12:47:48 -05:00
parent e20bf4e961
commit a0c53e9d5a
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE
2 changed files with 16 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 ${
sidebarVisible ? 'w-80 opacity-100' : 'w-0 opacity-0 overflow-hidden'
}`}
className={`transition-all duration-500 ease-in-out flex w-80 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"
style={{ top: `${navbarHeight + 70}px` }}> {/* Adjusted to match new header spacing */}

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

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