Add a drawer with filters for mobile use on exercise overview page

[StijnKing]

On the exercise overview page, the filters are now placed in a drawer.

See: #466

I noticed that there is a padding for the entire page on this screen when shown in mobile format. I tried to remove that but failed. Its already there before these changes.

I refactored the code a bit and introduced a context which means that you don't have to pass the state to other components anymore. I also use a memo for the calculation of filteredExercises to prevent it from recalculating on every re-render if the data hasn't changed. Please let me know what you think.

I couldn't find how to add new translations, so I still need to translate the word Filters. How can I add such translation?

Screenshots:

[rolandgeider]

oh this is great!!

To add a new translation you just need to add a new string to public/locales/en/translation.json, then do const [t, i18n] = useTranslation(); and access it somewhere with {t('foo')}

[StijnKing]

I added the translation :)

[rolandgeider]

Merged 💪🏻