Redesign navbar

[jarrodmillman]

Investigate PST navbar styling. We won't do the exact same, but there are a couple of things to look into.

• dropdown menu items
  • button instead of link
  • use click instead of hover for dropdown
    • https://wecreate.digital/blog/menu-clicks-vs-hover/
• how to use header, nav, div, ul, li, button, etc...
• should hamburger menu use spans or svgs (or should it say menu)
• should navbar be full device width
• what are best breakpoints?

[smeragoel]

I found some issues with the navbar (some of them might be covered by these changes suggested above):

1. The logo on the navbar should be left aligned with the rest of the content on the page.

2. The dropdown has some empty/placeholder menu items.
   

3. The theme is using the system theme for choosing between light / dark theme, but we should have a theme switcher on the navbar as well.

4. The navbar content seems to be "floating" right now, because the navbar colour is the same as the page background colour, and there is no stroke on the bottom of the navbar to diifferentiate it from the rest of the page. I can work on the design if you agree with my suggestion!

[stefanv]

Navbar is still styled to fade in, e.g., when switching light to dark theme. Search for transition: to locate these.

[Bashamega]

Hello :)
I would like to work on this issue.
All I need is for you to assign me the issue and tell me which file is the nav bar in.

[jarrodmillman]

@Bashamega Thanks for volunteering. This is probably not a good place to start as we still haven't figured out what the new design will be. I see that pybamm.org is using the theme. You should take a look at #602. There will be a few breaking changes in the next release that you should pay attention to, which I will gather in #602.