Navegação do site

Parte da seção Fundamentos do Django do Journey de Django da Coddy. Lição 23 de 23.

O site agora tem cinco páginas com o layout compartilhado (About também ganhou um template), mas a navegação em base.html lista três páginas e nunca mostra em qual delas você está.

Todo template pode ler request, a solicitação à qual a página corresponde. O Django o adiciona ao contexto de todo template porque TEMPLATES em settings.py lista o processador de contexto request, uma função que adiciona um nome a todo contexto. request.resolver_match descreve a rota correspondente: url_name é o nome dela sem o namespace ("contact"), e view_name é o nome completo ("menu:contact"). Um layout pode mostrar uma linha em apenas uma página:

{% if request.resolver_match.url_name == "contact" %}
    <p>We reply within a day.</p>
{% endif %}

A tag também pode ficar dentro de uma tag <a>, para adicionar um atributo em apenas uma página:

<a href="/contact/"{% if request.resolver_match.url_name == "contact" %} class="active"{% endif %}>Contact</a>

Desafio

Médio

Faça a navegação indicar onde você está.

Em base.html, crie os links de navegação Home, Menu, Drinks, Hours e About, nessa ordem, cada endereço construído com {% url %}. Em cada página, somente o link para essa página recebe class="active".
Em style.css, deixe nav a.active em negrito.

Clique em cada link de navegação: somente o link da página em que você está fica em negrito.

Experimente você mesmo

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}Corner Café{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'menu/style.css' %}">
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>