DCSOlympus/client/views/toolbars/primary.ejs

<nav id="primary-toolbar" class="ol-panel" oncontextmenu="return false;">
    <div id="app-icon" class="ol-select ol-select-image">
        <div class="ol-select-value icon">
            <img src="images/icon.png" class="main-logo" />
        </div>
        <div class="ol-select-options">
            <div id="toolbar-summary">
                <h3>DCS Olympus</h3>
                <div class="accent-green app-version-number">version {{OLYMPUS_VERSION_NUMBER}}.{{OLYMPUS_COMMIT_HASH}}</div>
            </div>
            <div>
                <a href="https://discord.gg/wWXyVVBZT7" target="_blank">Discord</a>
            </div>
            <div>
                <a href="https://github.com/Pax1601/DCSOlympus" target="_blank">Github</a>
            </div>
            <div>
                <a href="https://github.com/Pax1601/DCSOlympus/wiki/User-Guide" target="_blank">User guide</a>
            </div>
            <div data-on-click="exportToFile">
                <button>Export to file</button>
            </div>
            <div data-on-click="importFromFile">
                <button>Import from file</button>
            </div>
            <div data-on-click="reloadPage">
                <a href="" target="_blank" data-on-click="reloadPage">Restart Olympus</a>
            </div>
        </div>
    </div>

    <div class="ol-group">
        <div id="map-type" class="ol-select">
            <div class="ol-select-value"><img src="resources/theme/images/icons/map-source.svg" inject-svg /><span class="ol-select-value-text">ArcGIS Satellite</span></div>
            <div class="ol-select-options">
                <!-- Here the available map sources will be listed-->
            </div>
        </div>

        <div id="map-visibility-options" class="ol-select">
            <div class="ol-select-value"><img src="/resources/theme/images/icons/gears-solid.svg" inject-svg />Options</div>
            <div class="ol-select-options">
                <!-- This is where the advanced visibility options will be listed -->
            </div>
        </div>
    </div>
</nav>
<nav class="ol-panel" oncontextmenu="return false;">
    <div id="view-label" class="ol-panel-tab">
        <img src="resources/theme/images/icons/eye-solid.svg" inject-svg />
        <span>View</span>
    </div>
    <div id="unit-visibility-control" class="ol-group ol-navbar-buttons-group">
        <!-- Here the available visibility controls will be listed -->
    </div>

    <div id="coalition-visibility-control" class="ol-group ol-navbar-buttons-group">
        <div>
            <button id="coalition-visibility-control-blue" data-on-click="toggleCoalitionVisibility"
                data-on-click-params='{ "coalition": "blue" }' title="Toggle Blue coalition visibility"><img src="/resources/theme/images/buttons/visibility/shield.svg" class="fill-coalition" data-coalition="blue" inject-svg /></button>
        </div>

        <div>
            <button id="coalition-visibility-control-red" data-on-click="toggleCoalitionVisibility"
                data-on-click-params='{ "coalition": "red" }' title="Toggle Red coalition visibility"><img src="/resources/theme/images/buttons/visibility/shield.svg" class="fill-coalition" data-coalition="red" inject-svg /></button>
        </div>

        <div>
            <button id="coalition-visibility-control-neutral" data-on-click="toggleCoalitionVisibility"
                data-on-click-params='{ "coalition": "neutral" }' title="Toggle Neutral coalition visibility"><img src="/resources/theme/images/buttons/visibility/shield.svg" class="fill-coalition" data-coalition="neutral" inject-svg /></button>
        </div>
    </div>
</nav>