mirror of
https://github.com/tabler/tabler.git
synced 2026-07-16 18:41:40 +04:00
sidenav fixes
This commit is contained in:
chomik
@@ -14,6 +14,10 @@ level-1:
|
||||
level-3:
|
||||
title: Level 3
|
||||
icon: menu
|
||||
children:
|
||||
level-4:
|
||||
title: Level 4
|
||||
icon: menu
|
||||
docs:
|
||||
title: Documentation
|
||||
icon: file-text
|
||||
|
||||
@@ -5,16 +5,16 @@
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1">No.</th>
|
||||
<th>Invoice Subject</th>
|
||||
<th>Client</th>
|
||||
<th>VAT No.</th>
|
||||
<th>Created</th>
|
||||
<th>Status</th>
|
||||
<th>Price</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="w-1">No.</th>
|
||||
<th>Invoice Subject</th>
|
||||
<th>Client</th>
|
||||
<th>VAT No.</th>
|
||||
<th>Created</th>
|
||||
<th>Status</th>
|
||||
<th>Price</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||
{{ current-page }}
|
||||
<ul class="sidenav-menu">
|
||||
{% for level-1 in site.data.menu %}
|
||||
{% assign level-1-key = level-1[0] %}
|
||||
@@ -34,4 +35,4 @@
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
@@ -10,23 +10,25 @@
|
||||
Docs
|
||||
</h6>
|
||||
|
||||
{{ page.menu }}
|
||||
|
||||
<ul class="navbar-nav mb-md-4">
|
||||
{% for item in site.data.menu %}
|
||||
{% assign icon = item[1].icon %}
|
||||
{% for level-1 in site.data.menu %}
|
||||
{% assign icon = level-1[1].icon %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children or item[1].docs %}href="#sidebar-{{ item[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
|
||||
<a class="nav-link{% if level-1[1].active %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
|
||||
{% include ui/icon.html icon=icon %}
|
||||
<span class="nav-link-text">{{ item[1].title }}</span>
|
||||
{% if item[1].label %}
|
||||
<span class="badge bg-primary text-white ml-auto">{{ item[1].label }}</span>
|
||||
<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 %}
|
||||
</a>
|
||||
{% if item[1].children or item[1].docs %}
|
||||
<div class="collapse navbar-collapse" id="sidebar-{{ item[0] }}">
|
||||
{% if level-1[1].children or level-1[1].docs %}
|
||||
<div class="collapse navbar-collapse" id="sidebar-{{ level-1[0] }}">
|
||||
<ul class="nav nav-sm flex-column">
|
||||
|
||||
{% if item[1].docs %}
|
||||
{% assign docs-key = item[1].docs %}
|
||||
{% if level-1[1].docs %}
|
||||
{% assign docs-key = level-1[1].docs %}
|
||||
{% for p in site.docs-menu[docs-key].pages %}
|
||||
{% assign doc = site.docs | where: "slug", p | first %}
|
||||
<li class="nav-item">
|
||||
@@ -37,19 +39,33 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% for p in item[1].children %}
|
||||
{% for level-2 in level-1[1].children %}
|
||||
<li class="nav-item">
|
||||
<a href="{% if p[1].url %}{{ p[1].url }}{% else %}#{% endif %}" class="nav-link">
|
||||
{{ p[1].title }}
|
||||
<a {% 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 %} class="nav-link">
|
||||
{{ level-2[1].title }}
|
||||
</a>
|
||||
{% if p[1].children %}
|
||||
<div class="collapse navbar-collapse" id="sidebar-{{ p[0] }}">
|
||||
{% if level-2[1].children %}
|
||||
<div class="collapse navbar-collapse" id="sidebar-{{ level-2[0] }}">
|
||||
<ul class="nav nav-sm flex-column">
|
||||
{% for r in p[1].children %}
|
||||
{% for level-3 in level-2[1].children %}
|
||||
<li class="nav-item">
|
||||
<a href="{% if r[1].url %}{{ r[1].url }}{% else %}#{% endif %}" class="nav-link">
|
||||
{{ r[1].title }}
|
||||
<a {% 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 %} class="nav-link">
|
||||
{{ level-3[1].title }}
|
||||
</a>
|
||||
|
||||
{% if level-3[1].children %}
|
||||
<div class="collapse navbar-collapse" id="sidebar-{{ level-3[0] }}">
|
||||
<ul class="nav nav-sm flex-column">
|
||||
{% for level-4 in level-3[1].children %}
|
||||
<li class="nav-item">
|
||||
<a href="{% if level-4[1].url %}{{ level-4[1].url }}{% else %}#{% endif %}" class="nav-link">
|
||||
{{ level-4[1].title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
<div class="sidenav sidenav-expand-md">
|
||||
{% include layout/sidenav-content.html logo="white" %}
|
||||
<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 %}
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@ layout: base
|
||||
---
|
||||
|
||||
<div class="d-flex h-auto min-h-screen">
|
||||
{% include_cached layout/sidenav.html %}
|
||||
{% include layout/sidenav.html %}
|
||||
|
||||
<div class="flex-fill d-flex flex-column mw-100">
|
||||
{% include_cached layout/header.html %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Dashboard
|
||||
page-title: Dashboard
|
||||
menu: level-1.level-2.level-3.level-4
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// FONTS
|
||||
$font-family-base: "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
|
||||
$font-icons: "Feather" !default;
|
||||
|
||||
// EXTERNAL FONTS
|
||||
$google-font-url: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700" !default;
|
||||
|
||||
+11
-12
@@ -6,6 +6,7 @@ Sidebar
|
||||
min-width: 16rem;
|
||||
background: $sidenav-bg;
|
||||
border-right: 1px solid $sidenav-border-color;
|
||||
user-select: none;
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
@@ -20,13 +21,13 @@ Sidebar
|
||||
}
|
||||
|
||||
> .icon {
|
||||
min-width: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
&[data-toggle="collapse"] {
|
||||
&:after {
|
||||
display: block;
|
||||
font-family: 'Feather' !important;
|
||||
font-family: $font-icons !important;
|
||||
content: $icon-fe-chevron-down;
|
||||
margin-left: auto;
|
||||
transition: transform .3s;
|
||||
@@ -38,25 +39,23 @@ Sidebar
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item .nav-item {
|
||||
padding-left: 2rem;
|
||||
|
||||
.nav-item {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//.navbar-divider {
|
||||
//
|
||||
//}
|
||||
|
||||
.navbar-heading {
|
||||
padding: .5rem 0;
|
||||
margin: 0;
|
||||
@extend .text-subheader;
|
||||
}
|
||||
|
||||
.nav {
|
||||
.nav-item {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+10
-1
@@ -1,4 +1,14 @@
|
||||
.table {
|
||||
thead {
|
||||
th {
|
||||
border-width: $table-border-width;
|
||||
background: $gray-100;
|
||||
text-transform: uppercase;
|
||||
font-size: $h6-font-size;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
@@ -8,7 +18,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table-md {
|
||||
th,
|
||||
td {
|
||||
|
||||
Reference in New Issue
Block a user