Align to the right

[MrRJ45]

I've just found Flask-Bootstrap and it has made life much easier, including the Flask-Nav integration.

I'd love to have an option for items in the Navbar to be aligned to the right - I'm happy to work on this if this is somebody anybody else would be interested.

I don't think this should be too difficult, but I want to gauge the feedback if this is something people would use.

[robkorv]

@MrRJ45 I'm also looking for a solution to align items to the right.

[robkorv]

I made a simple navigation class that covers this use case.

# nav.py
"""Navigation."""
from flask import url_for, request


class Nav(object):
    """Navigation."""

    def __init__(self, app=None):
        """Init nav."""
        self.app = app
        self.items = {}
        if app is not None:
            self.init_app(app)

    def init_app(self, app):
        """Support for Flask's factory pattern."""
        app.add_template_global(self.items, 'nav')

        self.items.update(
            {
                'navbar-nav': [
                    NavItem('Home', 'home.index')
                ],
                'navbar-right': [
                    NavItem('Login', 'user.login')
                ]
            }
        )


class NavItem(object):
    """Navigation item."""

    def __init__(self, name, endpoint):
        """Init nav item."""
        self.name = name
        self.endpoint = endpoint

    @property
    def url(self):
        """Return url for endpoint."""
        return url_for(self.endpoint)

    @property
    def is_active(self):
        """Return True when request path matches url."""
        return request.path == self.url

    @property
    def class_(self):
        """Return active when request is at this endpoint."""
        return self.is_active and 'active' or str()

{# navbar.html #}
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{ url_for('home.index') }}">MyBrand</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
{% for item in nav.get('navbar-nav') %}
                <li class="{{ item.class_ }}"><a href="{{ item.url }}">{{ item.name }}</a></li>
{% endfor %}
            </ul>
            <ul class="nav navbar-nav navbar-right">
{% for item in nav.get('navbar-right') %}
                <li class="{{ item.class_ }}"><a href="{{ item.url }}">{{ item.name }}</a></li>
{% endfor %}
            </ul>
        </div>
    </div>
</nav>

[thedod]

I've found a workaround: adding an ExtendedNavbar class, and subclassing BootstrapRenderer to render it.
Here's a gist demonstrating it on the sample app: