netbox/netbox/templates/base/layout.html

{# Base layout for the core NetBox UI w/navbar and page content #}
{% extends 'base/base.html' %}
{% load helpers %}
{% load navigation %}
{% load static %}
{% load i18n %}

{% comment %}
Blocks:
  header: Page header
  tabs: Horizontal navigation tabs
  content: Page content
  modals: Bootstrap 5 modal components
{% endcomment %}

{% block layout %}

  <div class="page">

    {# Sidebar #}
    <aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
      <div class="container-fluid">

        {# Header icon #}
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="navbar-brand navbar-brand-autodark">
          <a href="{% url 'home' %}">
            <img src="{% static 'netbox_logo.svg' %}" height="32" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image">
          </a>
        </h1>

        {# Navigation menu #}
        <div class="collapse navbar-collapse" id="sidebar-menu">
          {% nav %}
        </div>

      </div>
    </aside>

    {# Top menu #}
    <header class="navbar navbar-expand-md d-none d-lg-flex d-print-none">
      <div class="container-fluid">

        {# Nav menu toggle #}
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-nav flex-row align-items-center order-md-last">
          {# Dark/light mode toggle #}
          <div class="d-none d-md-flex">
            <button class="btn color-mode-toggle hide-theme-dark" title="{% trans "Enable dark mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
              <i class="mdi mdi-lightbulb"></i>
            </button>
            <button class="btn color-mode-toggle hide-theme-light" title="{% trans "Enable light mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
              <i class="mdi mdi-lightbulb-on"></i>
            </button>
          </div>

          {# User menu #}
          {% if request.user.is_authenticated %}
            <div class="nav-item dropdown">
              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                <div class="d-xl-block ps-2">
                  <div>{{ request.user }}</div>
                  <div class="mt-1 small text-secondary">{% if request.user.is_staff %}Staff{% else %}User{% endif %}</div>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" {% htmx_boost %}>
                {% if config.DJANGO_ADMIN_ENABLED and request.user.is_staff %}
                  <a class="dropdown-item" href="{% url 'admin:index' %}">
                    <i class="mdi mdi-cog"></i> {% trans "Django Admin" %}
                  </a>
                {% endif %}
                <a href="{% url 'account:profile' %}" class="dropdown-item">
                  <i class="mdi mdi-account"></i> {% trans "Profile" %}
                </a>
                <a href="{% url 'account:bookmarks' %}" class="dropdown-item">
                  <i class="mdi mdi-bookmark"></i> {% trans "Bookmarks" %}
                </a>
                <a href="{% url 'account:preferences' %}" class="dropdown-item">
                  <i class="mdi mdi-wrench"></i> {% trans "Preferences" %}
                </a>
                <a href="{% url 'account:usertoken_list' %}" class="dropdown-item">
                  <i class="mdi mdi-key"></i> {% trans "API Tokens" %}
                </a>
                <div class="dropdown-divider"></div>
                <a href="{% url 'logout' %}" class="dropdown-item">
                  <i class="mdi mdi-logout-variant"></i> {% trans "Log Out" %}
                </a>
              </div>
            </div>
          {% else %}
            <div class="btn-group ps-2">
              <a class="btn btn-primary" type="button" href="{% url 'login' %}?next={{ request.path }}">
                <i class="mdi mdi-login-variant"></i> {% trans "Log In" %}
              </a>
            </div>
          {% endif %}
          {# /User menu #}
        </div>

        {# Search box #}
        <div class="collapse navbar-collapse" id="navbar-menu">
          <form action="{% url 'search' %}" method="get" autocomplete="off" novalidate>
            <div class="input-icon">
              <span class="input-icon-addon">
                <i class="mdi mdi-magnify"></i>
              </span>
              <input type="text" name="q" value="" class="form-control" placeholder="Search…" aria-label="Search NetBox">
            </div>
          </form>
        </div>

      </div>
    </header>

    {# Page content #}
    <div class="page-wrapper">
      <div id="page-content" {% htmx_boost %}>

      {# Page header #}
      {% block header %}

        {# Top banner #}
        {% if config.BANNER_TOP %}
          {% include 'inc/banner.html' with content=config.BANNER_TOP %}
        {% endif %}
        {# /Top banner #}

        {# Alerts #}
        {% if settings.DEBUG and not settings.DEVELOPER %}
          {% include 'inc/alerts/warning.html' with title="Debug mode is enabled" message="Performance may be limited. Debugging should never be enabled on a production system." %}
        {% endif %}

        {% if config.MAINTENANCE_MODE and config.BANNER_MAINTENANCE %}
          {% include 'inc/alerts/warning.html' with title="Maintenance Mode" message=config.BANNER_MAINTENANCE|escape %}
        {% endif %}
        {# /Alerts #}

      {% endblock header %}
      {# /Page header #}

      {# Page body #}
      {% block page %}
        <div class="page-body my-1">
          <div class="container-fluid tab-content py-3">

            {# Page content #}
            {% block content %}{% endblock %}
            {# /Page content #}

          </div>
        </div>
      {% endblock page %}
      {# /Page body #}

      {# Bottom banner #}
      {% if config.BANNER_BOTTOM %}
        {% include 'inc/banner.html' with content=config.BANNER_BOTTOM %}
      {% endif %}
      {# /Bottom banner #}

      </div>

      {# Page footer #}
      <footer class="footer footer-transparent d-print-none py-2">
        <div class="container-fluid d-flex justify-content-between align-items-center">
          {% block footer %}

            {# Footer links #}
            <ul class="list-inline mb-0 fs-2">
              {% block footer_links %}
                {# Documentation #}
                <li class="list-inline-item">
                  <a href="{% static 'docs/' %}" target="_blank" class="link-secondary" rel="noopener">
                    <i title="{% trans "Docs" %}" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                  </a>
                </li>
                {# REST API #}
                <li class="list-inline-item">
                  <a href="{% url 'api-root' %}" target="_blank" class="link-secondary" rel="noopener">
                    <i title="{% trans "REST API" %}" class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                  </a>
                </li>
                {# API docs #}
                <li class="list-inline-item">
                  <a href="{% url 'api_docs' %}" target="_blank" class="link-secondary" rel="noopener">
                    <i title="{% trans "REST API documentation" %}" class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                  </a>
                </li>
                {# GraphQL API #}
                {% if config.GRAPHQL_ENABLED %}
                  <li class="list-inline-item">
                    <a href="{% url 'graphql' %}" target="_blank" class="link-secondary" rel="noopener">
                      <i title="{% trans "GraphQL API" %}" class="mdi mdi-graphql text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                    </a>
                  </li>
                {% endif %}
                {# GitHub #}
                <li class="list-inline-item">
                  <a href="https://github.com/netbox-community/netbox" target="_blank" class="link-secondary" rel="noopener">
                    <i title="{% trans "Source Code" %}" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                  </a>
                </li>
                {# NetDev Slack #}
                <li class="list-inline-item">
                  <a href="https://netdev.chat" target="_blank" class="link-secondary" rel="noopener">
                    <i title="{% trans "Community" %}" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                  </a>
                </li>
              {% endblock footer_links %}
            </ul>
            {# /Footer links #}

            {# Footer text #}
            <ul class="list-inline list-inline-dots mb-0" id="footer-stamp" hx-swap-oob="true">
              <li class="list-inline-item">
                {% annotated_now %} {% now 'T' %}
              </li>
              <li class="list-inline-item">
                {{ settings.HOSTNAME }} (v{{ settings.VERSION }})
              </li>
            </ul>
            {# /Footer text #}

          {% endblock footer %}
        </div>
      </footer>
      {# /Page footer #}

    {# /Page content #}
    </div>

    {# BS5 pop-up modals #}
    {% block modals %}{% endblock %}

  </div>
{% endblock layout %}