mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
navigation components
This commit is contained in:
codecalm
@@ -1,11 +1,11 @@
|
||||
home:
|
||||
url: index.html
|
||||
title: Dashboard
|
||||
title: Home
|
||||
icon: home
|
||||
|
||||
forms:
|
||||
url: form-elements.html
|
||||
title: Form elements
|
||||
title: Forms
|
||||
icon: check-square
|
||||
|
||||
base:
|
||||
@@ -115,7 +115,7 @@ extra:
|
||||
title: Search results
|
||||
url: search-results.html
|
||||
docs:
|
||||
title: Documentation
|
||||
title: Docs
|
||||
icon: file-text
|
||||
url: docs/index.html
|
||||
children:
|
||||
|
||||
20
pages/_includes/layout/navbar-menu.html
Normal file
20
pages/_includes/layout/navbar-menu.html
Normal file
@@ -0,0 +1,20 @@
|
||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||
|
||||
<ul class="navbar-nav">
|
||||
{% for level-1 in site.data.menu %}
|
||||
{% assign icon = level-1[1].icon %}
|
||||
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}">
|
||||
<a href="#" class="nav-link">
|
||||
<span class="nav-link-icon">{% include ui/icon.html icon=icon %}</span>
|
||||
<span class="nav-link-title">{{ level-1[1].title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link d-none-navbar-vertical">
|
||||
<span class="nav-link-icon">{% include ui/icon.html icon="sliders" %}</span>
|
||||
<span class="nav-link-title">Customize</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -3,23 +3,15 @@
|
||||
<div class="container">
|
||||
{% include layout/navbar-logo.html class="d-none-navbar-horizontal" %}
|
||||
|
||||
<div>
|
||||
Lorem ipsum
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<h6 class="navbar-heading">Navigation</h6>
|
||||
{% include layout/navbar-menu.html %}
|
||||
|
||||
<div class="d-none-navbar-vertical">
|
||||
only horizontal
|
||||
<div class="navbar-side d-none-navbar-vertical-narrow">
|
||||
{% include layout/navbar-search.html %}
|
||||
{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true class="d-none-navbar-horizontal" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-none-navbar-vertical-narrow">
|
||||
hide narrow
|
||||
</div>
|
||||
|
||||
<div class="d-none-navbar-horizontal">
|
||||
only sidebar
|
||||
</div>
|
||||
|
||||
<div class="text-muted">Lorem ipsum</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
tmp: true
|
||||
page-header: Layout test
|
||||
page-header-actions: buttons
|
||||
menu: home
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
|
||||
@@ -22,7 +22,7 @@ $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
|
||||
$light-white: rgba($light, .24) !default;
|
||||
|
||||
$min-black: rgba($dark, .032) !default;
|
||||
$min-white: rgba($light, .032) !default;
|
||||
$min-white: rgba($light, .064) !default;
|
||||
|
||||
$gray-100: $light !default;
|
||||
$gray-200: mix($light, $dark, 98%) !default;
|
||||
@@ -218,6 +218,7 @@ $sidenav-dark-color: $white !default;
|
||||
$sidenav-padding: 1.25rem !default;
|
||||
$sidenav-breakpoint-show: 'sm' !default;
|
||||
$sidenav-breakpoint-folded: 'lg' !default;
|
||||
$sidenav-active-accent-color: $primary !default;
|
||||
|
||||
//alerts
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
@@ -349,10 +350,15 @@ $popover-border-color: $border-color !default;
|
||||
|
||||
$navbar-padding-y: .75rem !default;
|
||||
$navbar-nav-link-padding-x: .75rem !default;
|
||||
$navbar-light-color: $text-muted !default;
|
||||
|
||||
$navbar-light-color: rgba($body-color, .64) !default;
|
||||
$navbar-light-active-color: $primary !default;
|
||||
$navbar-light-hover-color: $body-color !default;
|
||||
|
||||
$navbar-dark-color: rgba($white, .64) !default;
|
||||
$navbar-dark-active-color: $white !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
//pagination
|
||||
$pagination-border-width: 0 !default;
|
||||
$pagination-padding-y: .25rem !default;
|
||||
@@ -455,3 +461,4 @@ $enable-social-colors: true !default;
|
||||
$enable-ghost-buttons: true !default;
|
||||
$enable-extra-colors: true !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-navbar-vertical: true !default;
|
||||
|
||||
@@ -1,3 +1,48 @@
|
||||
@mixin navbar-vertical-narrow {
|
||||
width: $sidenav-width-narrow;
|
||||
|
||||
.navbar-nav {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
height: 3rem; //todo: to variable
|
||||
}
|
||||
|
||||
.nav-link-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.d-none-navbar-vertical-narrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand-logo-large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand-logo-small {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: $sidenav-width-narrow;
|
||||
}
|
||||
|
||||
&.navbar-right {
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: 0;
|
||||
margin-right: $sidenav-width-narrow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin navbar-vertical {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@@ -7,10 +52,15 @@
|
||||
z-index: $zindex-fixed;
|
||||
min-height: auto;
|
||||
align-items: start;
|
||||
overflow: auto;
|
||||
box-shadow: inset -1px 0 0 0 $border-color;
|
||||
|
||||
> [class*="container"] {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
align-items: stretch;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
~ .navbar,
|
||||
@@ -32,65 +82,159 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.navbar-vertical-narrow {
|
||||
width: $sidenav-width-narrow;
|
||||
.navbar-heading {
|
||||
@include subheader();
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.d-none-navbar-vertical-narrow {
|
||||
display: none;
|
||||
.navbar-collapse {
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
align-items: normal;
|
||||
|
||||
padding: $sidenav-padding $sidenav-padding;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
margin-left: -($sidenav-padding);
|
||||
margin-right: -($sidenav-padding);
|
||||
|
||||
.nav-link {
|
||||
min-height: 0;
|
||||
padding-left: $sidenav-padding;
|
||||
padding-right: $sidenav-padding;
|
||||
}
|
||||
|
||||
.navbar-brand-logo-large {
|
||||
display: none;
|
||||
}
|
||||
.nav-item {
|
||||
&.active {
|
||||
background: rgba($sidenav-active-accent-color, .032);
|
||||
|
||||
.navbar-brand-logo-small {
|
||||
display: inline-block;
|
||||
&:before {
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: $sidenav-width-narrow;
|
||||
.navbar-side {
|
||||
margin-left: 0;
|
||||
margin-top: auto;
|
||||
padding-left: 0;
|
||||
padding-top: $sidenav-padding;
|
||||
|
||||
> * {
|
||||
margin-left: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
box-shadow: inset 1px 0 0 0 $border-color;
|
||||
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: 0;
|
||||
margin-right: $sidenav-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-vertical-narrow {
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-right: $sidenav-width-narrow;
|
||||
}
|
||||
}
|
||||
&.navbar-vertical-narrow {
|
||||
@include navbar-vertical-narrow;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: map-get($spacers, 4);
|
||||
padding-bottom: map-get($spacers, 4);
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
min-height: $navbar-height;
|
||||
padding-top: 0; //todo: move to varaibles
|
||||
padding-bottom: 0;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
min-height: $navbar-height;
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
font-size: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: block;
|
||||
margin-right: .5rem;
|
||||
line-height: .99;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-expand {
|
||||
@each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
|
||||
&-#{$breakpoint} {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.navbar-nav {
|
||||
margin-left: (-$navbar-nav-link-padding-x);
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: $navbar-nav-link-padding-x;
|
||||
right: $navbar-nav-link-padding-x;
|
||||
height: 1px;
|
||||
background: $sidenav-active-accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-side {
|
||||
margin-left: auto;
|
||||
padding-left: 1.5rem;
|
||||
|
||||
> * {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -113,12 +257,14 @@ Navbar colors
|
||||
*/
|
||||
.navbar-light {
|
||||
background: $white;
|
||||
box-shadow: 0 0 0 1px $border-color;
|
||||
box-shadow: inset 0 -1px 0 0 $border-color;
|
||||
@include scrollbar;
|
||||
}
|
||||
|
||||
.navbar-dark {
|
||||
background: $sidenav-dark-bg;
|
||||
color: $sidenav-dark-color;
|
||||
@include scrollbar(true);
|
||||
|
||||
.text-muted {
|
||||
color: inherit !important;
|
||||
@@ -128,27 +274,35 @@ Navbar colors
|
||||
.navbar-brand-autodark {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: transparent;
|
||||
background: $min-white;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Navbar vertical
|
||||
*/
|
||||
.navbar:not(.navbar-vertical) {
|
||||
.d-none-navbar-horizontal {
|
||||
display: none;
|
||||
@if $enable-navbar-vertical {
|
||||
.navbar:not(.navbar-vertical) {
|
||||
.d-none-navbar-horizontal {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-vertical {
|
||||
@each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
|
||||
&.navbar-expand-#{$breakpoint} {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@include navbar-vertical;
|
||||
}
|
||||
.navbar-vertical {
|
||||
@each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
|
||||
&.navbar-expand-#{$breakpoint} {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@include navbar-vertical;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down-than($breakpoint) {
|
||||
.d-none-navbar-horizontal {
|
||||
display: none;
|
||||
@include media-breakpoint-down-than($breakpoint) {
|
||||
.d-none-navbar-horizontal {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@ pre {
|
||||
overflow: auto;
|
||||
font-size: $code-font-size;
|
||||
hyphens: none;
|
||||
line-height: 1.5;
|
||||
line-height: $line-height-base;
|
||||
tab-size: 3;
|
||||
border-radius: $border-radius;
|
||||
white-space: pre-wrap;
|
||||
|
||||
Reference in New Issue
Block a user