feat(templates/base): add the initial navbar

unb-mds · Sep 26, 2023 · bd5909a · bd5909a
1 parent 8ad63cf
commit bd5909a
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 6 deletions.
diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -12,6 +12,7 @@ django = "^4.2.5"
 psycopg2 = "^2.9.7"
 django-environ = "^0.11.2"
 django-guardian = "^2.4.0"
+django-bootstrap-v5 = "^1.0.11"
 
 [tool.poetry.group.dev.dependencies]
 pre-commit = "^3.4.0"

diff --git a/server/settings/base.py b/server/settings/base.py
@@ -72,6 +72,7 @@
 
 THIRD_PARTY_APPS = [
     "guardian",
+    "bootstrap5",
 ]
 
 LOCAL_APPS: List[str] = []

diff --git a/templates/base.html b/templates/base.html
@@ -1,18 +1,87 @@
 {% load static i18n %}
+
+{% load bootstrap5 %}
+
+{# Load CSS and JavaScript #}
+{% bootstrap_css %}
+{% bootstrap_javascript %}
+
+{# Display django.contrib.messages as Bootstrap alerts #}
+{% bootstrap_messages %}
+
 {% get_current_language as LANGUAGE_CODE %}
+
 <!DOCTYPE html>
 <html lang="{{ LANGUAGE_CODE }}">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}{% endblock title %} | Virtual Judge</title>
 </head>
-<body>
+<body class="bg-light">
   <header>
-    <nav>
-      <ul>
-        <li><a href="{% url 'login' %}">Login</a></li>
-      </ul>
+    <nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">Virtual Judge</a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a
+                class="nav-link active text-white"
+                aria-current="page"
+                href="{% url 'home' %}"
+              >
+                Home
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link text-white" href="#">
+                Contests
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link text-white" href="#">
+                Ranking
+              </a>
+            </li>
+          </ul>
+          {% if user.is_authenticated %}
+            <div class="dropdown">
+              <a
+                class="dropdown-toggle nav-link text-white"
+                href="#"
+                role="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                {{ user.username }}
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="#" class="dropdown-item">You profile</a></li>
+                <li><hr class="dropdown-divider"></li>
+                <li>
+                  <a href="{% url 'logout' %}" class="dropdown-item">
+                    Sign out
+                  </a>
+                </li>
+              </ul>
+            </div>
+          {% else %}
+            <a href="{% url 'login' %}" class="nav-link text-white">Sign in</a>
+          {% endif %}
+        </div>
+      </div>
     </nav>
   </header>