console/src/lib/layout/headerAlert.svelte

<script module lang="ts">
    import { writable } from 'svelte/store';

    export const bannerSpacing = writable<string | null>(null);
</script>

<script lang="ts">
    import { onDestroy, onMount } from 'svelte';
    import { isTabletViewport } from '$lib/stores/viewport';
    import { createEventDispatcher } from 'svelte';
    import { Button } from '$lib/elements/forms';
    import { Icon } from '@appwrite.io/pink-svelte';
    import { IconX } from '@appwrite.io/pink-icons-svelte';
    import { afterNavigate } from '$app/navigation';

    export let title: string;
    export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
    export let dismissible = false;

    /**
     * This is needed because when the
     * slot's height gets changed, sometimes the update doesn't come through!
     */
    let resizeObserver: ResizeObserver;

    let container: HTMLElement | null = null;
    const dispatch = createEventDispatcher();

    function setNavigationHeight() {
        const alertHeight = container ? container.getBoundingClientRect().height : 0;
        const header: HTMLHeadingElement = document.querySelector('main > header');
        const sidebar: HTMLElement = document.querySelector('main > div > nav');
        const contentSection: HTMLElement = document.querySelector('main > div > section');

        if (alertHeight) {
            // for sidebar and sub-navigation!
            bannerSpacing.set(`${alertHeight}px`);
        } else {
            bannerSpacing.set(undefined);
        }

        if (header) {
            header.style.top = `${alertHeight}px`;
        }

        if (sidebar) {
            const headerHeight = header?.getBoundingClientRect().height ?? 0;
            const topOffset = alertHeight + ($isTabletViewport ? 0 : headerHeight);

            sidebar.style.top = `${topOffset}px`;
            sidebar.style.height = `calc(100vh - ${topOffset}px)`;
        }

        if (contentSection) {
            contentSection.style.paddingBlockStart = `${alertHeight}px`;
        }
    }

    onMount(() => {
        if (container) {
            resizeObserver = new ResizeObserver(setNavigationHeight);
            resizeObserver.observe(container);
        }
    });

    onDestroy(() => {
        container = null;
        setNavigationHeight();

        // remove observer!
        if (resizeObserver) {
            resizeObserver.disconnect();
        }
    });

    afterNavigate(() => setNavigationHeight());
</script>

<section
    bind:this={container}
    class="alert is-action is-action-and-top-sticky u-sep-block-end"
    class:is-success={type === 'success'}
    class:is-warning={type === 'warning'}
    class:is-danger={type === 'error'}
    class:is-info={type === 'info'}>
    <div class="alert-grid">
        <span
            aria-hidden="true"
            class:icon-check-circle={type === 'success'}
            class:icon-exclamation={type === 'warning'}
            class:icon-exclamation-circle={type === 'error'}
            class:icon-info={type === 'info' || type === 'default'}></span>

        <div class="alert-content">
            {#if title || $$slots.title}
                <h6 class="alert-title">
                    <slot name="title">
                        {title}
                    </slot>
                </h6>
            {/if}
            <p class="alert-message">
                <slot />
            </p>
        </div>
        {#if $$slots.buttons || dismissible}
            <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
                <slot name="buttons" />
                {#if dismissible}
                    <Button text icon size="s" on:click={() => dispatch('dismiss')}>
                        <Icon icon={IconX} slot="start" size="s" />
                    </Button>
                {/if}
            </div>
        {/if}
    </div>
</section>

<style>
    .alert {
        padding: 1rem 1rem 0.75rem 1.5rem;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
    }

    .alert-content {
        gap: 0.25rem;
    }
</style>