---
# System prepended metadata

title: Blazor FluentNavMenu を 狭い画面で表示したときに、FluentNavGroup の ExpandIcon をクリックすると閉じてしまう 2024-01-18
tags: [Fluent UI Blazor, Fluent, FluentNavGroup, Blazor, FluentNavMenu]

---

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

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

![image](https://hackmd.io/_uploads/B1Grzz8Kp.png)


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

![image](https://hackmd.io/_uploads/Sy3yzMLY6.png)

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

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

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

![image](https://hackmd.io/_uploads/SJ-KzfUY6.png)

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

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

![image](https://hackmd.io/_uploads/BkyT7NcFp.png)


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

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

```javascript=

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` イベントを変更。

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

から

```javascript=
onclick="onclick_sitenav(event)"
```

に変更。


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