budibase/packages/standard-components/src/Nav.svelte

<script>
import cssVars from "./cssVars";

export let navBarBackground = "";
export let navBarBorder="";
export let navBarColor="";
export let selectedItemBackground="";
export let selectedItemColor="";
export let selectedItemBorder="";
export let itemHoverBackground="";
export let itemHoverColor="";
export let items = [];
export let hideNavBar=false;
export let selectedItem="";

export let _bb;

let selectedIndex = -1;
let contentElement;
let styleVars={};
let currentComponent;


$: {
    styleVars = {
        navBarBackground, navBarBorder,
        navBarColor, selectedItemBackground,
        selectedItemColor, selectedItemBorder,
        itemHoverBackground, itemHoverColor
    };

    if(items && items.length > 0 && contentElement) {
        const currentSelectedItem = selectedIndex > 0
                                   ? items[selectedIndex].title
                                   : "";
        if(selectedItem && currentSelectedItem !== selectedItem) {
            let i=0;
            for(let item of items) {
                if(item.title === selectedItem) {
                    onSelectItem(i)();
                }
                i++;
            }
        } else if(!currentSelectedItem) {
            onSelectItem(0);
        }
    }
}

const onSelectItem = (index) => () => {
    selectedIndex = index;
    if(currentComponent) currentComponent.$destoy();
    currentComponent = _bb.initialiseComponent(items[index].component, contentElement);
}


</script>

<div class="root" use:cssVars={styleVars}>
    {#if !hideNavBar}
    <div class="navbar">
        {#each items as navItem, index}
        <div class="navitem"
             on:click={onSelectItem(index)}
             class:selected={selectedIndex === index}>
            {navItem.title}
        </div>
        {/each}
    </div>
    {/if}
    <div class="content"
         bind:this={contentElement}>
    </div>
</div>

<style>

.root {
    height: 100%;
    width:100%;
    grid-template-columns: [navbar] auto [content] 1fr;
    display: grid;
}

.navbar {
    grid-column: navbar;
    background: var(--navBarBackground);
    border: var(--navBarBorder);
    color: var(--navBarColor);
}

.navitem {
    padding: 10px 17px;
    cursor: pointer;
}

.navitem:hover {
    background: var(--itemHoverBackground);
    color: var(--itemHoverColor);
}

.navitem.selected {
    background: var(--selectedItemBackground);
    border: var(--selectedItemBorder);
    color: var(--selectedItemColor);
}

.content {
    grid-column: content;
}

</style>