fix(OnyxFlyoutMenu): Fix OnyxFlyoutMenu opening behavior (#2516)

<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

Relates to #2293 

- When the flyout menu opens on click, should be closed on the second
click of the button
- Decreased the gap between "more button" and flyout to 8px (0.5 rem)

## Checklist

- [x] The added / edited code has been documented with
[JSDoc](https://jsdoc.app/about-getting-started)
- [x] All changes are documented in the documentation app (folder
`apps/docs`)
- [x] If a new component is added, at least one [Playwright screenshot
test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml)
is added
- [x] A changeset is added with `npx changeset add` if your changes
should be released as npm package (because they affect the library
usage)

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/nine-radios-thank.md

@@ -0,0 +1,6 @@
+---
+"@sit-onyx/headless": minor
+"sit-onyx": minor
+---
+
+fix(OnyxFlyoutMenu): When the flyout menu opens on click, should be closed on the second click of the button. Decreased the gap between "more button" and flyout to 8px (0.5 rem)

packages/headless/src/composables/menuButton/createMenuButton.ts

@@ -107,11 +107,7 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
   };
 
   const triggerEvents = () => {
-    if (options.trigger.value === "click") {
-      return {
-        onClick: () => setExpanded(true),
-      };
-    } else {
+    if (options.trigger.value === "hover") {
       return {
         onMouseenter: () => setExpanded(true),
         onMouseleave: () => setExpanded(false, true),
@@ -142,7 +138,9 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
             "aria-controls": menuId,
             "aria-expanded": options.isExpanded.value,
             "aria-haspopup": true,
-            onFocus: () => setExpanded(true),
+            onFocus: () => setExpanded(true, true),
+            onClick: () =>
+              options.trigger.value == "click" ? setExpanded(!options.isExpanded.value) : undefined,
             id: buttonId,
           }) as const,
       ),

packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue

@@ -195,6 +195,10 @@ $gap: var(--onyx-spacing-md);
   @include layers.component() {
     --nav-bar-height: 3.5rem;
 
+    .onyx-flyout-menu {
+      --onyx-flyout-menu-gap: var(--onyx-spacing-md);
+    }
+
     background-color: var(--onyx-color-base-background-blank);
     font-family: var(--onyx-font-family);
     color: var(--onyx-color-text-icons-neutral-intense);

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue

@@ -87,13 +87,14 @@ const {
 
 .onyx-flyout-menu {
   @include layers.component() {
+    --onyx-flyout-menu-gap: var(--onyx-spacing-2xs);
     display: inline-flex;
     width: min-content;
     position: relative;
 
     &__list {
       position: absolute;
-      top: calc(100% + var(--onyx-spacing-sm));
+      top: calc(100% + var(--onyx-flyout-menu-gap));
       border-radius: var(--onyx-radius-md);
       background-color: var(--onyx-color-base-background-blank);
       padding: var(--onyx-spacing-2xs) 0;