115 lines
3.4 KiB
Svelte
115 lines
3.4 KiB
Svelte
<script>
|
|
import {
|
|
Badge,
|
|
Button,
|
|
ButtonGroup,
|
|
Col,
|
|
Collapse,
|
|
Container,
|
|
Dropdown,
|
|
DropdownItem,
|
|
DropdownMenu,
|
|
DropdownToggle,
|
|
Icon,
|
|
Navbar,
|
|
NavbarToggler,
|
|
NavbarBrand,
|
|
Nav,
|
|
NavItem,
|
|
NavLink,
|
|
Progress,
|
|
Row,
|
|
} from 'sveltestrap';
|
|
|
|
import { my } from '../stores/my.js';
|
|
import { teams } from '../stores/teams.js';
|
|
import { settings, time } from '../stores/settings.js';
|
|
|
|
import HeaderClock from './HeaderClock.svelte';
|
|
import HeaderIssues from './HeaderIssues.svelte';
|
|
import HeaderPartners from './HeaderPartners.svelte';
|
|
import NavThemes from './NavThemes.svelte';
|
|
import NavTags from './NavTags.svelte';
|
|
|
|
let isOpen = false;
|
|
|
|
function handleUpdate(event) {
|
|
isOpen = event.detail.isOpen;
|
|
}
|
|
</script>
|
|
|
|
<div class="container-fluid bg-dark" style="max-height: 15vh;">
|
|
<div style="height: 100%; max-height: inherit; width: 98%; position: absolute">
|
|
<Container class="d-flex justify-content-center align-items-center text-light" style="height: 100%; max-height: inherit">
|
|
<HeaderClock />
|
|
</Container>
|
|
</div>
|
|
<Container class="d-flex justify-content-between p-1" style="max-height: inherit">
|
|
<a href="/">
|
|
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="h-100">
|
|
</a>
|
|
<HeaderPartners />
|
|
</Container>
|
|
</div>
|
|
<div class="sticky-top">
|
|
<Navbar color="dark" dark expand="md">
|
|
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
|
<Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
|
|
<Nav navbar>
|
|
<NavItem>
|
|
<NavLink href="/">
|
|
<Icon name="box-seam" />
|
|
Accueil
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavThemes />
|
|
<NavTags />
|
|
{#if $settings && $settings.end - $settings.start >= 0}
|
|
<NavItem>
|
|
<NavLink href="/rank">
|
|
<Icon name="sort-down" />
|
|
Classement
|
|
</NavLink>
|
|
</NavItem>
|
|
{/if}
|
|
<HeaderIssues />
|
|
<NavItem>
|
|
<NavLink href="/rules">
|
|
<Icon name="signpost-split" />
|
|
Aide
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
<Nav class="ms-auto text-light" navbar>
|
|
{#if $my && $my.team_id}
|
|
<NavItem>
|
|
{$my.score} {$my.score === 1 ? 'point' : 'points'}
|
|
{#if $teams && $teams[$my.team_id].rank}
|
|
– {$teams[$my.team_id].rank}<sup>e</sup> sur {Object.keys($teams).length}
|
|
{/if}
|
|
</NavItem>
|
|
{/if}
|
|
<NavItem class="ms-2">
|
|
{#if !$my}
|
|
<Badge href="/register" color="warning">
|
|
Inscription
|
|
</Badge>
|
|
{:else if $my.team_id && $teams}
|
|
<Badge href="/edit" style="background-color: {$teams[$my.team_id].color} !important; color: {$teams[$my.team_id].color};">
|
|
<span class="teamname">{$my.name}</span>
|
|
</Badge>
|
|
{/if}
|
|
</NavItem>
|
|
</Nav>
|
|
</Collapse>
|
|
</Navbar>
|
|
<Progress value={$time.progression * 100} color="info" style="height: 5px; border-radius: 0;" />
|
|
</div>
|
|
|
|
<style>
|
|
.teamname {
|
|
-webkit-filter: invert(100%);
|
|
filter: invert(100%);
|
|
}
|
|
</style>
|