<script>
 import {
     Icon,
     Navbar,
     NavbarBrand,
     Nav,
     NavItem,
     NavLink,
 } from 'sveltestrap';

 const version = fetch('api/version', {headers: {'Accept': 'application/json'}}).then((res) => res.json())

 export let activemenu = '';
 export { className as class };
 let className = '';
</script>

<Navbar class={className} color="primary" dark expand="xs" style="overflow-x: auto">
    <NavbarBrand href="." class="d-none d-md-block" style="padding: 0; margin: -.5rem 0;">
        Réveil
    </NavbarBrand>
    <Nav navbar>
        <NavItem>
            <NavLink
                active={activemenu === 'recipes'}
                class="text-center"
                href="alarms"
            >
                <Icon name="alarm-fill" /><br class="d-inline d-md-none">
                Réveils
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink
                href="musiks"
                class="text-center"
                active={activemenu === 'explore'}
            >
                <Icon name="music-note-list" /><br class="d-inline d-md-none">
                Musiques
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink
                href="routines"
                class="text-center"
                active={activemenu === 'routines'}
            >
                <Icon name="activity" /><br class="d-inline d-md-none">
                Routines
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink
                href="history"
                class="text-center"
                active={activemenu === 'history'}
            >
                <Icon name="clipboard-pulse" /><br class="d-inline d-md-none">
                Historique
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink
                href="settings"
                class="text-center"
                active={activemenu === 'settings'}
            >
                <Icon name="gear-fill" /><br class="d-inline d-md-none">
                Paramètres
            </NavLink>
        </NavItem>
    </Nav>
    <Nav class="ms-auto text-light" navbar>
        <NavItem>
            {#await version then v}
                {v.version}
            {/await}
        </NavItem>
    </Nav>
</Navbar>
