Migrating navbar to tailwind and implementing mobile design

[co-decode]

WIP: Would resolve #992
I am in the process of migrating the navbar styling to tailwind.
At the moment I'm just doing a translation of styles I see in our css files, so it's all a bit messy.

I am also trying to implement the mobile design mentioned in issue #992 for screen widths under 640px.
This is what I have so far:

Question: What should clicking the settings button on the left do?
Perhaps slide out a menu like in the design:

Other things to mention:

• I have changed the logo image file to the larger version as the small version was cropped at the top and a little grainy.
• I have removed the duplicate search bar that was appearing below 953px

[fredfalcon]

Looks good! Slide out or down menu is good. As long as it’s fast / snappy.

[AtmegaBuzz]

Nice!, Looks awesome

[AtmegaBuzz]

Hey @co-decode. you can join BLT slack for better communication and further discussions. https://owasp.org/slack/invite

[co-decode]

Thank you, I have accepted your invitation!

1. I have fixed some responsiveness issues with the avatar dropdown ( on the right when the user is logged in ) and with the search bar overlapping the signup and login buttons at small screen widths.

2. I have kept the dropdown for the settings icon simple and in line with the style of the avatar dropdown:

Here's what it looks like above 640px.

Things to mention:

• I have added an option to test.py to specify screen width. I was thinking of hiding the username under the avatar at small screen widths, but I'll just leave it for now.
• There is a manual CSS breakpoint at 420px in navbar.css to hide the search icon, this isn't the cleanest solution but it does make things work for mobile screens down to about 370px.

[fredfalcon]

Thank you! Looks great