---
lang: ja-jp
breaks: true
---
# Blazor FluentNavMenu を 狭い画面で表示したとき（Owner.Expanded==false）に、FluentNavGroup の ExpandIcon をクリックすると閉じてしまう 2024-01-18

Visual Studioテンプレートから作成したプロジェクトを使用。


以下をクリックするとメニューが閉じてしまう


## デモサイトでは閉じることなく動作する

* https://www.fluentui-blazor.net/

* デモサイトの `FluentNavMenu` を使用している箇所
https://github.com/microsoft/fluentui-blazor/blob/main/examples/Demo/Shared/Shared/DemoNavMenu.razor


:::info
デモサイトの `FluentUI.Demo.Server` をデバッグ実行すると閉じてしまう。。なぜ？？
:::

## 「Fluent Blazor WebAssembly スタンドアロン アプリ」から作成したプロジェクトだと正常に動作する。


## 以下のように変更すると問題なく動作する

### `NavMenu.razor.js` を追加

function onclick_sitenav(
    event
    )
{
    let navmenu_toggle = document.getElementById('navmenu-toggle');
    if (navmenu_toggle == null)
    {
        return;
    }
    if (navmenu_toggle.computedStyleMap().get('display').value != 'none')
    {

        var doClose = true;

        var count = 0;
        var target = event.target;
        while (target != null)
        {
            var classList = target.classList;
            if (classList == null) {
                break;
            }

            if (classList.contains('fluent-nav-item')) {
                if (classList.contains('fluent-nav-group')) {
                    doClose = false;
                }
                break;
            }

            target = target.parentElement;

            count++;
            if (count > 5) {
                break;
            }
        }

        if (doClose)
        {
            navmenu_toggle.click();
        }
    }
}

### `NavMenu.razor` を変更

* `<script src="/Components/Layout/NavMenu.razor.js"></script>` を追加。
* `class="sitenav"` の `onclick` イベントを変更。

onclick="document.getElementById('navmenu-toggle').click();"

から

onclick="onclick_sitenav(event)"

に変更。

###### tags: `Fluent UI Blazor` `Blazor` `Fluent` `FluentNavMenu` `FluentNavGroup`