Skip to content

Update Navigation Bar

Jump to bottom
Manish Sah edited this page Sep 30, 2020 · 1 revision

we have logout and profile route but there is no link for these routes in our navigation bar. lets update our navigation bar to include these links.

we will need to update our layout.html file. we will update our navigation bar so that user can see login and register links when are not logged in and profile and logout links when they are logged in. We will use if-else control statement of jinja to implement these.

we will replace our login and logout container with these codes

<div class="navbar-nav">
                    {% if current_user.is_authenticated %}
                        <a class="nav-item nav-link" href="/profile">Profile</a>
                        <a class="nav-item nav-link" href="/logout">logout</a>
                    {% else %}
                        <a class="nav-item nav-link" href="/login">Login</a>
                        <a class="nav-item nav-link" href="/registration">Register</a>
                    {% endif %}


                </div>

We will also update our code for displaying flash messages to include the categories. To get the category from flash messages we will pass an attribute called 'with_categories=True' in get_flashed_message() method.

Replace code for displaying flashed messages with these

{% with messages = get_flashed_messages(with_categories=True) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{category}}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif%}
{% endwith %}
{% block content %}
{% endblock content %}

our final code (layout.html) will look like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="static/main.css" type="text/css">
    {% if title_name %}
    <title>{{ title_name }}</title>
    {% else %}
    <title>Title</title>
    {% endif %}
</head>
<body>
<header class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
        <div class="container">
            <a class="navbar-brand mr-4" href="/">Flask Blog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle"
                    aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarToggle">
                <div class="navbar-nav mr-auto">
                    <a class="nav-item nav-link" href="/">Home</a>
                    <a class="nav-item nav-link" href="/about">About</a>
                </div>
                <!-- Navbar Right Side -->
                <div class="navbar-nav">
                    {% if current_user.is_authenticated %}
                    <a class="nav-item nav-link" href="/profile">Profile</a>
                    <a class="nav-item nav-link" href="/logout">logout</a>
                    {% else %}
                    <a class="nav-item nav-link" href="/login">Login</a>
                    <a class="nav-item nav-link" href="/registration">Register</a>
                    {% endif %}


                </div>
            </div>
        </div>
    </nav>
</header>

{% with messages = get_flashed_messages(with_categories=True) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{category}}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif%}
{% endwith %}
{% block content %}
{% endblock content %}

</body>
</html>

Implementation can be found over this commit

Clone this wiki locally