Fix sidebar rendering on page load

[brks]

Along with the issue concerning the sizing of the GitHub icon on the homepage raised in #28, there was an issue with the rendering of the sidebar that is explained in detail in #32. This pull request should prevent that issue from occurring and when paired with the fix in #31, prevent any kind of rendering issues on page load.

[lucasjohnston]

👋Thanks for your contribution!
At Monzo we try to avoid using css class names anywhere unless we absolutely have to, so we would approach this slightly differently.

Instead of this:

<Sidebar className={isSidebarVisible ? 'visible' : null}>
    ...
</Sidebar>

display: none;
&.visible {
    display: flex;
}

We would approach it like this:

<Sidebar visible={isSidebarVisible}>
    ...
</Sidebar>

display: none;
${props =>
    props.visible &&
    css`
      display: flex;
    `}

However, in any case, I'm actually going to be moving all of the logic out of react and into css media queries next week, so I don't think we'll be merging this PR - apologies about that. Thank you for offering your help and time on this ❤️

[brks]

@lucasjohnston no worries, thank you for the heads up! Happy to try and help out even though it's not the solution you were looking for 😄