mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
sidenav navigation
This commit is contained in:
chomik
@@ -103,7 +103,7 @@
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="folded"]', function (e) {
|
||||
$body.toggleClass('sidebar-folded');
|
||||
$('.sidenav').toggleClass('sidenav-folded');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
<ul class="navbar-nav mb-md-4">
|
||||
{% assign current-page = include.menu | split: '.' %}
|
||||
{{ current-page.size }}
|
||||
|
||||
{% for level-1 in site.data.menu %}
|
||||
{% assign icon = level-1[1].icon %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
|
||||
{% include ui/icon.html icon=icon %}
|
||||
<span class="nav-link-text">{{ level-1[1].title }}</span>
|
||||
{% if level-1[1].label %}
|
||||
<span class="badge bg-primary text-white ml-auto">{{ level-1[1].label }}</span>
|
||||
{% endif %}
|
||||
<span class="nav-link-title">
|
||||
{{ level-1[1].title }}
|
||||
|
||||
{% if level-1[1].label %}
|
||||
<span class="badge bg-{{ level-1[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-1[1].label }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
{% if level-1[1].children or level-1[1].docs %}
|
||||
<div class="collapse navbar-collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-{{ level-1[0] }}">
|
||||
@@ -22,7 +24,13 @@
|
||||
{% assign doc = site.docs | where: "slug", doc-slug | first %}
|
||||
<li class="nav-item">
|
||||
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
|
||||
{{ doc.title }}
|
||||
<span class="nav-link-title">
|
||||
{{ doc.title }}
|
||||
|
||||
{% if doc.new %}
|
||||
<span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
@@ -31,7 +39,12 @@
|
||||
{% for level-2 in level-1[1].children %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{% if level-2[0] == current-page[1] %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
|
||||
{{ level-2[1].title }}
|
||||
<span class="nav-link-title">
|
||||
{{ level-2[1].title }}
|
||||
{% if level-2[1].label %}
|
||||
<span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
{% if level-2[1].children %}
|
||||
<div class="collapse navbar-collapse{% if level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-{{ level-2[0] }}">
|
||||
@@ -39,7 +52,12 @@
|
||||
{% for level-3 in level-2[1].children %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{% if level-3[0] == current-page[2] %} active{% endif %}" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
|
||||
{{ level-3[1].title }}
|
||||
<span class="nav-link-title">
|
||||
{{ level-3[1].title }}
|
||||
{% if level-3[1].label %}
|
||||
<span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{% if level-3[1].children %}
|
||||
@@ -48,7 +66,12 @@
|
||||
{% for level-4 in level-3[1].children %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{% if level-4[0] == current-page[3] %} active{% endif %}" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
|
||||
{{ level-4[1].title }}
|
||||
<span class="nav-link-title">
|
||||
{{ level-4[1].title }}
|
||||
{% if level-4[1].label %}
|
||||
<span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
{% assign id = 0 | random_id %}
|
||||
<div class="p-3">
|
||||
<a href="{{ site.base }}" class="navbar-brand text-inherit">
|
||||
<img src="{{ site.base }}/img/logo{% if include.logo %}-{{ include.logo }}{% endif %}.svg" alt="" class="navbar-brand-logo">
|
||||
<a href="{{ site.base }}" class=" navbar-brand text-inherit">
|
||||
<img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-sidenav-folded navbar-brand-logo">
|
||||
<img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-sidenav-expanded navbar-brand-logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h6 class="navbar-heading">
|
||||
Docs
|
||||
</h6>
|
||||
<h6 class="navbar-heading">
|
||||
Docs
|
||||
</h6>
|
||||
|
||||
{% include layout/menu.html menu=include.menu %}
|
||||
</div>
|
||||
{% include layout/menu.html menu=include.menu %}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% assign menu = page.menu | default: layout.menu %}
|
||||
<div class="sidenav sidenav-dark sidenav-expand-md">
|
||||
{% assign menu = page.menu | default: layout.menu %}
|
||||
{% include_cached layout/sidenav-content.html logo="white" menu=menu %}
|
||||
{% include layout/sidenav-content.html white=true menu=menu %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user