partey_workadventure/front/dist/resources/html/gameMenu.html

<style>
    #gameMenu main{
        margin-top: 30px;
    }
    #gameMenu section {
        margin: 10px;
    }
    section#socialLinks{
        position: absolute;
        margin-bottom: 0;
    }
    section#socialLinks img{
        width: 32px;
        cursor: url('/resources/logos/cursor_pointer.png'), pointer;
    }
    @media only screen and (max-height: 700px) {
        #gameMenu main {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            flex-wrap: wrap;
            margin-top: 0;
        }
        #gameMenu section{
            margin: 2px;
        }
        section#socialLinks{
            position: relative;
        }
    }
</style>

<div id="gameMenu" hidden>

    <main>
        <section>
            <button id="shareButton" class="nes-btn">Share url</button>
        </section>
        <section>
            <button id="changeSkinButton" class="nes-btn">Edit skin</button>
        </section>
        <section>
            <button id="changeCompanionButton" class="nes-btn">Edit companion</button>
        </section>
        <section>
            <button id="editGameSettingsButton" class="nes-btn">Settings</button>
        </section>
        <section>
            <button id="toggleFullscreen" class="nes-btn">Toggle fullscreen</button>
        </section>
        <!-- TODO activate authentication -->
        <section hidden>
            <button id="oidcLogin">Oauth Login</button>
        </section>
        <section>
            <button id="enableNotification" class="nes-btn">Enable notifications</button>
        </section>
        <section id="adminConsoleSection" hidden>
            <button id="adminConsoleButton" class="nes-btn">Admin console</button>
        </section>
        <section id="socialLinks" hidden>
        </section>
    </main>
</div>