Fix chevron toggle in Guides section of Sidebar #1567
Conversation
There was a problem hiding this comment.
Hey @Utkarsh-123github, thanks for working on this and fixing the issue. This solution resolves the problem.
However, @benjagm, after reviewing the current code design and implementation, I believe that this isn't the correct design pattern to begin with. While this fix works for now, I think we should consider refactoring it in the future to follow a more scalable and maintainable design pattern.
|
Hey @DarhkVoyd, I appreciate your insights on the current design pattern. For the GSoC 2025 season, there's a project focused on adapting a UI component library for our JSON Schema website. Implementing this project will help us structure and maintain components more effectively, making future refactoring much smoother and ensuring a more scalable and maintainable design. |
|
So, I believe the issue you mentioned can be addressed within the scope of the project implementation. |
I misunderstood your comment. I see if we are planning to replace the sidebar too, that would fix this. 👍🏻 const [active, setActive] = useState({
getDocs: false,
getStarted: false,
getGuides: false,
getReference: false,
getSpecification: false,
});
useEffect(() => {
const pathWtihoutFragment = extractPathWithoutFragment(router.asPath);
const newActive = {
getDocs: false,
getStarted: false,
getGuides: false,
getReference: false,
getSpecification: false,
};
if (getDocsPath.includes(pathWtihoutFragment)) {
newActive.getDocs = true;
} else if (getStartedPath.includes(pathWtihoutFragment)) {
newActive.getStarted = true;
setActive({ ...active, getStarted: true });
} else if (getReferencePath.includes(pathWtihoutFragment)) {
newActive.getReference = true;
} else if (getSpecificationPath.includes(pathWtihoutFragment)) {
newActive.getSpecification = true;
} else if (getGuidesPath.includes(pathWtihoutFragment)) {
newActive.getGuides = true;
}
setActive(newActive);
}, [router.asPath]);
const handleClickDoc = () => {
setActive({
getDocs: !active.getDocs,
getStarted: false,
getReference: false,
getSpecification: false,
getGuides: false,
});
};
const handleClickGet = () => {
setActive({
getDocs: false,
getStarted: !active.getStarted,
getReference: false,
getSpecification: false,
getGuides: false,
});
};
const handleClickReference = () => {
setActive({
getDocs: false,
getStarted: false,
getReference: !active.getReference,
getSpecification: false,
getGuides: false,
});
};
const handleClickGuides = () => {
setActive({
getDocs: false,
getStarted: false,
getGuides: !active.getGuides,
getReference: false,
getSpecification: false,
});
};
const handleClickSpec = () => {
setActive({
getDocs: false,
getStarted: false,
getGuides: false,
getReference: false,
getSpecification: !active.getSpecification,
});
};
const rotate = active.getDocs ? 'rotate(180deg)' : 'rotate(0)';
const rotateG = active.getStarted ? 'rotate(180deg)' : 'rotate(0)';
const rotateR = active.getReference ? 'rotate(180deg)' : 'rotate(0)';
const rotateSpec = active.getSpecification ? 'rotate(180deg)' : 'rotate(0)';
const rotateGuides = active.getGuides ? 'rotate(180deg)' : 'rotate(0)'; |
|
@DarhkVoyd , the goal of the project is to adapt components from modern libraries. As part of this, we will be replacing necessary components such as the sidebar, buttons, accordion, and cards etc with those from the selected library while maintaining the current design and functionality and this will also avoid redundancy and duplication of code. As a result this update will also address the issue you raised. |
|
Hey @Utkarsh-123github, I noticed that the animation on the Guides section is still not behaving correctly. You should add the missing animation logic in line 614 to ensure consistency. className={classnames(
'ml-6',
'transition-all duration-500 ease-in-out',
{
'max-h-0 opacity-0 overflow-hidden': !active.getGuides,
'max-h-80 opacity-100': active.getGuides,
},
)} |
|
@idanidan29 can you elaborate more like screenshot/video , because I didn't get what you are asking to do ?? |
|
Sure @Utkarsh-123github, Currently, there's a smooth animation transition when opening and closing all sections except for the Guides section. For example, you can see the changes in the transition in the video here: Recording.2025-03-24.160032.mp4The code shipment I added can help adjust this. Let me know if more elaboration is needed. I hope this helps |
|
Thanks @idanidan29 for noticing the minute details and bringing them to my attention.🚀🚀 |
|
Thanks for your PR🚀🚀 |
|
Hi @DhairyaMajmudar I hope you're doing well. When you have a moment, could you kindly review this PR at your convenience? I would really appreciate it. Thank you! |
There was a problem hiding this comment.
Thanks for the PR @Utkarsh-123github it is working fine.
My thoughts also aligns with the comments of @DarhkVoyd
What kind of change does this PR introduce?
bugfix : This PR fixes the toggle of Chevron in guides section of sidebar
Issue Number:
Screenshots/videos:
Screen.Recording.2025-03-19.170828.mp4
Summary
This PR confirms that chevrons in guides section of sidebar gets perfectly toggled on click.
Does this PR introduce a breaking change?
No
Checklist
Please ensure the following tasks are completed before submitting this pull request.