<script lang="ts">

// *** Import Svelte core
import { onMount } from 'svelte';

import { slct, slct_trigger, ae_app, ae_session } from './stores';


onMount(() => {
    console.log('** Component Mounted: ** OSIT - AE Hub: Site Menu');
});

</script>


<nav>
{#if $ae_session.site_nav_menu}
    <ul>
        {#each Object.entries($ae_session.site_nav_menu) as [name, menu_item]}
            <li>
                <a href={menu_item.href} class={menu_item.class_li}>{@html menu_item.text}</a>
            </li>
        {/each}
    </ul>
{/if}
</nav>


<style>
nav {
    /* outline: dashed thick red; */
    /* background-color: hsla(0, 0%, 100%, 0.85); */
    /* padding: .5em 1em; */

    display: flex;
    justify-content: space-between;
}
nav ul {
    list-style-type: none;
    padding: 0;

    width: 100%;

    display: flex;
    justify-content: space-around;
}
nav ul li {
    /* display: inline; */
    /* margin-right: 1em; */
}
nav ul li a {
    text-decoration: none;
}
nav ul li a:hover {
    text-decoration: underline;
}
nav ul li a.active {
    font-weight: bold;
}
nav ul li a.active:hover {
    text-decoration: none;
}
</style>
