Burger menu

[awalsh3]

ISSUE: #6

This proposed PR adds a burger menu with drop-down links for mobile rendering. This uses tailwind css and plain vanilla javascript.

A few questions/notes:

• It needs some styling decisions. I've left it as close to the main navbar as possible for now. Happy to adjust where needed.
• The drop-down links inherit the same classes used by the _links.html.erb shared partial. To change the styling we could either add another partial for mobile links or add code to the existing links partial if any adjustments are needed?
• I am having a little formatting issue with the drop-down vs the margin of the existing page. I am new to Turbo and not sure if there is something I am missing in the formatting. A quick fix is adding an id to the application template but I can work on a better solution.
• Testing has all been manually done. What is the protocol for testing?

A start for now! Please let me know what can be improved.

Photos below:

.

.

[yshmarov]

at this point this is just vanilla js stored in a folder for stimulus controllers.

why don't you use an actual stimulus controller? :)

[awalsh3]

Great point! I am new to stimulus but I should follow the convention. I will work on it sometime this week. Thanks!

[adrienpoly]

hello @awalsh3 thanks for taking this issue.

I would like to suggest an alternative path at the same time with less JS or maybe none. the details/summary html tags can be used to create dropdowns. This is What Basecamp uses in Hey as an example

Here is an article on that subject but they are also several others available :

https://dev.to/ayushn21/details-summary-tags-html-s-best-kept-secret-4ak4

[awalsh3]

Ok! I can take a look. So would you want something like this then? Talks, Speakers, Github icon and contribute button to dropdown on the right side?

[adrienpoly]

When I mentioned Basecamp/Hey it was more for the technical part not really the way it looks. Your personal site looks clean I am sure you can make a good judgement on what looks best. I don't have a very strong option on this.