nautobot 2.4.21__py3-none-any.whl → 3.0.0a3__py3-none-any.whl

nautobot/core/templates/inc/custom_fields/panel_data.html

@@ -1,28 +1,40 @@
 {% load helpers %}
 {% if custom_fields %}
-    <div class="panel panel-default">
-        <div class="panel-heading">
+    <div class="card">
+        <div class="card-header">
             <strong>Custom Fields</strong>
-            <button type="button"
-                    class="btn-xs btn-primary pull-right accordion-toggle-all"
-                    data-target="#custom_fields_accordion_{{ advanced_ui }}">Collapse All</button>
+            <button
+                aria-expanded="true"
+                class="btn btn-primary btn-sm float-end"
+                data-nb-target="#custom_fields_accordion_{{ advanced_ui }} .collapse"
+                data-nb-toggle="collapse-all"
+                type="button"
+            >
+                Collapse All Groups
+            </button>
         </div>
-        <table id="custom_fields_accordion_{{ advanced_ui }}" class="table table-hover panel-body attr-table">
+        <table id="custom_fields_accordion_{{ advanced_ui }}" class="table table-hover card-body attr-table">
             {% for grouping, fields in custom_fields.items %}
                 {% with forloop.counter0 as count %}
                     {% if grouping != "" %}
                         <tr>
-                            <td colspan="2"><strong>
-                                <button type="button" class="accordion-toggle mdi mdi-chevron-down"
-                                        name="grouping.{{ grouping }}" data-toggle="collapse"
-                                        data-target=".collapseme-{{ count }}">
-                                    {{ grouping }}
-                                </button></strong>
+                            <td class="position-relative" colspan="2">
+                                <button
+                                    aria-expanded="true"
+                                    class="btn float-none fs-4 fw-medium stretched-link nb-collapse-toggle"
+                                    data-bs-target=".collapseme-{{ count }}"
+                                    data-bs-toggle="collapse"
+                                    name="grouping.{{ grouping }}"
+                                    type="button"
+                                >
+                                    <span aria-hidden="true" class="mdi mdi-chevron-down me-4"></span><!--
+                                    -->{{ grouping }}
+                                </button>
                             </td>
                         </tr>
                     {% endif %}
                     {% for field, value in fields %}
-                        <tr class="collapseme-{{ count }} collapse in" data-parent="#accordion">
+                        <tr class="collapseme-{{ count }} collapse show nb-transition-none">
                             <td><span title="{{ field.description }}">{{ field }}</span></td>
                             <td>
                                 {% if field.type == 'boolean' %}
@@ -35,8 +47,8 @@
                                     {{ value|render_markdown }}
                                 {% elif field.type == 'json' and value is not None %}
                                     <p>
-                                        <button class="btn btn-xs btn-primary" type="button" data-toggle="collapse"
-                                                data-target="#cf_{{ field.key }}" aria-expanded="false"
+                                        <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="collapse"
+                                                data-bs-target="#cf_{{ field.key }}" aria-expanded="false"
                                                 aria-controls="cf_{{ field.key }}">
                                             Show/Hide
                                         </button>
@@ -47,7 +59,7 @@
                                 {% elif field.required %}
                                     <span class="text-warning">Not defined</span>
                                 {% else %}
-                                    <span class="text-muted">&mdash;</span>
+                                    <span class="text-secondary">&mdash;</span>
                                 {% endif %}
                             </td>
                         </tr>

nautobot/core/templates/inc/custom_fields_panel.html

@@ -5,11 +5,11 @@
 
 {% if object.has_computed_fields %}
     {% load computed_fields %}
-    <div class="panel panel-default">
-        <div class="panel-heading">
+    <div class="card">
+        <div class="card-header">
             <strong>Computed Fields</strong>
         </div>
-        <table class="table table-hover panel-body attr-table">
+        <table class="table table-hover card-body attr-table">
             {% computed_fields object %}
         </table>
     </div>

nautobot/core/templates/inc/dynamic_groups_panel.html

@@ -1,10 +1,10 @@
 {% load helpers %}
 {% with dynamic_groups=object.dynamic_groups_cached.all %}
-    <div class="panel panel-default">
-        <div class="panel-heading">
+    <div class="card">
+        <div class="card-header">
             <strong>Dynamic Groups</strong>
         </div>
-        <table class="table table-hover panel-body">
+        <table class="table table-hover card-body">
             {% for dg in dynamic_groups %}
                 <tr>
                     <td>{{ dg|hyperlinked_object }}</td>

nautobot/core/templates/inc/extras_features_edit_form_fields.html

@@ -1,41 +1,41 @@
 {% load form_helpers %}
 
 {% if form.custom_fields %}
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>Custom Fields</strong></div>
-        <div class="panel-body">
+    <div class="card">
+        <div class="card-header"><strong>Custom Fields</strong></div>
+        <div class="card-body">
             {% render_custom_fields form %}
         </div>
     </div>
 {% endif %}
 {% if form.relationships %}
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>Relationships</strong></div>
-        <div class="panel-body">
+    <div class="card">
+        <div class="card-header"><strong>Relationships</strong></div>
+        <div class="card-body">
             {% render_relationships form %}
         </div>
     </div>
 {% endif %}
 {% if form.object_note and perms.extras.add_note %}
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>Notes</strong></div>
-        <div class="panel-body">
+    <div class="card">
+        <div class="card-header"><strong>Notes</strong></div>
+        <div class="card-body">
             {% render_field form.object_note %}
         </div>
     </div>
 {% endif %}
 {% if form.dynamic_groups and perms.extras.add_staticgroupassociation %}
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>Static Assignment to Dynamic Groups</strong></div>
-        <div class="panel-body">
+    <div class="card">
+        <div class="card-header"><strong>Static Assignment to Dynamic Groups</strong></div>
+        <div class="card-body">
             {% render_field form.dynamic_groups %}
         </div>
     </div>
 {% endif %}
 {% if form.tags %}
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>Tags</strong></div>
-        <div class="panel-body">
+    <div class="card">
+        <div class="card-header"><strong>Tags</strong></div>
+        <div class="card-body">
             {% render_field form.tags %}
         </div>
     </div>

nautobot/core/templates/inc/footer.html

@@ -2,51 +2,101 @@
 {% load helpers %}
 {% load plugins %}
 
-<style>
-    /* Styles for viewports narrower than 1232px, i.e. bootstrap 'xs' and 'sm' layouts */
-    @media (max-width: 1232px) {
-        .footer-col-1, .footer-col-2, .footer-col-3 {
-            text-align: center !important;
-        }
-    }
-    @media (max-width: 767px) {
-        .footer .footer-links {
-            white-space: normal !important;
-        }
-    }
-
-</style>
-<footer class="footer" id="footer">
-    <div class="container-fluid">
-        <div class="row">
-            <div class="col-xl-4 col-lg-4 col-md-3 col-sm-12 col-xs-12 text-left footer-col-1 no-wrap">
+<footer id="footer">
+    <div class="container-fluid bg-body-secondary border-top text-secondary">
+        <div class="row row-cols-1 row-cols-lg-3">
+            <div class="col align-items-center d-flex flex-wrap fs-5 gap-8 justify-content-center lh-sm py-10 text-center flex-lg-nowrap justify-content-lg-start text-lg-start">
                 {% if request.user.is_authenticated %}
-                    <p class="text-muted">
-                        {% if settings.BRANDING_FILEPATHS.logo and settings.BRANDING_POWERED_BY_URL %}<a href="{{ settings.BRANDING_POWERED_BY_URL }}"><img src="{% static 'img/nautobot_logo.svg' %}" height="20" /> Powered</a> &middot;{% endif %}
-                        {{ settings.HOSTNAME }} {% if request.user.is_authenticated %} (v{{ settings.VERSION }}) {% endif %}
-                    </p>
+                    {% if settings.BRANDING_FILEPATHS.logo and settings.BRANDING_POWERED_BY_URL %}
+                        <a
+                            class="align-items-center d-inline-flex gap-4 my-n4 text-decoration-none"
+                            href="{{ settings.BRANDING_POWERED_BY_URL }}"
+                            target="_blank"
+                        >
+                            <img alt="Nautobot" src="{% static 'img/nautobot_logo.svg' %}" style="height: 1.25rem;" />
+                            Powered
+                        </a>
+                        &middot;
+                    {% endif %}
+                    <span>
+                        {{ settings.HOSTNAME }}
+                        {% if request.user.is_authenticated %}
+                            (v{{ settings.VERSION }})
+                        {% endif %}
+                    </span>
                 {% endif %}
             </div>
-            <div class="col-xl-4 col-lg-3 col-md-3 col-sm-12 col-xs-12 text-center footer-col-2">
-                <p class="text-muted">{% now 'Y-m-d H:i:s T' %}</p>
+            <div class="col fs-5 lh-sm py-10 text-center">
+                {% now 'Y-m-d H:i:s T' %}
             </div>
-            <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12 col-xs-12 text-right footer-col-3 noprint">
+            <div class="col align-items-center d-flex flex-wrap gap-8 justify-content-center py-6 text-center flex-lg-nowrap justify-content-lg-end text-lg-end">
                 {% if request.user.is_authenticated %}
-                    <p class="text-muted footer-links">
-                        <a href="#theme_modal" data-toggle="modal" data-target="#theme_modal" id="btn-theme-modal"><i class="mdi mdi-theme-light-dark text-primary"></i>Theme</a> &middot;
-                        <i class="mdi mdi-book-open-page-variant text-primary"></i>
-                        {% if settings.BRANDING_URLS.docs %}
-                            <a href="{{ settings.BRANDING_URLS.docs }}" target="_blank">Docs</a>
-                        {% else %}
-                            <a href="{% static 'docs/index.html' %}" target="_blank">Docs</a>
-                        {% endif %}
-                        &middot;
-                        <img src="{% static 'img/jinja_logo.svg' %}" style="height:20px"> <a href="{% url 'render_jinja_template' %}">Jinja Renderer</a> &middot;
-                        <i class="mdi mdi-cloud-braces text-primary"></i> <a href="{% url 'api_docs' %}">API</a> &middot;
-                        <i class="mdi mdi-graphql text-primary"></i> <a href="{% url 'graphql' %}">GraphQL</a> &middot;
-                        <i class="mdi mdi-xml text-primary"></i> <a href="{{ settings.BRANDING_URLS.code }}" target="_blank">Code</a> &middot;
-                        <i class="mdi mdi-lifebuoy text-primary"></i> <a href="{{ settings.BRANDING_URLS.help }}" target="_blank">Help</a>
-                    </p>
+                    <div class="d-flex" data-bs-toggle="tooltip" data-bs-title="Theme">
+                        <a
+                            data-bs-toggle="modal"
+                            data-bs-target="#theme_modal"
+                            href="#theme_modal"
+                            id="btn-theme-modal"
+                        >
+                            <span class="mdi mdi-theme-light-dark"></span>
+                        </a>
+                    </div>
+                    &middot;
+                    <a
+                        data-bs-toggle="tooltip"
+                        data-bs-title="Docs"
+                        href="{% if settings.BRANDING_URLS.docs %}{{ settings.BRANDING_URLS.docs }}{% else %}{% static 'docs/index.html' %}{% endif %}"
+                        target="_blank"
+                    >
+                        <span class="mdi mdi-book-open-page-variant"></span>
+                    </a>
+                    &middot;
+                    <a
+                        data-bs-toggle="tooltip"
+                        data-bs-title="Jinja Renderer"
+                        href="{% url 'render_jinja_template' %}"
+                        target="_blank"
+                    >
+                        <svg style="height: 1.25rem; width: 1.25rem;" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+                            <use href="{% static 'img/jinja_logo.svg' %}#jinja_logo" />
+                        </svg>
+                    </a>
+                    &middot;
+                    <a
+                        data-bs-toggle="tooltip"
+                        data-bs-title="API"
+                        href="{% url 'api_docs' %}"
+                        target="_blank"
+                    >
+                        <span class="mdi mdi-cloud-braces"></span>
+                    </a>
+                    &middot;
+                    <a
+                        data-bs-toggle="tooltip"
+                        data-bs-title="GraphQL"
+                        href="{% url 'graphql' %}"
+                        target="_blank"
+                    >
+                        <span class="mdi mdi-graphql"></span>
+                    </a>
+                    &middot;
+                    <a
+                        data-bs-toggle="tooltip"
+                        data-bs-title="Code"
+                        href="{{ settings.BRANDING_URLS.code }}"
+                        target="_blank"
+                    >
+                        <span class="mdi mdi-xml"></span>
+                    </a>
+                    &middot;
+                    <a
+                        data-bs-toggle="tooltip"
+                        data-bs-title="Help"
+                        href="{{ settings.BRANDING_URLS.help }}"
+                        target="_blank"
+                    >
+                        <span class="mdi mdi-lifebuoy"></span>
+                    </a>
                 {% endif %}
             </div>
         </div>

nautobot/core/templates/inc/form_static_field.html

@@ -0,0 +1,6 @@
+<div class="mb-10 d-md-flex">
+    <label class="col-md-3 col-form-label{% if required %} nb-required{% endif %}">{{ label }}</label>
+    <div class="col-md-9">
+        <p class="form-control-plaintext">{{ value }}</p>
+    </div>
+</div>

nautobot/core/templates/inc/header.html

@@ -0,0 +1,75 @@
+{% load helpers %}
+
+{% if request.user.is_authenticated %}
+    {% with is_apple_os=request.META.HTTP_USER_AGENT|split:'Mac OS X'|length|divisibleby:'2' %}
+        <form action="{% url 'search' %}" class="col-4 text-center" id="header_search" method="get" role="search">
+            <label class="position-relative w-100">
+                <input
+                    aria-placeholder="Press {% if is_apple_os %}⌘{% else %}Ctrl+{% endif %}K to search"
+                    class="form-control nb-text-transparent"
+                    name="q"
+                    type="search"
+                    value="{{ request.GET.q }}"
+                />
+                <span class="align-items-center d-inline-flex gap-6 overflow-hidden px-12 py-6 pe-none position-absolute start-0 top-0 user-select-none w-100">
+                    <span aria-hidden="true" class="mdi mdi-magnify text-secondary d-inline-flex"></span>
+                    {% if content_type %}
+                        {% for tab_name, tab_details in nav_menu.tabs.items %}
+                            {% for group_name, group_details in tab_details.groups.items %}
+                                {% for item_link, item_details in group_details.items.items %}
+                                    {% if item_details.is_active %}
+                                        <span class="badge border" data-nb-link="{{ item_link }}"><!--
+                                            -->in: {{ item_details.name }}<!--
+                                            --><button tabindex="-1" type="button">
+                                            <span aria-hidden="true" class="mdi mdi-close"></span>
+                                            <span class="visually-hidden">Remove</span>
+                                        </button>
+                                        </span>
+                                    {% endif %}
+                                {% endfor %}
+                            {% endfor %}
+                        {% endfor %}
+                    {% endif %}
+                    <span
+                        aria-hidden="true"
+                        class="align-items-center d-inline-flex gap-4 text-nowrap{% if not request.GET.q %} text-secondary{% endif %}"
+                    >
+                        {% if not request.GET.q %}
+                            Press <kbd>{% if is_apple_os %}⌘{% else %}Ctrl+{% endif %}K</kbd> to search
+                        {% else %}
+                            {{ request.GET.q }}
+                        {% endif %}
+                    </span>
+                </span>
+            </label>
+        </form>
+    {% endwith %}
+
+    <div class="col-4 text-end">
+        <div class="dropdown">
+            <button class="btn dropdown-toggle align-items-center d-inline-flex gap-6" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                <span class="align-items-center bg-primary d-inline-flex justify-content-center rounded nb-text-body-bg" style="height: 1.5rem; width: 1.5rem;">
+                    {% if request.user.get_full_name %}
+                        {% for name in request.user.get_full_name|split:" " %}<!--
+                            -->{{ name|first|upper }}<!--
+                        -->{% endfor %}
+                    {% else %}
+                        {{ request.user.username|first|upper }}
+                    {% endif %}
+                </span>
+                {% firstof request.user.get_full_name request.user.username %}
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+                <li><a class="dropdown-item" href="{% url 'about' %}"><span class="mdi mdi-information"></span>About Nautobot</a></li>
+                <li><a class="dropdown-item" href="{% url 'user:profile' %}"><span class="mdi mdi-account-box"></span>Profile</a></li>
+                <li><a class="dropdown-item" href="{% url 'extras:approver_dashboard' %}"><span class="mdi mdi-check-bold"></span>Approval Dashboard</a></li>
+                {% if request.user.is_staff %}
+                    <li><a class="dropdown-item" href="{% url 'worker_status' %}"><span class="mdi mdi-server-network"></span>Worker Status</a></li>
+                    <li><a class="dropdown-item" href="{% url 'admin:index' %}"><span class="mdi mdi-cogs"></span>Admin</a></li>
+                {% endif %}
+                <li class="dropdown-divider"></li>
+                <li><a class="dropdown-item" href="{% url 'logout' %}"><span class="mdi mdi-logout"></span>Log out</a></li>
+            </ul>
+        </div>
+    </div>
+{% endif %}

nautobot/core/templates/inc/header_banners.html

@@ -0,0 +1,17 @@
+{% load helpers %}
+{% load plugins %}
+
+{% if request.user.is_authenticated %}
+    {% if "BANNER_TOP"|settings_or_config %}
+        <div class="alert alert-info text-center" role="alert">
+            {{ "BANNER_TOP"|settings_or_config|render_markdown }}
+        </div>
+    {% endif %}
+{% endif %}
+{% if settings.MAINTENANCE_MODE %}
+    <div class="alert alert-warning text-center" role="alert">
+        <h4><span class="mdi mdi-alert me-4"></span>Maintenance Mode</h4>
+        <p>Nautobot is currently in maintenance mode. Functionality may be limited.</p>
+    </div>
+{% endif %}
+{% plugin_banners %}

nautobot/core/templates/inc/header_messages.html

@@ -0,0 +1,6 @@
+{% for message in messages %}
+    <div class="alert alert-{{ message.tags }} alert-dismissable" role="alert">
+        <button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-label="Close"></button>
+        {{ message }}
+    </div>
+{% endfor %}

nautobot/core/templates/inc/image_attachments.html

@@ -1,6 +1,6 @@
 {% comment %}3.0 TODO: Potentially remove this template pending no other references to it.{% endcomment %}
 {% if images %}
-    <table class="table table-hover panel-body">
+    <table class="table table-hover card-body">
         <tr>
             <th>Name</th>
             <th>Size</th>
@@ -10,20 +10,20 @@
         {% for attachment in images %}
             <tr{% if not attachment.size %} class="danger"{% endif %}>
                 <td>
-                    <i class="mdi mdi-file-image"></i>
+                    <span class="mdi mdi-file-image"></span>
                     <a class="image-preview" href="{{ attachment.image.url }}" target="_blank">{{ attachment }}</a>
                 </td>
                 <td>{{ attachment.size|filesizeformat }}</td>
                 <td>{{ attachment.created }}</td>
-                <td class="text-right noprint">
+                <td class="text-end d-print-none">
                     {% if perms.extras.change_imageattachment %}
-                        <a href="{% url 'extras:imageattachment_edit' pk=attachment.pk %}" class="btn btn-warning btn-xs" title="Edit image">
-                            <i class="mdi mdi-pencil" aria-hidden="true"></i>
+                        <a href="{% url 'extras:imageattachment_edit' pk=attachment.pk %}" class="btn btn-warning btn-sm" title="Edit image">
+                            <span class="mdi mdi-pencil" aria-hidden="true"></span>
                         </a>
                     {% endif %}
                     {% if perms.extras.delete_imageattachment %}
-                        <a href="{% url 'extras:imageattachment_delete' pk=attachment.pk %}" class="btn btn-danger btn-xs" title="Delete image">
-                            <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i>
+                        <a href="{% url 'extras:imageattachment_delete' pk=attachment.pk %}" class="btn btn-danger btn-sm" title="Delete image">
+                            <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
                         </a>
                     {% endif %}
                 </td>
@@ -31,7 +31,7 @@
         {% endfor %}
     </table>
 {% else %}
-    <div class="panel-body">
-        <span class="text-muted">None</span>
+    <div class="card-body">
+        <span class="text-secondary">None</span>
     </div>
 {% endif %}

nautobot/core/templates/inc/javascript.html

@@ -2,26 +2,12 @@
 {% load plugins %}
 {% load static %}
 
-<script src="{% static 'jquery/jquery-3.7.1.min.js' %}"
-        onerror="window.location='{% url 'media_failure' %}?filename=jquery/jquery-3.7.1.min.js'"></script>
-<script src="{% static 'jquery-ui-1.13.2/jquery-ui.min.js' %}"
-        onerror="window.location='{% url 'media_failure' %}?filename=jquery-ui-1.13.2/jquery-ui.min.js'"></script>
-<script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"
-        onerror="window.location='{% url 'media_failure' %}?filename=bootstrap-3.4.1-dist/js/bootstrap.min.js'"></script>
-<script src="{% static 'select2-4.0.13/select2.min.js' %}"
-        onerror="window.location='{% url 'media_failure' %}?filename=select2-4.0.13/select2.min.js'"></script>
-<script src="{% static 'clipboard.js-2.0.9/clipboard.min.js' %}"
-        onerror="window.location='{% url 'media_failure' %}?filename=clipboard.js-2.0.9/clipboard.min.js'"></script>
-<script src="{% static 'flatpickr-4.6.9/flatpickr.min.js' %}"
-        onerror="window.location='{% url 'media_failure' %}?filename=flatpickr-4.6.9/flatpickr.min.js'"></script>
-<script src="{% static 'highlight.js-11.9.0/highlight.min.js' %}"
-        onerror="window.location='{% url 'media_failure' %}?filename=highlight.js-11.9.0/highlight.min.js'"></script>
+<script src="{% static 'dist/js/nautobot.js' %}"
+        onerror="window.location='{% url 'media_failure' %}?filename=dist/js/nautobot.js'"></script>
+<script src="{% static 'dist/js/libraries.js' %}"
+        onerror="window.location='{% url 'media_failure' %}?filename=dist/js/libraries.js'"></script>
 <script src="{% versioned_static 'js/forms.js' %}"
         onerror="window.location='{% url 'media_failure' %}?filename=js/forms.js'"></script>
-<script src="{% versioned_static 'js/nav_menu.js' %}"
-        onerror="window.location='{% url 'media_failure' %}?filename=js/nav_menu.js'"></script>
-<script src="{% versioned_static 'js/theme.js' %}"
-        onerror="window.location='{% url 'media_failure' %}?filename=js/theme.js'"></script>
 <script src="{% versioned_static 'js/table_sorting_indicator.js' %}"
         onerror="window.location='{% url 'media_failure' %}?filename=js/table_sorting_indicator.js'"></script>
 <script src="{% versioned_static 'js/dropdown.js' %}"
@@ -36,12 +22,6 @@
     }).ajaxStop(function() {
         loading.hide();
     });
-    // Applies bootstrap tooltip to all elements with the title attribute.
-    // Button groups are "special" and require child tooltips to have
-    // `{ container: 'body' }` option not to break their styles:
-    // https://getbootstrap.com/docs/3.4/javascript/#markup-1
-    $("*:not(.btn-group) > [title]").tooltip();
-    $(".btn-group > [title]").tooltip({ container: 'body' });
 </script>
 <script type="text/javascript">
     hljs.configure({ cssSelector: '.language-graphql, .language-json, .language-xml, .language-yaml' });
@@ -50,3 +30,6 @@
 {% if settings.BRANDING_FILEPATHS.javascript %}
     <script src="{% custom_branding_or_static 'javascript' None %}"></script>
 {% endif %}
+{% if nav_menu %}
+    {{ nav_menu|json_script:'nav_menu' }}
+{% endif %}

nautobot/core/templates/inc/media.html

@@ -1,39 +1,14 @@
 {% load static %}
 {% load helpers %}
 {% load plugins %}
-
 <link rel="stylesheet" id="template-theme"
       href="{% url 'template_css' %}">
 <link rel="stylesheet"
-      href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=bootstrap-3.4.1-dist/css/bootstrap.min.css'">
+      href="{% static 'dist/css/nautobot.css' %}"
+      onerror="window.location='{% url 'media_failure' %}?filename=dist/css/nautobot.css'">
 <link rel="stylesheet"
-      href="{% static 'materialdesignicons-7.4.47/css/materialdesignicons.min.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=materialdesignicons-7.4.47/css/materialdesignicons.min.css'">
-<link rel="stylesheet"
-      href="{% static 'jquery-ui-1.13.2/jquery-ui.min.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=jquery-ui-1.13.2/jquery-ui.min.css'">
-<link rel="stylesheet"
-      href="{% static 'select2-4.0.13/select2.min.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=select2-4.0.13/select2.min.css'">
-<link rel="stylesheet"
-      href="{% static 'select2-bootstrap-0.1.0-beta.10/select2-bootstrap.min.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=select2-bootstrap-0.1.0-beta.10/select2-bootstrap.min.css'">
-<link rel="stylesheet"
-      href="{% static 'flatpickr-4.6.9/themes/light.min.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=flatpickr-4.6.9/themes/light.min.css'">
-<link rel="stylesheet"
-      href="{% static 'highlight.js-11.9.0/github.min.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=highlight.js-11.9.0/github.min.css'"{% if request.COOKIES|get_item:"theme" == 'dark' %} disabled="disabled"{% endif %} >
-<link rel="stylesheet"
-      href="{% static 'highlight.js-11.9.0/github-dark.min.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=highlight.js-11.9.0/github-dark.min.css'"{% if request.COOKIES|get_item:"theme" != 'dark' %} disabled="disabled"{% endif %} />
-<link rel="stylesheet" id="dark-theme"
-      href="{% versioned_static 'css/dark.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=css/dark.css'"{% if request.COOKIES|get_item:"theme" != 'dark' %} disabled="disabled"{% endif %} />
-<link rel="stylesheet" id="base-theme"
-      href="{% versioned_static 'css/base.css' %}"
-      onerror="window.location='{% url 'media_failure' %}?filename=css/base.css'">
+      href="{% static 'dist/css/materialdesignicons.css' %}"
+      onerror="window.location='{% url 'media_failure' %}?filename=dist/css/materialdesignicons.css'">
 {% if settings.BRANDING_FILEPATHS.css %}
     <link rel="stylesheet" id="custom-css" href="{% custom_branding_or_static 'css' None %}">
 {% endif %}

nautobot/core/templates/inc/modal.html

@@ -3,12 +3,12 @@
         <div class="modal-content">
             {% if title %}
                 <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     <h4 class="modal-title">{{ title }}</h4>
                 </div>
             {% endif %}
             <div class="modal-body">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 {{ content }}
             </div>
         </div>

nautobot/core/templates/inc/nav_favorites.html

@@ -0,0 +1,27 @@
+<ul class="list-unstyled">
+    {% for item in request.user.navbar_favorites %}
+        {% if item.link and item.name %}
+            <li class="nb-sidenav-link-wrapper" id="sidenav-favorite-link-{{ forloop.counter }}">
+                <a class="nb-sidenav-link flat vstack align-items-start" href="{{ item.link }}">
+                    {{ item.name }}
+                    <small class="text-secondary text-truncate">{{ item.tab_name }}</small>
+                </a>
+                <button class="nb-sidenav-favorite active"
+                        type="button"
+                        hx-post="{% url "user:navbar_favorites_delete" %}"
+                        hx-vals='{"link": "{{ item.link }}", "name": "{{ item.name }}", "tab_name": "{{ item.tab_name }}", "group_name": "{{ item.group_name }}", "remove": true}'
+                        hx-target="#sidenav-favorite-link-{{ forloop.counter }}"
+                        hx-swap="delete"
+                >
+                    <span class="visually-hidden">
+                        Remove from favorites
+                    </span>
+                </button>
+            </li>
+        {% endif %}
+    {% empty %}
+        <li class="nb-sidenav-link-group text-center" style="text-transform: none;">
+            You don't have any favorite pages yet.
+        </li>
+    {% endfor %}
+</ul>