Immersion - [#13/10/2019] - 0.2.4

'use strict';

// |---------------------------------------------------------------------------
// | ...
// |---------------------------------------------------------------------------

var Scene = {};

void

function (scene) {

    scene.el = {};

    // |-----------------------------------------------------------------------
    // | start out elements
    // |-----------------------------------------------------------------------

    async function start() {
        await Config.dashboard.load()
        await Config.event.load()
        await createMenu()
    }

    // |-----------------------------------------------------------------------
    // | ... Create
    // |-----------------------------------------------------------------------

    async function createMenu() {
        var items = []

        Config.dashboard.data.menu.map(menu => {
            items.push({
                component: 'icon',
                src: Route.App.plug('icon', menu.icon),
                onclick: () => Components.attr(menu.action),
                class: ""
            })
        })


        scene.el.menu = new Components.select.Nav({
            class: '',
            style: CSS.Global.default({
                display: "grid",
                "grid-auto-columns": "max-content",
                "grid-auto-rows": "min-content",
                "grid-gap": "16px",
                height: "99vh",
                width: "32px",
                "justify-items": "center",
                "justify-contents": "center",
                "padding": "1em",
                background: CSS.Global.root().color.neutral.primary
            }),

            items,

            itemStyle: CSS.Global.default({
                width: '24px',
                'object-fit': 'cover',
                "align-self": 'center',
                "margin-left": "4px",
                cursor: "pointer",
                animation: "none",

                $hover: {
                    animation: 'opacity-pingpong var(--animation-duration-long) infinite ease-in-out'
                }
            }),
            itemStyleProperty: "styleIcon"
        })
    }

    // |-----------------------------------------------------------------------
    // | Run out
    // |-----------------------------------------------------------------------

    Promise.resolve().then(start)

}(Scene);

Page.scene("dashboard")

You will can import script for the page, example:

Page.scene("dashboard", {
  import: "blueprint"
})