© 2021 Leviy

Toolbar

Usage

When you extend the base template of the microservice to @leviy-templates/base.html.twig, there will be a toolbar displayed by default.

Remove

To remove the toolbar overwrite the toolbar block with empty content. Like this:

{% block toolbar %}{% endblock %}

Customize

Within the toolbar block there are a couple of blocks that can be used to further customize the toolbar:

toolbarTitle
Title of the toolbar which defaults to the (global) variable service.title or empty string when the variable doesn't exists.
toolbarNavigation
Additional navigation items. Renders empty by default.
appSwitcher
Block where the app switcher component can be rendered in. Renders empty by default.
profileMenu
Block where the profile menu component can be rendered in. Renders empty by default.

It's a good practise to define these blocks in the base template of the microservice, to create consistency throughout the microservice. Whenever a certain implementation template needs a different customization, for instance an extra toolbar navigation item, it's a good practise to put these block definitions above the content block definition.

Toolbar title

{% block toolbarTitle 'My first toolbar' %}

Toolbar navigation

{% block toolbarNavigation %}
    {% include '@leviy-templates/components/toolbar/toolbar-navigation.html.twig' with {
        'menu': [
            {'label': 'Support', 'icon': 'support', 'uri': '#', 'external': true},
            {'label': 'Notifications', 'icon': 'notifications', 'uri': '#'},
            {'label': 'Settings', 'icon': 'settings', 'uri': '#'},
        ]
    } %}
{% endblock %}

App switcher

{% block appSwitcher %}
    {% include '@leviy-templates/components/toolbar/app-switcher.html.twig' with {
        'apps': [
            {
                'id': 'files',
                'url': 'https://files.leviy.com',
                'new': true
            },
            {
                'id': 'dashboard',
                'url': 'https://dashboard.leviy.com'
            },
        ]
    } %}
{% endblock %}

Profile menu

{% block profileMenu %}
    {% include '@leviy-templates/components/toolbar/profile-menu.html.twig' with {
        'user': {
            'name': 'Peter Koning',
            'emailAddress': 'hopper+peter-koning@leviy.com',
            'preferred_locale': 'en_GB'
        },

        // when not set the 'view profile button' will not be rendered
        'viewProfile': {
            'url': '#',
        },

        // when not set the 'language switcher' will not be rendered
        'availableLocales': [
            'en_GB',
            'nl_NL',
            'fr_FR',
            'de_DE',
            'it_IT',
            'es_ES',
        ],

        // when not set the 'logout link' will not be rendered
        'logout': {
            'url': '#',
        },
    } %}
{% endblock %}

The whole shebang

{% block toolbarTitle 'My first toolbar' %}

{% block toolbarNavigation %}
    {% include '@leviy-templates/components/toolbar/toolbar-navigation.html.twig' with {
        'menu': [
            {'label': 'Notifications', 'icon': 'notifications', 'uri': '#'},
            {'label': 'Settings', 'icon': 'settings', 'uri': '#'},
        ]
    } %}
{% endblock %}

{% block appSwitcher %}
    {% include '@leviy-templates/components/toolbar/app-switcher.html.twig' with {
        'apps': [
            {
                'id': 'files',
                'url': 'https://files.leviy.com',
                'new': true
            },
            {
                'id': 'dashboard',
                'url': 'https://dashboard.leviy.com'
            },
        ]
    } %}
{% endblock %}

{% block profileMenu %}
    {% include '@leviy-templates/components/toolbar/profile-menu.html.twig' with {
        'user': {
            'name': 'Peter Koning',
            'emailAddress': 'hopper+peter-koning@leviy.com',
            'preferred_locale': 'en_GB'
        },
        'viewProfile': {
            'url': '#',
        },
        'availableLocales': [
            'en_GB',
            'nl_NL',
            'fr_FR',
            'de_DE',
            'it_IT',
            'es_ES',
        ],
        'logout': {
            'url': '#',
        },
    } %}
{% endblock %}