Fix chevron toggle in Guides section of Sidebar

[Utkarsh-123github]

What kind of change does this PR introduce? bugfix : This PR fixes the toggle of Chevron in guides section of sidebar

Issue Number:

• Closes #1559

Screenshots/videos:

https://github.com/user-attachments/assets/99ddc748-0851-419b-b0e8-3b980a63aaa4

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.

• [x] Read, understood, and followed the contributing guidelines.

[Utkarsh-123github]

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.

[Utkarsh-123github]

So, I believe the issue you mentioned can be addressed within the scope of the project implementation. Let me know your thoughts!

[DarhkVoyd]

So, I believe the issue you mentioned can be addressed within the scope of the project implementation. Let me know your thoughts!

~~I don't see how migrating to a component library directly addresses this issue. If my concern wasn't clear, I meant that this implementation introduces redundant and duplicate code.~~

~~For example, the state structure and the multiple handleClick functions follow a repetitive pattern. Instead of managing separate boolean flags for each item, a more scalable approach could be using a single state variable that tracks the active section dynamically.~~

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)';

[Utkarsh-123github]

@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.

[idanidan29]

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,
            },
          )}

[Utkarsh-123github]

@idanidan29 can you elaborate more like screenshot/video , because I didn't get what you are asking to do ??

[idanidan29]

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:

Video Example

The code shipment I added can help adjust this. Let me know if more elaboration is needed. I hope this helps

[Utkarsh-123github]

Thanks @idanidan29 for noticing the minute details and bringing them to my attention.🚀🚀

[idanidan29]

Thanks for your PR🚀🚀

[Utkarsh-123github]

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!

[Utkarsh-123github]

As mentioned by @benjagm that issue related to this PR will be resolved in GSoC component library project, here : https://github.com/json-schema-org/website/issues/1559#issuecomment-2924814965 So, I am closing my PR.