Vertical Nav Bar

In our first session we created a simple schema for our Navigation bar. Now that we have all screens created let's go a step a head and create the full schema.

Action And Dropdown

Each item of our schema can be of type "Action" or "Dropdown". Creating a dropdown means that we are nesting items, creating a sub-menu. In our example we have the dropdown "Manage Tasks".

Vertical Nav Bar

ClearCollect(
    globalnav,
    {
        type: "Action",
        title: "Dashboard",
        key: "dashboard",
        icon: "chart-line"
    },
    {
        type: "DropDown",
        title: "Manage Tasks",
        icon: "edit",
        key: "alltasks",
        dropDown: [
            {
        type: "Action",
        title: "New task",
        icon: "plus",
        key: "newtask"
    },
    {
        type: "Action",
        title: "All tasks",
        icon: "clipboard-list",
        key: "alltasks"
    }
        ]
    },
 
    {
        type: "Action",
        title: "List view",
        key: "list",
        icon: "list"
    },
    {
        type: "Action",
        title: "Kanban",
        key: "kanban",
        icon: "address-card"
    },
    {
        type: "Action",
        title: "Roadmap",
        key: "roadmap",
        icon: "map"
    }
);

Configuring action

Now that the schema is ready we can create actions for each of the items. Notice that on the schema presented previously we have a property called key. We can get this as an output property. Nav Bar has an OnChange property that is triggered everytime an interaction happens. On the snippet below we are using the switch statement to check the current key and Navigate to some screen.

Notice that we are using Self to refer to the nav bar

Switch(
    Self.CurrentKey,
    "newtask",
    Navigate(
        'New Task Screen',
        Fade
    );
    NewForm(Form_tasks),
    "alltasks",
    Navigate(
        'Tasks Screen',
        Fade
    ),
    "list",
    Navigate(
        'Listview Screen',
        Fade
    ),
    "dashboard",
    Navigate(
        'Dashboard Screen',
        Fade
    ),
    "kanban",
    Navigate(
        'Kanban Screen',
        Fade
    ),
    "roadmap",
    Navigate(
        'Roadmap Screen',
        Fade
    )
)