Fix: Navbar and LogoComponent: Eliminate duplicate header logos

[JoshDevHub]

The navbar duplicates a home link under the logo in the top-left. One of the links hides its logo at smaller screens and the other hides it at larger screens, but both links always remain in the navbar, which presents an accessibility issue and confusing tab navigation behavior.

This PR:

• Adds a slot to render a small_icon in the logo component.
• Removes the duplicate link in the navbar and replaces with a LogoComponent render using the small_icon slot.

Issue

Closes #5200

Additional Things

Willing to change the style things. I figured it'd be nice to fully embed the display toggling when the small logo is present (so the small logo always has "block lg:hidden", and the larger icon always has "hidden lg:block" when the small icon is there) because I figured there'd be no conceivable scenario where you'd want to display both of them at the same time. But I also realize it's adding some small behavior to the component that didn't really have much before. Would be glad to change to all styles coming from the outside if that's preferred.

QA

• Open any page and look at the navbar
• Confirm that there's only one Home Link
• At a tablet sized width just above the breakpoint to mobile, the logo should be small (without the 'Odin Project' text)
• At a wide view, the logo should be wide (including the 'Odin Project' text)
• Also potentially good to sanity check other LogoComponent renders (like the footer or the mobile sidenav menu) to make sure nothing is wrong with them (I don't see any issues)

[dsmchen]

Issue

Closes #5202

Hey @JoshDevHub, this should be #5200. :)

[JoshDevHub]

Thanks for the correction 😅

[KevinMulhern]

LGTM, nice work @JoshDevHub!