DCSOlympus/client/views/navbar.ejs

<nav id="primary-toolbar" class="ol-panel">

    <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="olympus-toolbar-summary">
                <h2>Olympus</h2>
                <p>v0.1.0</p>
            </div>
            <div>
                <div class="ol-select">
                    <div class="ol-select-value">Current mode</div>
                    <div class="ol-select-options">
                        <div>
                            <button title="Switch to Mode A">Mode A</button>
                        </div>
                        <div>
                            <button title="Switch to Mode B">Mode B</button>
                        </div>
                        <div>
                            <button title="Switch to Mode C">Mode C</button>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <hr />
            </div>
            <div>
                <button>Preferences</button>
            </div>
            <div>
                <button>Help and support</button>
            </div>
            <div>
                <hr />
            </div>
            <div>
                <button>Exit Olympus</button>
            </div>
        </div>
    </div>

    <div id="map-type" class="ol-select">
        <div class="ol-select-value">
            <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.1562 3.53125C11.1562 5.03516 9.13281 7.6875 8.25781 8.78125C8.06641 9.05469 7.65625 9.05469 7.46484 8.78125C6.58984 7.6875 4.59375 5.03516 4.59375 3.53125C4.59375 1.72656 6.04297 0.25 7.875 0.25C9.67969 0.25 11.1562 1.72656 11.1562 3.53125ZM11.375 5.74609C11.457 5.55469 11.5391 5.36328 11.6211 5.17188C11.6484 5.14453 11.6484 5.11719 11.6758 5.08984L14.8477 3.80469C15.2578 3.64062 15.75 3.94141 15.75 4.40625V11.8164C15.75 12.0898 15.5859 12.3359 15.3125 12.4453L11.375 14.0039V5.74609ZM3.74609 4.05078C3.82812 4.43359 3.9375 4.81641 4.10156 5.17188C4.18359 5.36328 4.26562 5.55469 4.375 5.74609V12.6094L0.875 14.0039C0.464844 14.168 0 13.8672 0 13.4023V5.99219C0 5.71875 0.164062 5.47266 0.410156 5.39062L3.74609 4.05078ZM8.94141 9.32812C9.32422 8.86328 9.92578 8.09766 10.5 7.22266V14.0586L5.25 12.5547V7.22266C5.79688 8.09766 6.39844 8.86328 6.78125 9.32812C7.32812 10.0391 8.39453 10.0391 8.94141 9.32812ZM7.875 4.40625C8.47656 4.40625 8.96875 3.94141 8.96875 3.3125C8.96875 2.71094 8.47656 2.21875 7.875 2.21875C7.24609 2.21875 6.78125 2.71094 6.78125 3.3125C6.78125 3.94141 7.24609 4.40625 7.875 4.40625Z" fill="white"/>
            </svg>
            <span>ArcGIS Satellite</span>
        </div>
        <div class="ol-select-options">
            <div>
                <button>ArcGIS Satellite</button>
            </div>
            <div>
                <button>USGS Topographic</button>
            </div>
            <div>
                <button>OpenStreet Map</button>
            </div>
            <div>
                <button>OPENVKarte</button>
            </div>
            <div>
                <button>ESRI.Delorme</button>
            </div>
            <div>
                <button>CyclOSM</button>
            </div>
        </div>
    </div>
    
    <div id="unit-visibility-control" class="ol-group">
        <button id="unit-visibility-control-aircraft" title="Toggle aircraft' visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "aircraft" }'></button>
        <button id="unit-visibility-control-ground" title="Toggle ground units' visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "ground" }'></button>
        <button id="unit-visibility-control-sam" title="Toggle SAMs' visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "sam" }'></button>
        <button id="unit-visibility-control-threat" title="Toggle threat rings' visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "threat" }'></button>
        <button id="unit-visibility-control-naval" title="Toggle naval visibility" data-on-click="toggleUnitVisibility" data-on-click-params='{ "unitType": "naval" }'></button>
    </div>

    <div id="coalition-visibility-control" class="ol-group ol-group-button-toggle">

        <div>
            <button id="coalition-visibility-control-blue" data-on-click="toggleCoalitionVisibility" data-on-click-params='{ "coalition": "blue" }'>View <span class="accent-bluefor">BLUEFOR</span></button>
        </div>

        <div>
            <button id="coalition-visibility-control-red" data-on-click="toggleCoalitionVisibility" data-on-click-params='{ "coalition": "red" }'>View <span class="accent-redfor">REDFOR</span></button>
        </div>

        <div>
            <button id="coalition-visibility-control-neutral" data-on-click="toggleCoalitionVisibility" data-on-click-params='{ "coalition": "neutral" }'>View <span class="accent-neutral">NEUTRAL</span></button>
        </div>
        
    </div>
</nav>