From e524be6fe9ca1722b6aa5614d6068133c3420255 Mon Sep 17 00:00:00 2001
From: Sanlorng <fujia625@gmail.com>
Date: Wed, 5 Feb 2025 21:00:20 +0800
Subject: [PATCH] [fluent] Refactor: Improve TopNav layout and behavior

This commit refactors the `TopNav` component to improve its layout and behavior.

The layout of the `TopNav` component is improved by modifying the position of MenuFlyout, move it into the Box.

The behavior is improved by adding `flyoutAnchor` to the `HorizontalIndicatorContentLayout`.
---
 .../com/konyaco/fluent/component/TopNav.kt    | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/fluent/src/commonMain/kotlin/com/konyaco/fluent/component/TopNav.kt b/fluent/src/commonMain/kotlin/com/konyaco/fluent/component/TopNav.kt
index 9c24952b..ed38d024 100644
--- a/fluent/src/commonMain/kotlin/com/konyaco/fluent/component/TopNav.kt
+++ b/fluent/src/commonMain/kotlin/com/konyaco/fluent/component/TopNav.kt
@@ -174,24 +174,24 @@ fun TopNavItem(
             )
     ) {
         FlyoutAnchorScope {
-            MenuFlyout(
-                visible = flyoutVisible && items != null,
-                onDismissRequest = {
-                    onFlyoutVisibleChanged(false)
-                },
-                placement = FlyoutPlacement.Bottom,
-                modifier = Modifier.flyoutSize()
-            ) {
-                items?.invoke(
-                    rememberNavigationItemsFlyoutScope(
-                        flyoutVisible,
-                        onFlyoutVisibleChanged
-                    )
-                )
-            }
             Box {
+                MenuFlyout(
+                    visible = flyoutVisible && items != null,
+                    onDismissRequest = {
+                        onFlyoutVisibleChanged(false)
+                    },
+                    placement = FlyoutPlacement.Bottom,
+                    modifier = Modifier.flyoutSize()
+                ) {
+                    items?.invoke(
+                        rememberNavigationItemsFlyoutScope(
+                            flyoutVisible,
+                            onFlyoutVisibleChanged
+                        )
+                    )
+                }
                 HorizontalIndicatorContentLayout(
-                    modifier = Modifier.height(40.dp),
+                    modifier = Modifier.height(40.dp).flyoutAnchor(),
                     text = text,
                     icon = icon,
                     trailing = items?.let {