aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/templates/base/navbar.html
blob: f6a1bc26ff657a14f867a1c8aa891fbb690ceda6 (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
{% load static %}

{% block head %}
    <link rel="stylesheet" href="{% static "css/base/navbar.css" %}">
    <link href="https://css.gg/css?=|moon|sun" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{% static "js/base/navbar.js" %}"></script>
{% endblock %}

<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">

      {# Burger-menu Discord #}
      <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 is-dark"><i class="fab fa-youtube"></i></span>
        <span>&nbsp;YouTube</span>
      </a>

      {# Patreon #}
      <a class="navbar-item" href="https://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">
        <span class="navbar-link is-hidden-touch">
          More
        </span>
        <span class="navbar-link is-arrowless is-hidden-desktop">
          More
        </span>
        <div class="navbar-dropdown">
          <a class="navbar-item" href="{% url "resources:index" %}" >
            Resources
          </a>
          <a class="navbar-item" href="{% url "content:pages" %}">
              Content
          </a>
          <a class="navbar-item" href="{% url "events:index" %}">
            Events
          </a>
          <a class="navbar-item" href="{% url "content:page_category" location="guides/pydis-guides/contributing"%}">
            Contributing
          </a>
          <a class="navbar-item" href="{% url "content:page_category" location="frequently-asked-questions" %}">
            FAQ
          </a>
          <a class="navbar-item" href="{% url "content:page_category" location="guides" %}">
            Guides
          </a>
          <a class="navbar-item" href="{% url 'home:timeline' %}">
            Timeline
          </a>
          <a class="navbar-item" href="{% url "content:page_category" location="rules" %}">
            Rules
          </a>
          <a class="navbar-item" href="{% url "content:page_category" location="code-of-conduct" %}">
            Code of Conduct
          </a>
          <a class="navbar-item" href="{% url "content:page_category" location="privacy" %}">
            Privacy
          </a>
        </div>
      </div>

      <div class="navbar-item">
        <div id="theme-switch" class="switch dark">
          <div class="switch-outer"></div>
          <div class="switch-inner"></div>
          <i class="theme-icon light gg-sun"></i>
          <div class="knob dark"></div>
          <i class="theme-icon dark gg-moon"></i>
        </div>
      </div>

      {# Desktop Nav Discord  #}
      <div id="discord-btn" class="buttons is-hidden-touch is-white">
        <a href="https://discord.gg/python" class="button is-large is-primary">Discord</a>
      </div>

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