How can I append html to a block in module template on PrestaShop?

Question

I'm developing my own theme on PrestaShop (1.7.6) and I want ps_mainmenu to be in a sidenav.

To do so I want to create the sidenav div just after the body.

Here is my mytheme/modules/ps_mainmenu/ps_mainmenu.tpl code:

{block name='hook_after_body_opening_tag' append}
  <div class="sidenav">
    {* ... *}
  </div>
{/block}

{* Button to open sidenav *}
<div class="menu">
  <i class="material-icons">menu</i>
</div>

But the sidenav div is created just before my menu button, not after the div

<!-- begin module:ps_mainmenu/ps_mainmenu.tpl -->
<!-- begin /var/www/html/themes/mytheme/modules/ps_mainmenu/ps_mainmenu.tpl -->
<div class="sidenav"></div>

<div class="menu">
  <i class="material-icons">menu</i>
</div>
<!-- end /var/www/html/themes/mytheme/modules/ps_mainmenu/ps_mainmenu.tpl -->
<!-- end module:ps_mainmenu/ps_mainmenu.tpl -->

Answer 1

Have you tried to use {widget name='ps_mainmenu'}?

You can put your menu wherever you like.