Add global shared UI Header component to the root layout file

[nozomione]

Context

Resource: Next.js: Migrate routing hooks

Currently, the following UI components are shared globally and rendered in the Layout component for the page router:

• Band
  • ParticlesBg
• BackToTopButton
• Header
  • GlobalNav
  • GithubAnchor
  • LogoAnchor
  • NavDropDown
  • NavIcon
  • NavLink
• Footer
• Notification
• PageTitle

In this issue, we want to render Header in the root layout of the app router. We'll also need to migrate the routing hook useRouter.

Problem or idea

As stated above, refactor the Header component and render it in the root layout of the app router.

Solution or next step

• Refactor Header and adjust the sub-components as necessary
• Add it to the root layout in the app folder