Volunteer Events Page Side View Mobile Bug

[NwinNwin]

Description

• Currently, when viewing Volunteer Event Page in Mobile, clicking on an event in upcoming events will shows the buggy sideview like the image above
  • This is because the code for VolunteerSideView is only made for desktop view

To do

• To fix this, make a new component called VolunteerSideViewDrawer.jsx

  • This will be a ChakraUI Drawer that has a size of full
  • Read the documentation about Drawer and try this demo to learn more about size = full
    -

• This VolunteerSideViewDrawer will have the same design as the VolunteerSideView but it is a drawer that will cover the whole screen when open to avoid components being on top of each other.

• Use const { isOpen: isDrawerOpen, onOpen: onDrawerOpen, onClose: onDrawerClose } = useDisclosure() in VolunteerEventPage.jsx and pass those as prop to VolunteerSideViewDrawer in order for the drawer to work

• Please ask us if you have questions about anything!

Resources

• Figma