Rotimi Best
0c395e9f1b
The auth button derived from stores that hydrate in stages, so it flashed through Login -> Dashboard -> Go to LMS as isLoggedIn and the role/basePath settled at different times. Gate the label on appInitApi.isInitializedAndReady so it only renders once the account (and thus role) has loaded, and show a spinner in the button while a logged-in user's experience resolves. Add separate loading and disabled flags to authAction and wire them through all theme navs.
60 lines
2.0 KiB
Svelte
60 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import type { NavItem } from '../types';
|
|
import { Button } from '../../../base/button';
|
|
import EditableLandingSection from '../editable-section.svelte';
|
|
|
|
interface Props {
|
|
orgName: string;
|
|
logoUrl?: string;
|
|
navItems: NavItem[];
|
|
authAction?: {
|
|
label: string;
|
|
href: string;
|
|
loading?: boolean;
|
|
disabled?: boolean;
|
|
};
|
|
}
|
|
|
|
let { orgName, logoUrl, navItems, authAction }: Props = $props();
|
|
</script>
|
|
|
|
<EditableLandingSection sectionKey="navigation">
|
|
<header class="ui:flex ui:items-center ui:justify-between ui:gap-6 ui:py-4 ui:text-[var(--landing-accent-fg)]">
|
|
<a
|
|
href="/"
|
|
class="ui:flex ui:items-center ui:gap-2 ui:font-bold ui:text-base ui:tracking-tight ui:text-[var(--landing-accent-fg)] ui:no-underline ui:cursor-pointer"
|
|
>
|
|
{#if logoUrl}
|
|
<img src={logoUrl} alt={orgName} class="ui:h-7 ui:w-auto" />
|
|
{/if}
|
|
{orgName}
|
|
</a>
|
|
|
|
{#if navItems.length > 0}
|
|
<nav class="ui:hidden ui:md:flex ui:gap-1.5 ui:font-mono ui:text-[13px]">
|
|
{#each navItems as item (item.href + item.label)}
|
|
<a
|
|
href={item.href}
|
|
class="ui:px-3 ui:py-1.5 ui:rounded-full ui:border ui:border-transparent ui:text-[var(--landing-accent-fg)]/85 ui:hover:text-[var(--landing-accent-fg)] ui:hover:border-[var(--landing-accent-fg)]/30 ui:hover:bg-[var(--landing-accent-fg)]/10 ui:transition-colors ui:no-underline ui:cursor-pointer"
|
|
>
|
|
( {item.label.toLowerCase()} )
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
{/if}
|
|
|
|
{#if authAction}
|
|
<Button
|
|
href={authAction.href}
|
|
loading={authAction.loading}
|
|
disabled={authAction.disabled}
|
|
size="sm"
|
|
variant="outline"
|
|
class="ui:rounded-none ui:font-semibold ui:border-[var(--landing-accent-fg)] ui:text-[var(--landing-accent-fg)] ui:bg-transparent ui:hover:bg-[var(--landing-accent-fg)]/10 ui:hover:text-[var(--landing-accent-fg)]"
|
|
>
|
|
{authAction.label} →
|
|
</Button>
|
|
{/if}
|
|
</header>
|
|
</EditableLandingSection>
|