Clean up sidebar layout

This commit is contained in:
jeremystretch 2021-07-10 21:30:55 -04:00
parent facf757997
commit 726b148aa9
2 changed files with 31 additions and 23 deletions

View File

@ -6,35 +6,41 @@
{% load static %} {% load static %}
{% block layout %} {% block layout %}
<div class="container-fluid"> <div class="container-fluid px-0">
<main class="ms-sm-auto px-0"> <main class="ms-sm-auto">
{# Sidebar #} {# Sidebar #}
<nav id="sidebar-menu" class="d-md-block sidebar collapse px-0" data-simplebar> <nav id="sidebar-menu" class="d-md-block sidebar collapse px-0" data-simplebar>
{# Sidebar content #} {# Sidebar content #}
<div class="position-sticky pt-3"> <div class="position-sticky">
{# Logo #} {# Logo #}
<a class="p-1 sidebar-logo d-none d-md-flex justify-content-center" href="{% url 'home' %}"> <div class="py-2">
<img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" /> <a class="sidebar-logo d-none d-md-flex justify-content-center" href="{% url 'home' %}">
</a> <img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" />
</a>
</div>
{# Search bar #} <ul class="nav flex-column px-1">
<ul class="nav flex-column px-4">
{# Search bar for collapsed menu #}
<div class="d-block d-md-none mx-1 my-3 search-container"> <div class="d-block d-md-none mx-1 my-3 search-container">
{% search_options %} {% search_options %}
</div> </div>
<div class="d-flex d-md-none mx-1 my-3 justify-content-center justify-content-md-end order-last order-md-0"> <div class="d-flex d-md-none mx-1 my-3 justify-content-center justify-content-md-end order-last order-md-0">
{% include 'inc/profile_button.html' %} {% include 'inc/profile_button.html' %}
</div> </div>
{# Navigation menu #}
{% nav %} {% nav %}
</ul> </ul>
</div> </div>
{# Sidebar footer #} {# Sidebar footer #}
<div class="d-flex flex-column container-fluid mt-auto justify-content-end sidebar-bottom"> <div class="d-flex flex-column container-fluid mt-auto justify-content-end sidebar-bottom">
<nav class="nav justify-content-between mb-2 mt-4 px-2"> <nav class="nav justify-content-evenly my-2 px-2">
{# Documentation #} {# Documentation #}
<a type="button" class="nav-link" href="https://netbox.readthedocs.io/" target="_blank"> <a type="button" class="nav-link" href="https://netbox.readthedocs.io/" target="_blank">

View File

@ -21,7 +21,7 @@
{% for group in menu.groups %} {% for group in menu.groups %}
{# Within each main menu, there are groups of menu items #} {# Within each main menu, there are groups of menu items #}
<div class="flex-column nav px-2"> <div class="flex-column nav">
{% if menu.groups|length > 1 %} {% if menu.groups|length > 1 %}
<h6 class="accordion-item-title">{{ group.label }}</h6> <h6 class="accordion-item-title">{{ group.label }}</h6>
@ -32,23 +32,25 @@
<div class="nav-item d-flex justify-content-between align-items-center"> <div class="nav-item d-flex justify-content-between align-items-center">
{# Menu Link with Text #} {# Menu Link with Text #}
<a class="nav-link flex-grow-1 me-1" href="{% url item.url %}"> <a class="nav-link flex-grow-1" href="{% url item.url %}">
{{ item.label }} {{ item.label }}
</a> </a>
{# Add & Import Buttons #} {# Add & Import Buttons #}
<div class="btn-group"> {% if item.has_add or item.has_import %}
{% if item.has_add %} <div class="btn-group ps-1">
<a class="btn btn-sm btn-success lh-1" href="{% url item.add_url %}" title="Add {{ item.label }}"> {% if item.has_add %}
<i class="mdi mdi-plus-thick"></i> <a class="btn btn-sm btn-success lh-1" href="{% url item.add_url %}" title="Add {{ item.label }}">
</a> <i class="mdi mdi-plus-thick"></i>
{% endif %} </a>
{% if item.has_import %} {% endif %}
<a class="btn btn-sm btn-outline-success lh-1" href="{% url item.import_url %}" title="Import {{ item.label }}"> {% if item.has_import %}
<i class="mdi mdi-upload"></i> <a class="btn btn-sm btn-outline-success lh-1" href="{% url item.import_url %}" title="Import {{ item.label }}">
</a> <i class="mdi mdi-upload"></i>
{% endif %} </a>
</div> {% endif %}
</div>
{% endif %}
</div> </div>
{% endfor %} {% endfor %}