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

Fix sidebar visibility state management to maintain single source of truth

Browse Source
This commit is contained in:
austinkelsay 2025-04-14 13:01:09 -05:00
parent b9d05f35e7
commit ad25f2454d
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE
1 changed files with 7 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/content/courses/CourseSidebar.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import React from 'react';
import { Tag } from 'primereact/tag'; import { Tag } from 'primereact/tag';
import Image from 'next/image'; import Image from 'next/image';
import { useImageProxy } from '@/hooks/useImageProxy'; import { useImageProxy } from '@/hooks/useImageProxy';
@ -11,26 +11,17 @@ const CourseSidebar = ({
completedLessons, completedLessons,
isMobileView, isMobileView,
onClose, onClose,
sidebarVisible: parentSidebarVisible, sidebarVisible,
setSidebarVisible, setSidebarVisible,
hideToggleButton = false, hideToggleButton = false,
}) => { }) => {
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const [visible, setVisible] = useState(true);
const navbarHeight = 60; // Match the navbar height const navbarHeight = 60; // Match the navbar height
// Sync with parent state if provided
useEffect(() => {
if (typeof parentSidebarVisible !== 'undefined') {
setVisible(parentSidebarVisible);
}
}, [parentSidebarVisible]);
const handleToggle = () => { const handleToggle = () => {
const newState = !visible; // Only use the parent's state setter
setVisible(newState);
if (setSidebarVisible) { if (setSidebarVisible) {
setSidebarVisible(newState); setSidebarVisible(!sidebarVisible);
} }
}; };
@ -86,7 +77,7 @@ const CourseSidebar = ({
<div className="flex flex-col h-full bg-gray-800 text-[#f8f8ff] pl-3 py-4"> <div className="flex flex-col h-full bg-gray-800 text-[#f8f8ff] pl-3 py-4">
<div className="flex items-center justify-between border-b border-gray-700 pb-4 mb-4"> <div className="flex items-center justify-between border-b border-gray-700 pb-4 mb-4">
<h2 className="font-bold text-white text-lg">Course Lessons</h2> <h2 className="font-bold text-white text-lg">Course Lessons</h2>
{visible && !hideToggleButton && !isMobileView && ( {sidebarVisible && !hideToggleButton && !isMobileView && (
<GenericButton <GenericButton
icon="pi pi-times" icon="pi pi-times"
onClick={handleToggle} onClick={handleToggle}
@ -126,7 +117,7 @@ const CourseSidebar = ({
return ( return (
<> <>
{/* Mobile view - direct content instead of sidebar */} {/* Mobile view - direct content instead of sidebar */}
{isMobileView && visible && ( {isMobileView && sidebarVisible && (
<MobileLessonsTab /> <MobileLessonsTab />
)} )}
@ -135,7 +126,7 @@ const CourseSidebar = ({
<div className="relative flex flex-row-reverse z-[999]"> <div className="relative flex flex-row-reverse z-[999]">
<div <div
className={`transition-all duration-500 ease-in-out flex ${ className={`transition-all duration-500 ease-in-out flex ${
visible ? 'w-80 opacity-100' : 'w-0 opacity-0 overflow-hidden' 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" <div className="ml-2 w-80 h-[calc(100vh-400px)] sticky overflow-hidden rounded-lg border border-gray-800 shadow-md bg-gray-800"