© 2021 Leviy

Navigation drawer

Usage

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

The javascript initialization is handled automatically and makes the Navdrawer toggle work.

import Navdrawer from 'leviy/user-interface/components/navdrawer/Navdrawer';

const navdrawer = new Navdrawer();
navdrawer.initialize();

Remove

To remove the navigation drawer overwrite the navdrawer block with empty content. Like this:

{% block navdrawer %}{% endblock %}

Customize

Within the navdrawer block their are a couple of blocks that can be used to further customize the navigation drawer:

navdrawerHeader
Logo and name of the organization of the logged in user. Renders empty by default.
localNavigation
Local navigation in addition to the toolbar navigation. Renders empty by default.

It's a good practise to define the `navdrawerHeader` block in the base template of the microservice, to create consistency throughout the microservice. The `localNavigation` block definition isn't mandatory, because it renders empty by default. When you define a `localNavigation` block it's a good practise to put this block definition above the `content` block definition.

Organization header

{% block navdrawerHeader %}
    {% include '@leviy-templates/components/navdrawer/organization-header.html.twig' with {
        'organization': {
            'logo': 'http://acmelogos.com/images/logo-4.svg',
            'name': 'Acme'
        }
    } %}
{% endblock %}

Regular header

{% block navdrawerHeader %}
    {% include '@leviy-templates/components/navdrawer/regular-header.html.twig' with {
        'title': 'Regular header'
    } %}
{% endblock %}

Local navigation

{% block localNavigation %}
    {% include '@leviy-templates/components/navdrawer/local-navigation.html.twig' with {
        'menu': [
            {'label': 'Item 1', 'icon': 'rv_hookup', 'uri': '#item', 'current': true, 'menu': [
                {'label': 'Sub item 1', 'icon': 'hot_tub', 'uri': '#sub_item1'},
                {'label': 'Sub item 2', 'icon': 'child_care', 'uri': '#sub_item1', 'current': true},
            ]},
            {'divider': true},
            {'subheader': 'Header'},
            {'label': 'Item 2', 'uri': '#item'},
            {'label': 'Item 3', 'uri': '#item'},
            {'divider': true},
            {'subheader': 'Outgoing links'},
            {'label': 'Item 4', 'uri': 'http://www.leviy.com', 'linkAttributes': {'target': '_blank'}},
        ]
    } %}
{% endblock %}

To make our live a little bit easier the local-navigation component is compatible with KnpMenuBundle:

{% block localNavigation %}
    {% include '@leviy-templates/components/navdrawer/local-navigation.html.twig' with {
        'menu': knp_menu_get('local_navigation')
    } %}
{% endblock %}

Valid extra options for $child->setExtra('...', '...');.

icon
A valid Material.io icon to show with the menu item.
subheader
Adds a subheader before the menu item.
divider
Either prepend or append. Adds a divider either before or after the menu item.

The whole shebang

{% block navdrawerHeader %}
    {% include '@leviy-templates/components/navdrawer/organization-header.html.twig' with {
        'organization': {
            'logo': 'http://acmelogos.com/images/logo-4.svg',
            'name': 'Acme'
        }
    } %}
{% endblock %}

{% block localNavigation %}
    {% include '@leviy-templates/components/navdrawer/local-navigation.html.twig' with {
        'menu': [
            {'label': 'Item 1', 'uri': '#item', 'current': true, 'menu': [
                {'label': 'Sub item 1', 'uri': '#sub_item1'},
                {'label': 'Sub item 2', 'uri': '#sub_item1', 'current': true},
            ]},
            {'divider': true},
            {'subheader': 'Header'},
            {'label': 'Item 2', 'uri': '#item'},
            {'label': 'Item 3', 'uri': '#item'},
        ]
    } %}
{% endblock %}