Fix/enable custom class in TopNavigation to be passed to PopOver (#2280)

* Extend the ProfileMenu props to accept a className to be passed to Popover

* Pass fallbackPlacements as [] to disable PopOver flipping behavior

* Add changeset

.changeset/blue-buses-cough.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Inside `TopNavigation`, extended `ProfileMenu`'s props to accept a class name to be passed to the `ProfileMenu`'s `PopOver` component. Passed an empty array for the `fallbackPlacements` prop to the `PopOver` used by `TopNavigation` to disable the flipping behavior.

packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx

@@ -67,6 +67,7 @@ export const baseArgs: TopNavigationProps = {
         destructive: true,
       },
     ],
+    className: 'custom-class-name',
   },
   links: [
     {

packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx

@@ -84,13 +84,18 @@ export interface ProfileMenuProps extends ProfileProps {
    * Function that is called when opening and closing the ProfileMenu.
    */
   onToggle?: (isOpen: boolean) => void;
+  /**
+   * className for the Popover component.
+   */
+  className?: string | undefined;
 }
 
 export function ProfileMenu({
   user,
   label,
   actions,
   onToggle,
+  className,
 }: ProfileMenuProps): JSX.Element {
   const [isOpen, setOpen] = useState(false);
   const offset = { mainAxis: 8, crossAxis: -16 };
@@ -110,7 +115,9 @@ export function ProfileMenu({
       )}
       actions={actions}
       placement="bottom-end"
+      fallbackPlacements={[]}
       offset={offset}
+      className={className}
     />
   );
 }