docs: Add menu drawer toggle to header on smaller viewports

[joestrouth1]

See #87

Adds a 'Menu' button the the site header which opens the navigation drawer when clicked.

>=1220px wide (unchanged):

Tablet:

It needs work on phones. The header is already too wide for small (iPhone SE) screens and adding a menu/drawer toggle worsens the problem.

Some options for shrinking the width of header contents:

• Swap 'Menu' for an icon
• hide 'Docs' link since the menu drawer lists all the docs pages
• hide GH/discord icons in sm-md header
  • maybe override the drawer or footer to show them there

[dmarcos]

Oh wow. this is awesome. It looks good. Gonna give it a try tomorrow before merge. Thanks so much for the effort

[dmarcos]

iphone SE is as small as phones can be these days and you have space from screenshot above. reduce left margin / padding of the magnifiying lense and use a "menu icon" instead of menu word

[joestrouth1]

Most recent changes:

• swaps 'Menu' for a material icon
• reduces inline padding on the header.md-header by half from 20px to 10px on small viewports
• reduces padding around the Search and Menu buttons by half from 8px to 4px on small viewports
  • The size of each button decreases to 32px square which is between WCAG's minimum target size of 24px and their enhanced recommendation of 44px
• reduces the gap between items in the .md-custom-header-right section from 1rem to 0.5rem on small viewports
  • moves the GH icon into the .md-custom-header-right and removes margin-right (relying on gap instead)

iPhone SE:

iPhone 14 Pro Max:

iPad Mini:

iPad Pro / laptop class:

[dmarcos]

Thanks so much. Icons should be probably spread more evenly and centered in the header in mobile screens. Also can we put the spark logo on the mobile menu vs the default one?