base.html

{% extends 'bootstrap4/bootstrap4.html' %}

{% load bootstrap4 %}
{% load static %}

{% block bootstrap4_extra_head %}
    <!-- Custom styles for this template -->
    <link href="{% static 'css/dashboard.css' %}" rel="stylesheet">
{% endblock %}

{% block bootstrap4_content %}

    <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
      <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="{% url 'op_webgui:index' %}">GTools</a>
      &nbsp;
      <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
          <a class="nav-link" href="{% url 'logout' %}">Sign out</a>
        </li>
      </ul>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
          <div class="sidebar-sticky">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link{% if not router_count and not asn_count %} active{% endif %}" href="{% url 'op_webgui:index' %}">
                  Overview
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link{% if router_count %} active{% endif %}" href="{% url 'op_webgui:router_list' %}">
                  Routers
                  {% if router_count %}
                  <span class="sr-only">(current)</span>
                  {% endif %}
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link{% if asn_count %} active{% endif %}" href="{% url 'op_webgui:asn_list' %}">
                  ASNs
                  {% if asn_count %}
                  <span class="sr-only">(current)</span>
                  {% endif %}
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% url 'admin:index' %}">
                  <span data-feather="users"></span>
                  Admin
                </a>
              </li>
            </ul>
          </div>
        </nav>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">{% block title %}(no title){% endblock %}</h1>
          </div>

          {% autoescape off %}{% bootstrap_messages %}{% endautoescape %}

          <div>
          {% block content %}(no content){% endblock %}
          </div>
        </main>
      </div>
    </div>

{% endblock %}