What does this mr do?

Apply a whole bunch of small UI changes and solve some UI bugs.

• Change the "notification bell icon" to "notifications" on a medium sized screen
• Switch queue and hamburger menu (on mobile) → keep the menu positions consistent
• Show in the mobile menu if you have notifications
• Make selected menu item more subtle, not black. E.g. underline or dark blue
• Add animation to hamburger menu
• Fix personal user menu to match the whole menu
• Fix the footer on mobile such that the logo and the privacy statement are next to each other
• Give footer a margin-top to get a separation on mobile
• Add margins to mobile course view
• On notifications page (mobile), opening the menu => notifications item flashes blue
• On notifications page (mobile), make title and clear all button fit on one line
• While enqueued, the position in the queue is the most important => increase font of the number/center it
• Show rooms in lab info in a more structured way

Screenshots

• Change the "notification bell icon" to "notifications" on a medium sized screen

• Switch queue and hamburger menu (on mobile) → keep the menu positions consistent

• Show in the mobile menu if you have notifications

• Make selected menu item more subtle

• Fix personal user menu to match the whole menu

• Fix the footer on mobile such that the logo and the privacy statement are next to each other

• Add margins to mobile course view

• On notifications page (mobile), make title and clear all button fit on one line

• While enqueued, the position in the queue is the most important => increase font of the number/center it

• Show rooms in lab info in a more structured way

Does this MR meet the acceptance criteria?

• I have added a changelog entry to reflect the significant changes I made.
• Tests were created to test the feature.
• I have updated the documentation accordingly.
• I adhere to the style guide.

Closes #294 (closed)