hack4impact/flask-base

{# This macro is called on the user dashboards. In this case the administrator dashboard
   at the route admin.index
#}

{% macro render_menu_items(endpoints) %}
    {% for endpoint, name, icon in endpoints %}
        <a class="item {% if request.endpoint == endpoint %}active{% endif %}" href="{{ url_for(endpoint) }}">
            {% if icon %}
                <i class="{{ icon }} icon"></i>
            {% endif %}
            {{ name | safe }}
        </a>
    {% endfor %}
{% endmacro %}

{# This is called for all users (including anonymous users). It renders the basic left side of the 
   navigation bar. In the default case, the left hand side will read 'Flask-Base'. In the logged in
   admin case, there will also be an item that links to admin/ route. I have added an example use of
   render_menu_items.
#}

{% macro menu_items(current_user) %}
    {% set endpoints = [
      ('main.about', 'About', 'info')
    ]%}
    {% set user = [] %}
    {% if current_user.is_authenticated %}
      {% set user = ([(current_user.role.index + '.index', current_user.role.name + ' Dashboard', 'user')]) %}
    {% endif %} 
    {{ render_menu_items( endpoints +  user ) }}
{% endmacro %}

{% macro header_items(current_user) %}
       {% set endpoints = [
        ('main.index', config.APP_NAME, 'home'),
      ] %}
     {{ render_menu_items( endpoints ) }}
 {% endmacro %}

{# This renders the right hand side of the navigation bar. If the user is logged in, it links to 
   manage their account and logout (account routes). Otherwise, it links to register and login.
#}
{% macro account_items(current_user) %}
    {% if current_user.is_authenticated %}
      {% set endpoints = [
        ('account.manage', 'Your Account', 'settings'),
        ('account.logout', 'Log out', 'sign out')
      ] %}
      {{ render_menu_items(endpoints) }}
    {% else %}
      {% set endpoints = [
        ('account.register', 'Register', 'list layout'),
        ('account.login', 'Log In', 'sign in')
      ] %}
      {{ render_menu_items(endpoints) }}
    {% endif %}
{% endmacro %}

{% macro mobile_nav(current_user, dropdown=None) %}
    <div class="mobile only row">
        <div class="ui fixed inverted black main menu">
            {{ header_items(current_user) }}
            {{ create_dropdown(dropdown) }}
            <div class="right menu">
                <a class="icon item" id="open-nav"><i class="sidebar icon"></i></a>
            </div>
        </div>

        {# The menu items which will be shown when open-nav is clicked #}
        <div class="ui fixed vertical fluid menu">
          {{ menu_items(current_user) }}
          {{ account_items(current_user) }}
          {{ create_dropdown(dropdown) }}
        </div>
    </div>
{% endmacro %}

{% macro create_dropdown(dropdown) %}
  {% for item in dropdown %}
    {% if item | length == 3 %}
      {{ render_menu_items([item]) }}
    {% elif item | length == 2 %}
      <div class="ui dropdown item" onClick="changeMenu(this)">{{ item[0] }} <i class="dropdown icon"></i>
        <div class="inverted black menu">
          {{ create_dropdown(item[1]) }}
        </div>
      </div>
    {% endif %}
  {% endfor %}
{% endmacro %}

{% macro desktop_nav(current_user, dropdown=None) %}
    <div class="computer tablet only row">
        <div class="ui fixed inverted black main menu">
            <div class="ui container">
                {{ header_items(current_user) }}
                {{ menu_items(current_user) }}
                {{ create_dropdown(dropdown) }}
                <div class="right menu">
                    {{ account_items(current_user) }}
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{% macro render_nav(current_user, dropdown=[]) %}
    <nav class="ui navigation grid {% if endpoints %}has-submenu{% endif %}">
        {{ mobile_nav(current_user, dropdown=dropdown) }}
        {{ desktop_nav(current_user, dropdown=dropdown) }}
    </nav>
{% endmacro %}