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

Merge pull request #72 from AustinKelsay/bugfix/course-sidebar-spacing-glitch

Browse Source 
remove empty space when sidebar closed, fix transition animation
This commit is contained in:
Austin Kelsay 2025-05-12 12:53:44 -05:00 committed by GitHub
commit 514eeb5126
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 39 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 */}

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

@ -278,21 +278,11 @@ 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'
}`}
style={{
position: 'absolute',
top: '0',
right: '0',
width: '320px',
height: '100%',
zIndex: 999,
overflow: 'visible',
pointerEvents: sidebarVisible ? 'auto' : 'none'
}}
{!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'}
`}
>
<CourseSidebar
lessons={uniqueLessons}
@ -305,26 +295,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>