Browse Source

Redesigned the navigation menus

Jeremy Stretch 7 years ago
parent
commit
77182d8711
3 changed files with 424 additions and 293 deletions
  1. 13 0
      netbox/project-static/css/base.css
  2. 1 293
      netbox/templates/_base.html
  3. 410 0
      netbox/templates/inc/nav_menu.html

+ 13 - 0
netbox/project-static/css/base.css

@@ -85,6 +85,19 @@ footer p {
 li.subnav > a {
     padding-left: 30px;
 }
+ul.dropdown-menu {
+    width: 250px;
+}
+ul.dropdown-menu div.buttons {
+    padding-right: 10px;
+    padding-top: 2px;
+}
+ul.dropdown-menu div.buttons a {
+    width: 26px;
+}
+ul.dropdown-menu > li > a {
+    clear: left;
+}
 
 /* Forms */
 label {

+ 1 - 293
netbox/templates/_base.html

@@ -12,299 +12,7 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 </head>
 <body>
-    <nav class="navbar navbar-default navbar-fixed-top">
-        <div class="container">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="{% url 'home' %}">
-                    <img src="{% static 'img/netbox_logo.png' %}" />
-                </a>
-            </div>
-            <div id="navbar" class="navbar-collapse collapse">
-                {% if request.user.is_authenticated or not settings.LOGIN_REQUIRED %}
-                <ul class="nav navbar-nav">
-                    <li class="dropdown{% if request.path|contains:'/dcim/sites/,/dcim/regions/,/tenancy/,/extras/reports/' %} active{% endif %}">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Organization <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{% url 'dcim:site_list' %}"><strong>Sites</strong></a></li>
-                            {% if perms.dcim.add_site %}
-                                <li class="subnav"><a href="{% url 'dcim:site_add' %}"><i class="fa fa-plus"></i> Add a Site</a></li>
-                                <li class="subnav"><a href="{% url 'dcim:site_import' %}"><i class="fa fa-download"></i> Import Sites</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'dcim:region_list' %}"><strong>Regions</strong></a></li>
-                            {% if perms.dcim.add_region %}
-                                <li class="subnav"><a href="{% url 'dcim:region_add' %}"><i class="fa fa-plus"></i> Add a Region</a></li>
-                                <li class="subnav"><a href="{% url 'dcim:region_import' %}"><i class="fa fa-download"></i> Import Regions</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'tenancy:tenant_list' %}"><strong>Tenants</strong></a></li>
-                            {% if perms.tenancy.add_tenant %}
-                                <li class="subnav"><a href="{% url 'tenancy:tenant_add' %}"><i class="fa fa-plus"></i> Add a Tenant</a></li>
-                                <li class="subnav"><a href="{% url 'tenancy:tenant_import' %}"><i class="fa fa-download"></i> Import Tenants</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'tenancy:tenantgroup_list' %}"><strong>Tenant Groups</strong></a></li>
-                            {% if perms.tenancy.add_tenantgroup %}
-                                <li class="subnav"><a href="{% url 'tenancy:tenantgroup_add' %}"><i class="fa fa-plus"></i> Add a Tenant Group</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'extras:report_list' %}"><strong>Reports</strong></a></li>
-                        </ul>
-                    </li>
-                    <li class="dropdown{% if request.path|contains:'/dcim/rack' %} active{% endif %}">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Racks <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{% url 'dcim:rack_list' %}"><strong>Racks</strong></a></li>
-                            {% if perms.dcim.add_rack %}
-                                <li class="subnav"><a href="{% url 'dcim:rack_add' %}"><i class="fa fa-plus"></i> Add a Rack</a></li>
-                                <li class="subnav"><a href="{% url 'dcim:rack_import' %}"><i class="fa fa-download"></i> Import Racks</a></li>
-                            {% endif %}
-                            <li><a href="{% url 'dcim:rack_elevation_list' %}"><strong>Rack Elevations</strong></a></li>
-                            <li class="divider"></li>
-                            <li><a href="{% url 'dcim:rackgroup_list' %}"><strong>Rack Groups</strong></a></li>
-                            {% if perms.dcim.add_rackgroup %}
-                                <li class="subnav"><a href="{% url 'dcim:rackgroup_add' %}"><i class="fa fa-plus"></i> Add a Rack Group</a></li>
-                                <li class="subnav"><a href="{% url 'dcim:rackgroup_import' %}"><i class="fa fa-download"></i> Import Rack Groups</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'dcim:rackrole_list' %}"><strong>Rack Roles</strong></a></li>
-                            {% if perms.dcim.add_rackrole %}
-                                <li class="subnav"><a href="{% url 'dcim:rackrole_add' %}"><i class="fa fa-plus"></i> Add a Rack Role</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'dcim:rackreservation_list' %}"><strong>Rack Reservations</strong></a></li>
-                        </ul>
-                    </li>
-                    <li class="dropdown{% if request.path|contains:'/dcim/device,/dcim/manufacturers/,/dcim/platforms/' %} active{% endif %}">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Devices <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{% url 'dcim:device_list' %}"><strong>Devices</strong></a></li>
-                            {% if perms.dcim.add_device %}
-                                <li class="subnav"><a href="{% url 'dcim:device_add' %}"><i class="fa fa-plus"></i> Add a Device</a></li>
-                                <li class="subnav"><a href="{% url 'dcim:device_import' %}"><i class="fa fa-download"></i> Import Devices</a></li>
-                            {% endif %}
-                            {% if perms.ipam.add_device or perms.ipam.add_devicetype %}
-                                <li class="divider"></li>
-                            {% endif %}
-                            <li><a href="{% url 'dcim:devicetype_list' %}"><strong>Device Types</strong></a></li>
-                            {% if perms.dcim.add_devicetype %}
-                                <li class="subnav"><a href="{% url 'dcim:devicetype_add' %}"><i class="fa fa-plus"></i> Add a Device Type</a></li>
-                                <li class="subnav"><a href="{% url 'dcim:devicetype_import' %}"><i class="fa fa-download"></i> Import Device Types</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'dcim:devicerole_list' %}"><strong>Device Roles</strong></a></li>
-                            {% if perms.dcim.add_devicerole %}
-                                <li class="subnav"><a href="{% url 'dcim:devicerole_add' %}"><i class="fa fa-plus"></i> Add a Device Role</a></li>
-                            {% endif %}
-                            {% if perms.dcim.add_devicerole or perms.dcim.add_manufacturer %}
-                                <li class="divider"></li>
-                            {% endif %}
-                            <li><a href="{% url 'dcim:manufacturer_list' %}"><strong>Manufacturers</strong></a></li>
-                            {% if perms.dcim.add_manufacturer %}
-                                <li class="subnav"><a href="{% url 'dcim:manufacturer_add' %}"><i class="fa fa-plus"></i> Add a Manufacturer</a></li>
-                                <li class="subnav"><a href="{% url 'dcim:manufacturer_import' %}"><i class="fa fa-download"></i> Import Manufacturers</a></li>
-                            {% endif %}
-                            {% if perms.dcim.add_manufacturer or perms.dcim.add_platform %}
-                                <li class="divider"></li>
-                            {% endif %}
-                            <li><a href="{% url 'dcim:platform_list' %}"><strong>Platforms</strong></a></li>
-                            {% if perms.dcim.add_platform %}
-                                <li class="subnav"><a href="{% url 'dcim:platform_add' %}"><i class="fa fa-plus"></i> Add a Platform</a></li>
-                            {% endif %}
-                        </ul>
-                    </li>
-                    <li class="dropdown{% if request.path|contains:'/dcim/console-connections/,/dcim/power-connections/,/dcim/interface-connections/' %} active{% endif %}">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connections <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{% url 'dcim:console_connections_list' %}"><strong>Console Connections</strong></a></li>
-                            {% if perms.dcim.change_consoleport %}
-                                <li class="subnav"><a href="{% url 'dcim:console_connections_import' %}"><i class="fa fa-download"></i> Import Console Connections</a></li>
-                            {% endif %}
-                            {% if perms.ipam.change_consoleport or perms.ipam.change_powerport %}
-                                <li class="divider"></li>
-                            {% endif %}
-                            <li><a href="{% url 'dcim:power_connections_list' %}"><strong>Power Connections</strong></a></li>
-                            {% if perms.dcim.change_powerport %}
-                                <li class="subnav"><a href="{% url 'dcim:power_connections_import' %}"><i class="fa fa-download"></i> Import Power Connections</a></li>
-                            {% endif %}
-                            {% if perms.ipam.change_powerport or perms.ipam.add_interfaceconnection %}
-                                <li class="divider"></li>
-                            {% endif %}
-                            <li><a href="{% url 'dcim:interface_connections_list' %}"><strong>Interface Connections</strong></a></li>
-                            {% if perms.dcim.add_interfaceconnection %}
-                                <li class="subnav"><a href="{% url 'dcim:interface_connections_import' %}"><i class="fa fa-download"></i> Import Interface Connections</a></li>
-                            {% endif %}
-                        </ul>
-                    </li>
-                    <li class="dropdown{% if request.path|contains:'/ipam/' and not request.path|contains:'/ipam/vlan' %} active{% endif %}">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">IP Space <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{% url 'ipam:ipaddress_list' %}"><strong>IP Addresses</strong></a></li>
-                            {% if perms.ipam.add_ipaddress %}
-                                <li class="subnav"><a href="{% url 'ipam:ipaddress_add' %}"><i class="fa fa-plus"></i> Add an IP</a></li>
-                                <li class="subnav"><a href="{% url 'ipam:ipaddress_import' %}"><i class="fa fa-download"></i> Import IPs</a></li>
-                            {% endif %}
-                            {% if perms.ipam.add_ipaddress or perms.ipam.add_prefix %}
-                                <li class="divider"></li>
-                            {% endif %}
-                            <li><a href="{% url 'ipam:prefix_list' %}"><strong>Prefixes</strong></a></li>
-                            {% if perms.ipam.add_prefix %}
-                                <li class="subnav"><a href="{% url 'ipam:prefix_add' %}"><i class="fa fa-plus"></i> Add a Prefix</a></li>
-                                <li class="subnav"><a href="{% url 'ipam:prefix_import' %}"><i class="fa fa-download"></i> Import Prefixes</a></li>
-                            {% endif %}
-                            {% if perms.ipam.add_prefix or perms.ipam.add_aggregate %}
-                                <li class="divider"></li>
-                            {% endif %}
-                            <li><a href="{% url 'ipam:aggregate_list' %}"><strong>Aggregates</strong></a></li>
-                            {% if perms.ipam.add_aggregate %}
-                                <li class="subnav"><a href="{% url 'ipam:aggregate_add' %}"><i class="fa fa-plus"></i> Add an Aggregate</a></li>
-                                <li class="subnav"><a href="{% url 'ipam:aggregate_import' %}"><i class="fa fa-download"></i> Import Aggregates</a></li>
-                            {% endif %}
-                            {% if perms.ipam.add_aggregate or perms.ipam.add_vrf %}
-                                <li class="divider"></li>
-                            {% endif %}
-                            <li><a href="{% url 'ipam:vrf_list' %}"><strong>VRFs</strong></a></li>
-                            {% if perms.ipam.add_vrf %}
-                                <li class="subnav"><a href="{% url 'ipam:vrf_add' %}"><i class="fa fa-plus"></i> Add a VRF</a></li>
-                                <li class="subnav"><a href="{% url 'ipam:vrf_import' %}"><i class="fa fa-download"></i> Import VRFs</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'ipam:rir_list' %}"><strong>RIRs</strong></a></li>
-                            {% if perms.ipam.add_rir %}
-                                <li class="subnav"><a href="{% url 'ipam:rir_add' %}"><i class="fa fa-plus"></i> Add a RIR</a></li>
-                            {% endif %}
-                            {% if perms.ipam.add_rir or perms.ipam.add_role %}
-                                <li class="divider"></li>
-                            {% endif %}
-                            <li><a href="{% url 'ipam:role_list' %}"><strong>Prefix Roles</strong></a></li>
-                            {% if perms.ipam.add_role %}
-                                <li class="subnav"><a href="{% url 'ipam:role_add' %}"><i class="fa fa-plus"></i> Add a Role</a></li>
-                            {% endif %}
-                        </ul>
-                    </li>
-                    <li class="dropdown{% if request.path|contains:'/ipam/vlan' %} active{% endif %}">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">VLANs <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{% url 'ipam:vlan_list' %}"><strong>VLANs</strong></a></li>
-                            {% if perms.ipam.add_vlan %}
-                                <li class="subnav"><a href="{% url 'ipam:vlan_add' %}"><i class="fa fa-plus"></i> Add a VLAN</a></li>
-                                <li class="subnav"><a href="{% url 'ipam:vlan_import' %}"><i class="fa fa-download"></i> Import VLANs</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'ipam:vlangroup_list' %}"><strong>VLAN Groups</strong></a></li>
-                            {% if perms.ipam.add_vlangroup %}
-                                <li class="subnav"><a href="{% url 'ipam:vlangroup_add' %}"><i class="fa fa-plus"></i> Add a VLAN Group</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'ipam:role_list' %}"><strong>VLAN Roles</strong></a></li>
-                            {% if perms.ipam.add_role %}
-                                <li class="subnav"><a href="{% url 'ipam:role_add' %}"><i class="fa fa-plus"></i> Add a Role</a></li>
-                            {% endif %}
-                        </ul>
-                    </li>
-                    <li class="dropdown{% if request.path|contains:'/virtualization/' %} active{% endif %}">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Virtualization <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{% url 'virtualization:virtualmachine_list' %}"><strong>Virtual Machines</strong></a></li>
-                            {% if perms.virtualization.add_virtualmachine %}
-                                <li class="subnav"><a href="{% url 'virtualization:virtualmachine_add' %}"><i class="fa fa-plus"></i> Add a Virtual Machine</a></li>
-                                <li class="subnav"><a href="{% url 'virtualization:virtualmachine_import' %}"><i class="fa fa-download"></i> Import Virtual Machines</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'virtualization:cluster_list' %}"><strong>Clusters</strong></a></li>
-                            {% if perms.virtualization.add_cluster %}
-                                <li class="subnav"><a href="{% url 'virtualization:cluster_add' %}"><i class="fa fa-plus"></i> Add a Cluster</a></li>
-                                <li class="subnav"><a href="{% url 'virtualization:cluster_import' %}"><i class="fa fa-download"></i> Import Clusters</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'virtualization:clustertype_list' %}"><strong>Cluster Types</strong></a></li>
-                            {% if perms.virtualization.add_clustertype %}
-                                <li class="subnav"><a href="{% url 'virtualization:clustertype_add' %}"><i class="fa fa-plus"></i> Add a Cluster Type</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'virtualization:clustergroup_list' %}"><strong>Cluster Groups</strong></a></li>
-                            {% if perms.virtualization.add_clustergroup %}
-                                <li class="subnav"><a href="{% url 'virtualization:clustergroup_add' %}"><i class="fa fa-plus"></i> Add a Cluster Group</a></li>
-                            {% endif %}
-                        </ul>
-                    </li>
-                    <li class="dropdown{% if request.path|contains:'/circuits/' %} active{% endif %}">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Circuits <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{% url 'circuits:circuit_list' %}"><strong>Circuits</strong></a></li>
-                            {% if perms.circuits.add_circuit %}
-                                <li class="subnav"><a href="{% url 'circuits:circuit_add' %}"><i class="fa fa-plus"></i> Add a Circuit</a></li>
-                                <li class="subnav"><a href="{% url 'circuits:circuit_import' %}"><i class="fa fa-download"></i> Import Circuits</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'circuits:provider_list' %}"><strong>Providers</strong></a></li>
-                            {% if perms.circuits.add_provider %}
-                                <li class="subnav"><a href="{% url 'circuits:provider_add' %}"><i class="fa fa-plus"></i> Add a Provider</a></li>
-                                <li class="subnav"><a href="{% url 'circuits:provider_import' %}"><i class="fa fa-download"></i> Import Providers</a></li>
-                            {% endif %}
-                            <li class="divider"></li>
-                            <li><a href="{% url 'circuits:circuittype_list' %}"><strong>Circuit Types</strong></a></li>
-                            {% if perms.circuits.add_circuittype %}
-                                <li class="subnav"><a href="{% url 'circuits:circuittype_add' %}"><i class="fa fa-plus"></i> Add a Circuit Type</a></li>
-                            {% endif %}
-                        </ul>
-                    </li>
-                    {% if request.user.is_authenticated %}
-                        <li class="dropdown{% if request.path|contains:'/secrets/' %} active{% endif %}">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Secrets <span class="caret"></span></a>
-                            <ul class="dropdown-menu">
-                                <li><a href="{% url 'secrets:secret_list' %}"><strong>Secrets</strong></a></li>
-                                {% if perms.secrets.add_secret %}
-                                    <li class="subnav"><a href="{% url 'secrets:secret_import' %}"><i class="fa fa-download"></i> Import Secrets</a></li>
-                                {% endif %}
-                                <li class="divider"></li>
-                                <li><a href="{% url 'secrets:secretrole_list' %}"><strong>Secret Roles</strong></a></li>
-                                {% if perms.secrets.add_secretrole %}
-                                    <li class="subnav"><a href="{% url 'secrets:secretrole_add' %}"><i class="fa fa-plus"></i> Add a Secret Role</a></li>
-                                {% endif %}
-                            </ul>
-                        </li>
-                    {% endif %}
-                </ul>
-                {% endif %}
-                <ul class="nav navbar-nav navbar-right">
-                    {% if request.user.is_authenticated %}
-                        <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="{{ request.user }}" role="button" aria-haspopup="true" aria-expanded="false">
-                                {{ request.user|truncatechars:"30" }} <span class="caret"></span>
-                            </a>
-                            <ul class="dropdown-menu">
-                                <li><a href="{% url 'user:profile' %}"><i class="fa fa-user"></i> Profile</a></li>
-                                {% if request.user.is_staff %}
-                                    <li><a href="{% url 'admin:index' %}"><i class="fa fa-cogs"></i> Admin</a></li>
-                                {% endif %}
-                                <li class="divider"></li>
-                                <li><a href="{% url 'logout' %}"><i class="fa fa-sign-out"></i> Log out</a></li>
-                            </ul>
-                        </li>
-                    {% else %}
-                        <li><a href="{% url 'login' %}?next={{ request.path }}"><i class="fa fa-sign-in"></i> Log in</a></li>
-                    {% endif %}
-                </ul>
-                <form action="{% url 'search' %}" method="get" class="navbar-form navbar-right" id="navbar_search" role="search">
-                    <div class="input-group">
-                        <input type="text" name="q" class="form-control" placeholder="Search">
-                        <span class="input-group-btn">
-                            <button type="submit" class="btn btn-primary">
-                                <i class="fa fa-search"></i>
-                            </button>
-                        </span>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </nav>
+    {% include 'inc/nav_menu.html' %}
     <div class="container wrapper">
         {% if settings.BANNER_TOP %}
             <div class="alert alert-info text-center" role="alert">

+ 410 - 0
netbox/templates/inc/nav_menu.html

@@ -0,0 +1,410 @@
+{% load static from staticfiles %}
+{% load helpers %}
+<nav class="navbar navbar-default navbar-fixed-top">
+    <div class="container">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="{% url 'home' %}">
+                <img src="{% static 'img/netbox_logo.png' %}" />
+            </a>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse">
+            {% if request.user.is_authenticated or not settings.LOGIN_REQUIRED %}
+            <ul class="nav navbar-nav">
+                <li class="dropdown{% if request.path|contains:'/dcim/sites/,/dcim/regions/,/tenancy/,/extras/reports/' %} active{% endif %}">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Organization <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li class="dropdown-header">Sites</li>
+                        <li>
+                            {% if perms.dcim.add_site %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:site_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'dcim:site_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:site_list' %}">Sites</a>
+                        </li>
+                        <li>
+                            {% if perms.dcim.add_region %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:region_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'dcim:region_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:region_list' %}">Regions</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Tenancy</li>
+                        <li>
+                            {% if perms.tenancy.add_tenant %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'tenancy:tenant_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'tenancy:tenant_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'tenancy:tenant_list' %}">Tenants</a>
+                        </li>
+                        <li>
+                            {% if perms.tenancy.add_tenantgroup %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'tenancy:tenantgroup_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'tenancy:tenantgroup_list' %}">Tenant Groups</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Miscellaneous</li>
+                        <li>
+                            <a href="{% url 'extras:report_list' %}">Reports</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="dropdown{% if request.path|contains:'/dcim/rack' %} active{% endif %}">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Racks <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li class="dropdown-header">Racks</li>
+                        <li>
+                            {% if perms.dcim.add_rack %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:rack_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'dcim:rack_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:rack_list' %}">Racks</a>
+                        </li>
+                        <li>
+                            {% if perms.dcim.add_rackgroup %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:rackgroup_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'dcim:rackgroup_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:rackgroup_list' %}">Rack Groups</a>
+                        </li>
+                        <li>
+                            {% if perms.dcim.add_rackrole %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:rackrole_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:rackrole_list' %}">Rack Roles</a>
+                        </li>
+                        <li>
+                            <a href="{% url 'dcim:rack_elevation_list' %}">Elevations</a>
+                        </li>
+                        <li>
+                            <a href="{% url 'dcim:rackreservation_list' %}">Reservations</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="dropdown{% if request.path|contains:'/dcim/device,/dcim/manufacturers/,/dcim/platforms/,-connections/' %} active{% endif %}">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Devices <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li class="dropdown-header">Devices</li>
+                        <li>
+                            {% if perms.dcim.add_device %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:device_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'dcim:device_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:device_list' %}">Devices</a>
+                        </li>
+                        <li>
+                            {% if perms.dcim.add_devicerole %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:devicerole_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:devicerole_list' %}">Device Roles</a>
+                        </li>
+                        <li>
+                            {% if perms.dcim.add_platform %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:platform_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:platform_list' %}">Platforms</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Device Types</li>
+                        <li>
+                            {% if perms.dcim.add_devicetype %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:devicetype_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'dcim:devicetype_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:devicetype_list' %}">Device Types</a>
+                        </li>
+                        <li>
+                            {% if perms.dcim.add_manufacturer %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:manufacturer_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'dcim:manufacturer_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:manufacturer_list' %}">Manufacturers</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Connections</li>
+                        <li>
+                            {% if perms.dcim.change_consoleport %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:console_connections_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:console_connections_list' %}">Console Connections</a>
+                        </li>
+                        <li>
+                            {% if perms.dcim.change_powerport %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:power_connections_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:power_connections_list' %}">Power Connections</a>
+                        </li>
+                        <li>
+                            {% if perms.dcim.add_interfaceconnection %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'dcim:interface_connections_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'dcim:power_connections_list' %}">Interface Connections</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="dropdown{% if request.path|contains:'/ipam/' %} active{% endif %}">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">IPAM <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li class="dropdown-header">IP Addresses</li>
+                        <li>
+                            {% if perms.ipam.add_ipaddress %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'ipam:ipaddress_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'ipam:ipaddress_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'ipam:ipaddress_list' %}">IP Addresses</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Prefixes</li>
+                        <li>
+                            {% if perms.ipam.add_prefix %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'ipam:prefix_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'ipam:prefix_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'ipam:prefix_list' %}">Prefixes</a>
+                        </li>
+                        <li>
+                            {% if perms.ipam.add_role %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'ipam:role_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'ipam:role_list' %}">Prefix/VLAN Roles</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Aggregates</li>
+                        <li>
+                            {% if perms.ipam.add_aggregate %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'ipam:aggregate_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'ipam:aggregate_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'ipam:aggregate_list' %}">Aggregates</a>
+                        </li>
+                        <li>
+                            {% if perms.ipam.add_rir %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'ipam:rir_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'ipam:rir_list' %}">RIRs</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">VRFs</li>
+                        <li>
+                            {% if perms.ipam.add_vrf %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'ipam:vrf_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'ipam:vrf_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'ipam:vrf_list' %}">VRFs</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">VLANs</li>
+                        <li>
+                            {% if perms.ipam.add_vlan %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'ipam:vlan_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'ipam:vlan_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'ipam:vlan_list' %}">VLANs</a>
+                        </li>
+                        <li>
+                            {% if perms.ipam.add_vlangroup %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'ipam:vlangroup_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'ipam:vlangroup_list' %}">VLAN Groups</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="dropdown{% if request.path|contains:'/virtualization/' %} active{% endif %}">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Virtualization <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li class="dropdown-header">Virtual Machines</li>
+                        <li>
+                            {% if perms.virtualization.add_virtualmachine %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'virtualization:virtualmachine_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'virtualization:virtualmachine_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'virtualization:virtualmachine_list' %}">Virtual Machines</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Clusters</li>
+                        <li>
+                            {% if perms.virtualization.add_cluster %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'virtualization:cluster_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'virtualization:cluster_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'virtualization:cluster_list' %}">Clusters</a>
+                        </li>
+                        <li>
+                            {% if perms.virtualization.add_clustertype %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'virtualization:clustertype_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'virtualization:clustertype_list' %}">Cluster Types</a>
+                        </li>
+                        <li>
+                            {% if perms.virtualization.add_clustergroup %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'virtualization:clustergroup_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'virtualization:clustergroup_list' %}">Cluster Groups</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="dropdown{% if request.path|contains:'/circuits/' %} active{% endif %}">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Circuits <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li class="dropdown-header">Circuits</li>
+                        <li>
+                            {% if perms.circuits.add_circuit %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'circuits:circuit_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'circuits:circuit_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'circuits:circuit_list' %}">Circuits</a>
+                        </li>
+                        <li>
+                            {% if perms.circuits.add_circuittype %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'circuits:circuittype_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'circuits:circuittype_list' %}">Circuit Types</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Providers</li>
+                        <li>
+                            {% if perms.circuits.add_provider %}
+                                <div class="buttons pull-right">
+                                    <a href="{% url 'circuits:provider_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                    <a href="{% url 'circuits:provider_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                </div>
+                            {% endif %}
+                            <a href="{% url 'circuits:provider_list' %}">Providers</a>
+                        </li>
+                    </ul>
+                </li>
+                {% if request.user.is_authenticated %}
+                    <li class="dropdown{% if request.path|contains:'/secrets/' %} active{% endif %}">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Secrets <span class="caret"></span></a>
+                        <ul class="dropdown-menu">
+                            <li class="dropdown-header">Secrets</li>
+                            <li>
+                                {% if perms.secrets.add_secret %}
+                                    <div class="buttons pull-right">
+                                        <a class="btn btn-xs btn-success disabled" title="Add"><i class="fa fa-plus"></i></a>
+                                        <a href="{% url 'secrets:secret_import' %}" class="btn btn-xs btn-info" title="Import"><i class="fa fa-download"></i></a>
+                                    </div>
+                                {% endif %}
+                                <a href="{% url 'secrets:secret_list' %}">Secrets</a>
+                            </li>
+                            <li>
+                                {% if perms.secrets.add_secretrole %}
+                                    <div class="buttons pull-right">
+                                        <a href="{% url 'secrets:secretrole_add' %}" class="btn btn-xs btn-success" title="Add"><i class="fa fa-plus"></i></a>
+                                        <a class="btn btn-xs btn-info disabled" title="Import"><i class="fa fa-download"></i></a>
+                                    </div>
+                                {% endif %}
+                                <a href="{% url 'secrets:secretrole_list' %}">Secret Roles</a>
+                            </li>
+                        </ul>
+                    </li>
+                {% endif %}
+            </ul>
+            {% endif %}
+            <ul class="nav navbar-nav navbar-right">
+                {% if request.user.is_authenticated %}
+                    <li class="dropdown">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="{{ request.user }}" role="button" aria-haspopup="true" aria-expanded="false">
+                            {{ request.user|truncatechars:"30" }} <span class="caret"></span>
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li><a href="{% url 'user:profile' %}"><i class="fa fa-user"></i> Profile</a></li>
+                            {% if request.user.is_staff %}
+                                <li><a href="{% url 'admin:index' %}"><i class="fa fa-cogs"></i> Admin</a></li>
+                            {% endif %}
+                            <li class="divider"></li>
+                            <li><a href="{% url 'logout' %}"><i class="fa fa-sign-out"></i> Log out</a></li>
+                        </ul>
+                    </li>
+                {% else %}
+                    <li><a href="{% url 'login' %}?next={{ request.path }}"><i class="fa fa-sign-in"></i> Log in</a></li>
+                {% endif %}
+            </ul>
+            <form action="{% url 'search' %}" method="get" class="navbar-form navbar-right" id="navbar_search" role="search">
+                <div class="input-group">
+                    <input type="text" name="q" class="form-control" placeholder="Search">
+                    <span class="input-group-btn">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </span>
+                </div>
+            </form>
+        </div>
+    </div>
+</nav>