205 lines
7.5 KiB
HTML
205 lines
7.5 KiB
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">
|
|
|
|
{# Menu toggle (mobile view) #}
|
|
<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>
|
|
|
|
{# Logo #}
|
|
<h1 class="navbar-brand navbar-brand-autodark">
|
|
<a href="{% url 'home' %}">
|
|
<img src="{% static 'netbox_logo.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image">
|
|
</a>
|
|
</h1>
|
|
|
|
{# User menu (mobile view) #}
|
|
<div class="navbar-nav flex-row d-lg-none">
|
|
{% include 'inc/user_menu.html' %}
|
|
</div>
|
|
|
|
{# 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">
|
|
|
|
<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 #}
|
|
{% include 'inc/user_menu.html' %}
|
|
</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 #}
|
|
|
|
{# BS5 pop-up modals #}
|
|
{% block modals %}{% endblock %}
|
|
|
|
</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 fs-5 mb-0" id="footer-stamp" hx-swap-oob="true">
|
|
<li class="list-inline-item">
|
|
{% now 'Y-m-d H:i:s 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>
|
|
|
|
</div>
|
|
{% endblock layout %}
|