diff options
Diffstat (limited to 'pydis_site/templates/base/navbar.html')
| -rw-r--r-- | pydis_site/templates/base/navbar.html | 120 |
1 files changed, 75 insertions, 45 deletions
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 73e3917a..5e76b3a6 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -1,60 +1,90 @@ {% 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: +<nav class="navbar is-primary" role="navigation" aria-label="main navigation"> + <div class="navbar-brand"> -* `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 + <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> -For example, to use light icons and no dropdowns, you could use the following in your template: + {# 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> -{% include "base/navbar.html" with icon_weight="fal" dropdowns=False %} + {# Content on the right side of the navbar #} + <div class="navbar-menu is-paddingless" id="navbar_menu"> + <div class="navbar-end"> -This template is based on the navbar template found here: - https://github.com/gdude2002/gserv.me/blob/20f491836342925dc67b08e1bd0ea2ed29610da8/base/templates/base/navbar.html + {# 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> Discord</span> + </a> -{% endcomment %} + {# 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> GitHub</span> + </a> -<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"> Home</span> - </a> - {% endif %} + {# 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> Reddit</span> + </a> - <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> + {# 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> YouTube</span> </a> - </div> - <div class="navbar-menu is-paddingless" id="navbar_menu"> - <div class="navbar-start"> - {# Content on the left side of the navbar #} - </div> - <div class="navbar-end"> - {# Content on the right sside of the navbar #} + + {# 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> 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> 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"> + Resources + </a> + <a class="navbar-item"> + FAQ + </a> + <a class="navbar-item"> + Rules + </a> + <a class="navbar-item"> + Privacy + </a> + <hr class="navbar-divider"> + <a class="navbar-item"> + Code Jams + </a> + </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> |