Add header and footer options to GlDropdown

What does this MR do?

This adds non-scrolling header and footer sections to the GlDropdown component via slots.

Usage:

<gl-dropdown headerText="Header">
  <template #header>
    <gl-search-box-by-type />
  </template>
  <gl-dropdown-item>First item</gl-dropdown-item>
  <gl-dropdown-item>Second item</gl-dropdown-item>
  <gl-dropdown-item>Third item</gl-dropdown-item>
  <gl-dropdown-item>Fourth item</gl-dropdown-item>
  <gl-dropdown-item>Fifth item</gl-dropdown-item>
  <gl-dropdown-item>Sixth item</gl-dropdown-item>
  <gl-dropdown-item>Seventh item</gl-dropdown-item>
  <gl-dropdown-item>Eigth item</gl-dropdown-item>
  <template #footer>
    <gl-dropdown-divider />
    <gl-dropdown-item>First footer item</gl-dropdown-item>
    <gl-dropdown-item>Second footer item</gl-dropdown-item>
  </template>
</gl-dropdown>

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: mr_url
  • CustomersDot: mr_url
  • Status Page: mr_url
• Added the ~"component:*" label(s) if applicable.

Closes #1002 (closed)