sidebar made responsive

[MImran2002]

Issue #372

Issue Description: The page that students use to record their overload reason is terrible on phones. See if there is a way to fix that without worrying about fixing all of LSF.

Issue Fixed:
sidebar.html: Created a hamburger UI button when the side bar collapsed
sidebar.js: Created functions for sidebar to expand and collapse.
sidebar.css: Created media-queries and transition for the sidebar to be responsive

Issue potential question:
Why am I not using bootstrap?
Bootstrap in LSF is outdated and if bootstrap CDN is used the whole LSF design changed and messed up the UI. Which is why media-queries are used for sidebar.

Why made the sidebar responsive when the issue description is about fixing overload responsiveness?
As per the picture we can see if we allow side bar to be collapsible we made not just the overload page but the whole feature responsive as the sidebar in a fixed position causes the UI to not be responsive.

When sidebar collapsed in mobile width:

When sidebar expanded in a mobile width:

Testing:

• Checkout the branch at git checkout sidebarResponsive
• Pull the changes git pull
• run the application flask run
• When the application run, resize the application to see the side bar collapsed.
• If you want to see the overload page being responsive navigate to the sidebar > Labor Status Form > Create a new labor status form and to trigger an overload set the hours to 15 which will trigger a modal notifying you the overload.
• Click submit navigate to Sidebar > Administration > Pending Forms > And follow the steps to the point the forms goes from pre-student approval to pending form to form being accepted.
• In doing so you will receive an email asking you to fill the reason for the overload form and that is where you can also test the responsiveness.

[JohnCox2211]

Upon a quick lookover, I noticed there is a duplicate function

[JohnCox2211]

duplicate function

[JohnCox2211]

There is an additional issue with the modal for the labor history page for the student's labor forms appearing too large when opened and a lot of it hangs off of the screen

[JohnCox2211]

Encountered an issue with the overload acceptance page when clicking the new sidebar button. The button popped to the middle of the screen and dimmed the screen as if the sidebar had opened, but it did not appear. When expanding the size of the screen, the new sidebar completely disappeared and did not reappear with a refresh.

[Arohasina]

extra blank spaces