{{#with menuStructure}}
<div style="min-height: 100%;{{#if hasFooter}} padding-bottom: 180px;{{/if}}">
    <ul class="collection" style="border: none; background-color: white; border-radius: 0;">
        <li style="background-color: #00549F">
            <div class="row" style="margin-bottom: 0">
                <div class="col s1" style="height: 50px;">
                </div>
                <a class="col s10" href="#home"><img src="{{#if rwthLogoPath}}{{rwthLogoPath}}{{else}}img/rwth.svg{{/if}}" style="width: 224px; height: 109px;"></a>
                <div class="col s1" style="height: 50px;">
                </div>
            </div>
            <!-- dirty workaround table creates a white dotted border effect by creating a new solid border with color equals li ones this is not visible anymore -->
            <table style="width: 100%;">
                <tr>
                    <td id="menuBack" style="width:15%; position: relative; visibility: hidden;">
                        <i class="button-collapse material-icons rwth-white-text">chevron_left</i>
                    </td>
                    <td id="welcome" style="font-size: 15px; color: white; width:70%;">
                        <center>
                            {{#if isLoginPersonalized}}
                            {{#if name}}
                            {{langString "menu.greeting"}}, {{name}}
                            {{/if}}
                            {{else}}
                            {{langString "menu.anonym"}}
                            <p style="font-size: 10px;">({{langString "menu.signInAdvise"}})</p>
                            {{/if}}
                        </center>
                    </td>
                    <td id="loginlogout" style="position: relative; width:15%;">
                        <i class="button-collapse material-icons rwth-white-text">{{#if isLoginPersonalized}}power_settings_new{{else}}exit_to_app{{/if}}</i>
                    </td>
                </tr>
            </table>
        </li>
        {{#if tablet}}
        <li style="border: none; padding: 10px 0px;{{#unless tablet.visible}} display: none;{{/unless}}" class="collection-item row">
            <a class="col s12">
                {{langString "menu.pinMenu"}}
                <div class="switch secondary-content">
                    <label>
                        {{langString "settings.vibration.off"}}
                        <input type="checkbox" id="pinMenu">
                        <span class="lever"></span>
                        {{langString "settings.vibration.on"}}
                    </label>
                </div>
            </a>
        </li>
        {{/if}}
        {{#if favoritesTopLevel}}
            {{#each menuItems}}
                {{> menu menuItem=this useWavesEffect=../../useWavesEffect}}
            {{/each}}
            {{#if hasFavorites}}
                <li style="padding-bottom: 10px;">
                    <ul class="collection" style="border: 1px #e0e0e0; border-style: solid none none none;">
                        <li class="collection-item" style="border: none;">
                            <span class="title" style="margin-left: -5px;">{{langString "menu.favorites.favoritesHomeHint"}}</span>
                        </li>
                        {{#each favoritesItems}}
                            {{> menu menuItem=this useWavesEffect=../../useWavesEffect}}
                        {{/each}}
                    </ul>
                </li>
            {{/if}}
        {{/if}}
    </ul>
    {{#unless favoritesTopLevel}}
    <ul id="favoritesCollection" style="border:none;">
        {{> menu.favorites favorites=menuItems useWavesEffect=../useWavesEffect}}    
    </ul>
    {{/unless}}
</div>

{{#if hasFooter}}
<ul class="collection" style="margin-top: -180px; border: 1px #e0e0e0; border-style: solid none none none;">
    {{#each footerItems}}
        {{> menu menuItem=this useWavesEffect=../useWavesEffect}}
    {{/each}}
</ul>
{{/if}}
{{/with}}