aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/templates/base/navbar.html
blob: f07662ae8f1ea498cd99827686580c57bb823334 (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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
{% load socialaccount %}
{% load static %}

<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">

    <a id="navbar-banner" class="navbar-item has-left-margin-1" href="/">
      <img src="{% static "images/navbar/pydis_banner_no_square.svg" %}" alt="Python Discord logo"/>
    </a>

    {# The navbar "burger" which appears when rendered on screens that can't fit the entire nav #}
    <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>

  {# Content on the right side of the navbar #}
  <div class="navbar-menu is-paddingless" id="navbar_menu">
    <div class="navbar-end">

      {# Discord invite - only visible in the hamburger on mobile sizes. #}
      <a class="navbar-item is-hidden-desktop" href="https://discord.gg/python">
        <span class="icon is-size-4 is-medium"><i class="fab fa-discord"></i></span>
        <span>&nbsp;Discord</span>
      </a>

      {# GitHub #}
      <a class="navbar-item" href="https://github.com/python-discord">
        <span class="icon is-size-4 is-medium"><i class="fab fa-github"></i></span>
        <span>&nbsp;GitHub</span>
      </a>

      {# Reddit #}
      <a class="navbar-item" href="https://reddit.com/r/python">
        <span class="icon is-size-4 is-medium"><i class="fab fa-reddit-alien"></i></span>
        <span>&nbsp;Reddit</span>
      </a>

      {# YouTube #}
      <a class="navbar-item" href="https://youtube.com/pythondiscord">
        <span class="icon is-size-4 is-medium"><i class="fab fa-youtube"></i></span>
        <span>&nbsp;YouTube</span>
      </a>

      {# Patreon #}
      <a class="navbar-item" href="http://patreon.com/python_discord">
        <span class="icon is-size-4 is-medium"><i class="fab fa-patreon"></i></span>
        <span>&nbsp;Patreon</span>
      </a>

      {# Merch #}
      <a class="navbar-item" href="https://www.redbubble.com/people/PythonDiscord/shop">
        <span class="icon is-size-4 is-medium"><i class="fas fa-tshirt"></i></span>
        <span>&nbsp;Merch</span>
      </a>

      {# More #}
      <div class="navbar-item has-dropdown is-hoverable has-left-margin-1">
        <a class="navbar-link">
          More
        </a>
        <div class="navbar-dropdown">
          <a class="navbar-item" href="{% url 'wiki:get' path="resources/" %}">
            Resources
          </a>
          <a class="navbar-item" href="{% url 'wiki:get' path="resources/tools/" %}">
            Tools
          </a>
          <a class="navbar-item" href="{% url 'wiki:get' path="contributing/" %}">
            Contributing
          </a>
          <a class="navbar-item" href="{% url 'wiki:get' path="frequently-asked-questions/" %}">
            FAQ
          </a>
          <a class="navbar-item" href="{% url 'wiki:get' path="rules/" %}">
            Rules
          </a>
          <a class="navbar-item" href="{% url 'wiki:get' path="code-of-conduct/" %}">
            Code of Conduct
          </a>
          <a class="navbar-item" href="{% url 'wiki:get' path="privacy/" %}">
            Privacy
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            <strong>Events</strong>
          </div>
          <a class="navbar-item" href="{% url 'wiki:get' path="code-jams/code-jam-7/" %}">
            Upcoming: Code Jam 7
          </a>
          <a class="navbar-item" href="{% url 'wiki:get' path="events/" %}">
            All events
          </a>
          <hr class="navbar-divider">

          {% if not user.is_authenticated %}
            {% get_providers as socialaccount_providers %}

            {% for provider in socialaccount_providers %}
              {% if provider.id == "discord" %}
                  <a class="navbar-item"
                     href="{% provider_login_url provider.id process="login" scope=scope auth_params=auth_params %}"
                  >Login with {{ provider.name }}</a>
              {% endif %}
            {% endfor %}
          {% else %}
            <form method="post" action="{% url 'logout' %}">
              {% csrf_token %}

              <div class="field navbar-item is-paddingless is-fullwidth is-grouped">
                <button type="submit" class="button is-white is-inline is-fullwidth has-text-left is-size-navbar-menu has-text-grey-dark">Logout</button>
                <a title="Settings" class="button is-white is-inline has-text-right is-size-navbar-menu has-text-grey-dark modal-button" data-target="account-modal">
                  <span class="is-icon">
                    <i class="fas fa-cog"></i>
                  </span>
                </a>
              </div>
            </form>
          {% endif %}

        </div>
      </div>
    </div>

    {# Join us on Discord! #}
    <a class="navbar-item is-fullsize has-no-highlight has-left-margin-1" href="https://discord.gg/python">
      <img class="is-hidden-touch" src="{% static "images/navbar/navbar_discordjoin.svg" %}" alt="Join us on Discord!"/>
    </a>
  </div>
</nav>

{% if user.is_authenticated %}
  <script defer type="text/javascript">
    // Script which loads and sets up the account settings modal.
    // This script must be placed in a template, or rewritten to take the fetch
    // URL as a function argument, in order to be used.

    "use strict";

    // Create and prepend a new div for this modal
    let element = document.createElement("div");
    document.body.prepend(element);

    fetch("{% url "account_settings" %}")   // Fetch the URL
      .then((response) => response.text())  // Read in the data stream as text
      .then((text) => {
        element.outerHTML = text;  // Replace the div's HTML with the loaded modal HTML
        setupModal(document.getElementById("account-modal"));  // Set up the modal
      });
  </script>
{% endif %}