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 %}
{% block layout %}
<div class="container-fluid">
<main class="ms-sm-auto px-0">
<div class="container-fluid px-0">
<main class="ms-sm-auto">
{# Sidebar #}
<nav id="sidebar-menu" class="d-md-block sidebar collapse px-0" data-simplebar>
{# Sidebar content #}
<div class="position-sticky pt-3">
<div class="position-sticky">
{# Logo #}
<a class="p-1 sidebar-logo d-none d-md-flex justify-content-center" href="{% url 'home' %}">
<img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" />
</a>
<div class="py-2">
<a class="sidebar-logo d-none d-md-flex justify-content-center" href="{% url 'home' %}">
<img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" />
</a>
</div>
{# Search bar #}
<ul class="nav flex-column px-4">
<ul class="nav flex-column px-1">
{# Search bar for collapsed menu #}
<div class="d-block d-md-none mx-1 my-3 search-container">
{% search_options %}
</div>
<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' %}
</div>
{# Navigation menu #}
{% nav %}
</ul>
</div>
{# Sidebar footer #}
<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 #}
<a type="button" class="nav-link" href="https://netbox.readthedocs.io/" target="_blank">

View File

@ -21,7 +21,7 @@
{% for group in menu.groups %}
{# 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 %}
<h6 class="accordion-item-title">{{ group.label }}</h6>
@ -32,23 +32,25 @@
<div class="nav-item d-flex justify-content-between align-items-center">
{# 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 }}
</a>
{# Add & Import Buttons #}
<div class="btn-group">
{% if item.has_add %}
<a class="btn btn-sm btn-success lh-1" href="{% url item.add_url %}" title="Add {{ item.label }}">
<i class="mdi mdi-plus-thick"></i>
</a>
{% endif %}
{% if item.has_import %}
<a class="btn btn-sm btn-outline-success lh-1" href="{% url item.import_url %}" title="Import {{ item.label }}">
<i class="mdi mdi-upload"></i>
</a>
{% endif %}
</div>
{% if item.has_add or item.has_import %}
<div class="btn-group ps-1">
{% if item.has_add %}
<a class="btn btn-sm btn-success lh-1" href="{% url item.add_url %}" title="Add {{ item.label }}">
<i class="mdi mdi-plus-thick"></i>
</a>
{% endif %}
{% if item.has_import %}
<a class="btn btn-sm btn-outline-success lh-1" href="{% url item.import_url %}" title="Import {{ item.label }}">
<i class="mdi mdi-upload"></i>
</a>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}