Iterate on navigation header

[humphd]

During user testing, we got bunch of feedback about the header. It might be good to iterate on this a bit. Specifically:

• move the My.Custom.Domain title to the left, make it smaller
• consider adding a logo. We actually have one we could use, see https://github.com/DevelopingSpace/starchart/blob/main/public/icon-96.png (this is our favicon)
• move the DNS Records and Certificate "buttons" to the right near the username/avatar
• make the DNS Records and Certificate "buttons" look more like buttons. Maybe with a hover treatment? Maybe with borders?

https://chakra-templates.dev/navigation/navbar has some simple options using Chakra.

[Ririio]

consider adding a logo. We actually have one we could use, see

With the length of the name of our web app, would it really be wise to add a logo? Usually other websites only have either the logo or a png of the logo and name. Also, doesn't our logo look similar to the certificate icon?

move the DNS Records and Certificate "buttons" to the right near the username/avatar

Wouldn't this make user think that username is clickable? Also, I think it's not a bad idea to keep all navigation buttons to be near each other if we include this issue

Example 1

Example 2