[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`.
Konyaco · Feb 5, 2025 · e524be6 · e524be6
1 parent eec43e1
commit e524be6
Showing 1 changed file with 16 additions and 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
@@ -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 {