电脑端和手机端不同菜单如何制作drupal 模板呢？

下面代码是在不同终端显示不同的内容，比如：电脑端会显示

<nav class="header-nav-menu">

<ul class="menu nav-menu">

（显示的内容相同）

</ul>
</nav>

手机端会显示：
 

<nav class="header-nav-menu-mobile">

<div class="container-fluid">

<ul class="menu nav-menu menu-mobile">

（显示的内容相同）

</ul>

</div>

 </nav>

我的info.yml文件为：

regions:

  header: 'Header头部'

  navigation_desktop: 'Desktop Navigation PC'

  navigation_mobile: 'Navigationr mobile'

  sub_banner: 'sub banner'

  nav_main: 'sub nav'

  breadcrumb: Breadcrumbs

  content: 'Main content'

  footer: 'Footer'

请问 menu.html.twig文件如果写呢？有没有更方便的方法呢？

我的page.html.twig文件内容为：
 

  <header id="header">
    <div class="header header-1 d-none d-lg-block js-header-1">
      <div class="header__bar">
        <div class="wrap wrap--w1790">
          <div class="container-fluid">
            <div class="header__content">
              <div class="logo">
                <a href="#">
                  <img src="images/icon/logo-black.png" alt="Tatee" />
                </a>
              </div>
              <div class="header__content-right">


                {% if page.navigation_desktop %}
                {{ page.navigation_desktop }}
                {% endif %}

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-mobile d-block d-lg-none">
      <div class="header-mobile__bar">
        <div class="container-fluid">
          <div class="header-mobile__bar-inner">
            <a class="logo" href="index.html">
              <img src="images/icon/logo-black.png" alt="Tatee" />
            </a>
            <button class="hamburger hamburger--slider float-right" type="button">
              <span class="hamburger-box">
                <span class="hamburger-inner"></span>
              </span>
            </button>
          </div>
        </div>
      </div>
      <nav class="header-nav-menu-mobile">
        <div class="container-fluid">
          {% if page.navigation_mobile %}
          {{ page.navigation_mobile }}
          {% endif %}

        </div>
      </nav>
    </div>
  </header>

静态页面如下：

<header id="header">
    <div class="header header-1 d-none d-lg-block js-header-1">
        <div class="header__bar">
            <div class="wrap wrap--w1790">
                <div class="container-fluid">
                    <div class="header__content">

                        <div class="header__content-right">
                            <nav class="header-nav-menu">
                                <ul class="menu nav-menu">
                                    <li class="menu-item menu-item-has-children">
                                        <a href="home-main.html">Home</a>
                                        <ul class="sub-menu">
                                            <li class="menu-item">
                                                <a href="home-main.html">Main home</a>
                                            </li>
                                            <li class="menu-item">
                                                <a href="home-project-hover.html">Project Hover</a>
                                            </li>

                                        </ul>
                                    </li>
                                    <li class="menu-item">
                                        <a href="about-us.html">about</a>
                                    </li>

                                    <li class="menu-item">
                                        <a href="contact.html">contact</a>
                                    </li>
                                </ul>
                            </nav>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="header-mobile d-block d-lg-none">
        <div class="header-mobile__bar">
            <div class="container-fluid">
                <div class="header-mobile__bar-inner">

                    <button class="hamburger hamburger--slider float-right" type="button">
                        <span class="hamburger-box">
                            <span class="hamburger-inner"></span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <nav class="header-nav-menu-mobile">
            <div class="container-fluid">
                <ul class="menu nav-menu menu-mobile">
                    <li class="menu-item menu-item-has-children">
                        <a href="home-main.html">Home</a>
                        <ul class="sub-menu">
                            <li class="menu-item">
                                <a href="home-main.html">Main home</a>
                            </li>
                            <li class="menu-item">
                                <a href="home-project-hover.html">Project Hover</a>
                            </li>

                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="about-us.html">about</a>
                    </li>



                    <li class="menu-item">
                        <a href="contact.html">contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</header>