Make Header component responsive

[elvismdev]

Currently the header component looks correct on desktop screens, but doesn't have responsiveness on smaller screens, specially on mobile views. This header component is a clone from the one in OpenSea.io so it should have a responsiveness exactly similar to how it works in OpenSea.

AC:

• Make Header component to work responsive exactly as how it does in OpenSea.io
  • (see GIF video or try it from the browser directly visual reference about how the UI/UX should be like, and capture CSS rules that should be applied on the CubanSea platform)

Technical Notes:

• Do not branch out from the main branch for this task. Instead branch out from https://github.com/parenthesislab/cubansea/tree/19-create-a-template-like-opensea which is where the OpenSea theme is being applied.

Resources:

• To make the hamburger icon open a drawer React component just like OpenSea: https://rsuitejs.com/components/drawer/
• Material Icons from the React Icons package: https://react-icons.github.io/react-icons/icons?name=md
  • Mobile (hamburger) menu to use: MdMenu
  • Can be pulled into the Header.js component like this: import { MdOutlineAccountBalanceWallet, MdMenu } from "react-icons/md";
• https://www.section.io/engineering-education/creating-a-responsive-navigation-bar-using-tailwind-css-and-javascript/

[karenkitchens]

Going to use DaisyUi rather than rsuite for the mobile menu drawer since it is a Tailwind plugin, and will add less overhead.