aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/templates/base/navbar.html
blob: 88a13aebb34e19ea81ff894241f022e73344d8fd (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
{% load extra_filters %}
{% load static %}

{% comment %}
This template is responsible for rendering the main navigation on each page that uses it.
It requires two arguments to be set in the include:

* `dropdown` (bool):   True to render the dropdowns included, False to omit them
* `icon_weight` (str): Either "fas", "far" or "fal" to correspond with Font-Awesome's weight classes.
                       This will not affect branding icons, which have the "fab" class.
* use_logo (bool):     True to render the navbar with the site logo on the left side, False to use an
                       icon with text instead

For example, to use light icons and no dropdowns, you could use the following in your template:

{% include "base/navbar.html" with icon_weight="fal" dropdowns=False %}
{% endcomment %}

<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
  <div class="container">
    <div class="navbar-brand">
        {% if use_logo %}
          <a class="navbar-item" href="{% url "home.index" %}">
            <img src="{% static 'images/logo_site_banner.svg' %}" class="navbar-brand navbar-icon" alt="Python Discord">
          </a>
        {% else %}
          <a
            {% if active_item and request.path == "/" %}
              class="navbar-item is-active"
            {% else %}
              class="navbar-item"
            {% endif %}
            href="{% url "home.index" %}"
          >

            <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-home"></i></span>
            <span class="is-hidden-touch">&nbsp;Home</span>
          </a>
        {% endif %}

      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar_menu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-menu is-paddingless" id="navbar_menu">
      <div class="navbar-start">
        {#                    {% if dropdowns %}#}
        {#                        <div class="navbar-item has-dropdown is-hoverable">#}
        {#                            {% if request.path|starts_with:"/blog" %}#}
        {#                                <a class="navbar-link is-active" href="{% url "blog.index" %}">#}
        {#                            {% else %}#}
        {#                                <a class="navbar-link" href="{% url "blog.index" %}">#}
        {#                            {% endif %}#}
        {#                                <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-blog"></i></span>#}
        {#                                <span>&nbsp;Blog</span>#}
        {#                            </a>#}
        {##}
        {#                            <div class="navbar-dropdown is-paddingless">#}
        {#                                <a class="navbar-item" href="{% url "blog.posts" page=1 %}">#}
        {#                                    <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-quote-right"></i></span>#}
        {#                                    <span>&nbsp;Posts</span>#}
        {#                                </a>#}
        {##}
        {#                                <a class="navbar-item" href="{% url "blog.categories" %}">#}
        {#                                    <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-tag"></i></span>#}
        {#                                    <span>&nbsp;Categories</span>#}
        {#                                </a>#}
        {#                            </div>#}
        {#                        </div>#}
        {#                    {% else %}#}
        {#                        <a class="navbar-item" href="{% url "blog.index" %}">#}
        {#                            <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-blog"></i></span>#}
        {#                            <span>&nbsp;Blog</span>#}
        {#                        </a>#}
        {#                    {% endif %}#}
      </div>
      <div class="navbar-end">
        {#                    {% if request.user.is_authenticated %}#}
        {#                        {% if user.is_staff %}#}
        {#                            <a class="navbar-item" href="{% url "admin:index" %}">#}
        {#                                <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-cog"></i></span>#}
        {#                                <span>&nbsp;Admin</span>#}
        {#                            </a>#}
        {#                        {% endif %}#}
        {##}
        {#                        <a class="navbar-item" href="{% url "logout" %}">#}
        {#                            <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-unlock"></i></span>#}
        {#                            <span>&nbsp;Logout</span>#}
        {#                        </a>#}
        {#                    {% else %}#}
        {#                        {% if request.path == "/login" %}#}
        {#                            <a class="navbar-item is-active" href="{% url "login" %}">#}
        {#                                <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-lock"></i></span>#}
        {#                                <span>&nbsp;Login</span>#}
        {#                            </a>#}
        {#                        {% else %}#}
        {#                            <a class="navbar-item" href="{% url "login" %}">#}
        {#                                <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-lock"></i></span>#}
        {#                                <span>&nbsp;Login</span>#}
        {#                            </a>#}
        {#                        {% endif %}#}
        {#                    {% endif %}#}
      </div>
    </div>
  </div>
</nav>

<!-- vim: set ft=htmldjango: -->