178 volunteer events page side view mobile bug

[farahnazhoque]

No description provided.

[NwinNwin]

Hello, Thank you for submitting the PR. However, there are some flaws in the desktop view in your PR

• 

• Sorry for the misunderstanding but for this sprint, we want only use the drawer when the our site is in the iPhone View

• When in Desktop View, we want to still keep the tab implementation (like below)

  • 

Recommendations:

First Step:

• In order to address the issue effectively, it is recommended to carefully review the problem and create a new component named VolunteerSideViewDrawer. This new component should encapsulate the ChakraUI Drawer components, rather than making modifications to the existing VolunteerSideView component.
• The VolunteerSideViewDrawer component should receive isOpen, onClose, and onOpen props from VolunteerEventPage.jsx.

Second Step:

• Ensure that VolunteerEventPage does not directly import any Drawer components from ChakraUI. These imports should be handled within the VolunteerSideViewDrawer component.
• VolunteerEventPage should solely import and utilize useDisclosure for managing the drawer's opening status.

Third Step:

• Leverage ChakraUI Breakpoints to conditionally display either the VolunteerSideView or VolunteerSideViewDrawer components based on the screen size.
• When incorporating ChakraUI breakpoints, remember to utilize md for mobile screen sizes to ensure a responsive design.

[NwinNwin]

Thank you for working on the requested changes ;)))