<script lang="ts">
    import {random_string} from "$shared/lib/helpers";

    export let id = "nav__" + random_string(4);
    const staticClasses = "position-relative z-index-2 bg width-100% max-width-xxxxs shadow-sm"
</script>
<div class="flex@md">
    <aside id="{id}" class="sidebar sidebar--static@md {staticClasses}">
        <div class="sidebar__panel">
            <div class="position-relative z-index-1">
                <nav class="sidenav-v4 padding-xs">
                    <slot name="navigation-items"></slot>
                </nav>
            </div>
        </div>
    </aside>
    <main class="container max-width-xl position-relative z-index-1 flex-grow min-height-100vh position-sticky@md top-0@md height-100vh@md overflow-auto@m">
        <slot name="main-content"></slot>
    </main>
</div>