Files
OSIT-AE-App-Svelte/src/10_hub__site_menu.svelte
2024-02-15 09:20:57 -05:00

64 lines
1.1 KiB
Svelte

<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>