Homework: Make the header and home page mobile-friendly

The current implementation of the header is not mobile-friendly, especially when the user is logged in. The table of listings currently does not render nicely on narrow devices such as a phone.

1. Update the header navigation buttons to collapse into a nice button as it does in the bootstrap navbar docs. There are more navbar examples on the bootstrap examples page. Scroll down about halfway to the Navbars section.
2. When the user is on the main listings page and on a small device (e.g. a phone), the table of listings should only show the minimum information necessary - the listing name and perhaps the price.

NOTES

• As an FYI, we may be updating the header bar with more buttons!
• Making the listings table "mobile-friendly" can be anything that looks good and what's listed above is merely a suggestion. Be creative, make it look nice. Perhaps consider using bootstrap cards as an alternative to a table when on a narrow device.

Start by locating the header navigation and the main listings page, then compare their current layout with the Bootstrap navbar and card examples linked in the issue. The work is done when logged-in navigation collapses cleanly on narrow screens and listings show only essential information, such as the name and price, without awkward table rendering.