server/frontend/ui/src/components/NavThemes.svelte

<script>
 import {
     Badge,
     Dropdown,
     DropdownItem,
     DropdownMenu,
     DropdownToggle,
     Icon,
 } from 'sveltestrap';

 import { my } from '../stores/my.js';
 import { max_solved } from '../stores/themes.js';
 import { myThemes, themes } from '../stores/mythemes.js';
</script>

<Dropdown nav inNavbar>
    <DropdownToggle nav caret>
        <Icon name="tv" />
        Scenarii
    </DropdownToggle>
    <DropdownMenu class="niceborder" end>
        <div>
            {#each Object.keys($themes) as th, index}
                <DropdownItem href="{$themes[th].urlid}">
                    {$themes[th].name}
                    {#if $max_solved > 1 && $themes[th].solved == $max_solved}
                        <Badge color="danger">
                            <Icon name="heart-fill" />
                        </Badge>
                    {/if}
                    {#if $themes[th].exercice_coeff_max > 1}
                        <Badge color="success">
                            <Icon name="gift-fill" />
                        </Badge>
                    {/if}
                    <Badge>
                        {#if $my && $my.team_id}{$myThemes[$themes[th].id].exercice_solved}/{/if}{$themes[th].exercice_count}
                    </Badge>
                </DropdownItem>
            {/each}
        </div>
    </DropdownMenu>
</Dropdown>

<style>
 div {
     overflow-y: auto;
     max-height: calc(80vh - 100px);
 }
</style>