server/frontend/ui/src/lib/components/HeaderClock.svelte

<script>
 import {
     ButtonGroup,
     Icon,
 } from 'sveltestrap';

 import Clock from './Clock.svelte';
 import { challengeInfo } from '$lib/stores/challengeinfo.js';
 import { settings } from '$lib/stores/settings.js';
</script>

{#if $settings && $settings.end}
    {#if $settings.end - $settings.start > 0}
        <Clock
            class="display-2 text-end text-md-center"
        />
    {:else}
        <div class="d-flex h-100 justify-content-center align-items-center">
            <ButtonGroup size="lg">

	        <a
                    href="{$challengeInfo.main_link}"
                    class="btn btn-light"
                    class:disabled={$challengeInfo.main_link === ''}
                >
                    <Icon name="ui-checks-grid" />
	            Accueil
	        </a>
	        <a
                    href="rank"
                    class="btn btn-light"
                >
                    <Icon name="sort-down" />
	            Classement
	        </a>
	        <a
                    href="{$challengeInfo.videoslink}"
                    class="btn btn-light"
                    class:disabled={$challengeInfo.videoslink === ''}
                >
                    <Icon name="laptop-fill" />
	            Vidéos
	        </a>
            </ButtonGroup>
        </div>
    {/if}
{:else}
    <div class="d-flex h-100 justify-content-center align-items-center">
        <h1 class="display-3 m-0">
            {$challengeInfo.title}
        </h1>
    </div>
{/if}