From c4c43135f1e3cb18577e0a65416f71b3033c729b Mon Sep 17 00:00:00 2001
From: Matthias <matthias.mair@oewf.org>
Date: Sat, 27 Nov 2021 21:23:56 +0100
Subject: [PATCH] Add base UI elements

---
 InvenTree/templates/base.html          |  1 +
 InvenTree/templates/navbar.html        | 10 ++++++++++
 InvenTree/templates/notifications.html | 14 ++++++++++++++
 3 files changed, 25 insertions(+)
 create mode 100644 InvenTree/templates/notifications.html

diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html
index 262a749bfa..fb58016607 100644
--- a/InvenTree/templates/base.html
+++ b/InvenTree/templates/base.html
@@ -121,6 +121,7 @@
     </div>
     {% include 'modals.html' %}
     {% include 'about.html' %}
+    {% include "notifications.html" %}
 </div>
 
 <!-- Scripts -->
diff --git a/InvenTree/templates/navbar.html b/InvenTree/templates/navbar.html
index f4cb245777..7f8d17dea1 100644
--- a/InvenTree/templates/navbar.html
+++ b/InvenTree/templates/navbar.html
@@ -71,6 +71,16 @@
         </button>
       </li>
       {% endif %}
+
+      <li class='nav-item me-2'>
+        <button data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" class='btn position-relative' title='{% trans "Show Notifications" %}'>
+          <span class='fas fa-bell'></span>
+          <span class="position-absolute top-100 start-100 translate-middle p-2 bg-danger border border-light rounded-circle d-none" id="notification-alert">
+            <span class="visually-hidden">{% trans "New Notifications" %}</span>
+          </span>
+        </button>
+      </li>
+
       <li class='nav-item me-2'>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-objects" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
diff --git a/InvenTree/templates/notifications.html b/InvenTree/templates/notifications.html
new file mode 100644
index 0000000000..16e11f194d
--- /dev/null
+++ b/InvenTree/templates/notifications.html
@@ -0,0 +1,14 @@
+{% load i18n %}
+<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" data-bs-scroll="true" aria-labelledby="offcanvasRightLabel">
+    <div class="offcanvas-header">
+      <h5 id="offcanvasRightLabel">{% trans "Notifications" %}</h5>
+      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body">
+      <div id="notification-center">
+        <p class='text-muted'>Notifications will load here</p>
+      </div>
+      <hr>
+      <a href="{% url 'notifications' %}">{% trans "Show all notifications and history" %}</a>
+    </div>
+</div>
\ No newline at end of file