Customizable Drawer width and Logo size and more

[mlromramse]

We have a hard time making Hajk look the way our UX department want.
I.e. They want the Drawer to be wider and the space for the Logo to be higher.

E.g. The Drawer has a default width of 250px and that we have managed to personalize hooking into the css-selector div.MuiDrawer-paper which isn't that big a deal but then we need to change the inset of the content areas in a more "risky" manner, like this css-selector: css-1t0519y,.css-sl68f9,.css-varayt{inset: 0 0 0 350px !important}

I would like you to add tag id and/or classes that we can use as part of a css-select without taking the risk that they will change name in the future. The drawer could have the id "drawer", the logo area could have id "logo" and the content areas could have ids that reflect their contents. I think you get the drift.

With these alterations we could just alter the static/client/index.css file with our tweaks and everyone will live happily ever after.

When looking at the Halmstad and Göteborg maps I think they also would benefit with this particular change.

Another, more complicated wish, is to be able to add a personalized header and footer to the entire page where we could integrate html that would make the map look like our map.
I my mind this is just two additional React components that are rendered when the are filled with content. The content could be administered via the admin page or as separate html pages in the client root-folder.

The Halmstad-kartan could look like this:

[jacobwod]

Sound like a good thing to be able to customise, at least on a deploy level (i.e. creating custom builds).

With the risk of not having the full picture: doesn't this selector (.MuiPaper-root.MuiDrawer-paper) work as you wish?

Of course, you will soon run into other issues and have to deal with the space hidden underneath the Drawer, as well as Map's width once Drawer becomes permanent (i.e. "locked"). It should be possible to find corresponding selectors though.

Looking forward a PR! 👍