mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 09:54:24 +04:00
navigation refactoring
This commit is contained in:
codecalm
@@ -1,5 +1,3 @@
|
||||
require('./tabler/dropdowns');
|
||||
|
||||
const tabler = {
|
||||
colorVariation: function(color, variation) {
|
||||
const colorValue = this.colors[color];
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
(function(){
|
||||
let dropdown = document.querySelectorAll('.dropup, .dropright, .dropdown, .dropleft'),
|
||||
dropdownToggle = document.querySelectorAll('.dropdown-menu .dropdown-toggle');
|
||||
|
||||
})();
|
||||
24
pages/_data/layouts.yml
Normal file
24
pages/_data/layouts.yml
Normal file
@@ -0,0 +1,24 @@
|
||||
- name: sidebar-left
|
||||
title: Left sidebar
|
||||
url: layout-navbar-left.html
|
||||
- name: sidebar-right
|
||||
title: Right sidebar
|
||||
url: layout-navbar-right.html
|
||||
- name: sidebar-dark
|
||||
title: Dark sidebar
|
||||
url: layout-navbar-dark.html
|
||||
- name: sidebar-folded
|
||||
title: Folded sidebar
|
||||
url: layout-navbar-folded.html
|
||||
- name: navbar-top
|
||||
title: Navbar top
|
||||
url: layout-navbar-top.html
|
||||
- name: header-dark
|
||||
title: Dark header
|
||||
url: layout-header-dark.html
|
||||
- name: header-sticky
|
||||
title: Sticky header
|
||||
url: layout-header-sticky.html
|
||||
- name: dark-mode
|
||||
title: Dark mode
|
||||
url: layout-dark-mode.html
|
||||
@@ -18,47 +18,10 @@ charts:
|
||||
title: Charts
|
||||
icon: pie-chart
|
||||
|
||||
level-1:
|
||||
title: Level 1
|
||||
icon: menu
|
||||
children:
|
||||
level-2:
|
||||
title: Level 2
|
||||
children:
|
||||
level-3:
|
||||
title: Level 3
|
||||
children:
|
||||
level-4:
|
||||
title: Level 4
|
||||
|
||||
layout:
|
||||
title: Layout
|
||||
layouts:
|
||||
title: Layouts
|
||||
icon: layout
|
||||
children:
|
||||
sidebar-left:
|
||||
title: Left sidebar
|
||||
url: layout-navbar-left.html
|
||||
sidebar-right:
|
||||
title: Right sidebar
|
||||
url: layout-navbar-right.html
|
||||
sidebar-white:
|
||||
title: White sidebar
|
||||
url: layout-navbar-white.html
|
||||
sidebar-folded:
|
||||
title: Folded sidebar
|
||||
url: layout-navbar-folded.html
|
||||
navbar-top:
|
||||
title: Navbar top
|
||||
url: layout-navbar-top.html
|
||||
header-dark:
|
||||
title: Dark header
|
||||
url: layout-header-dark.html
|
||||
header-sticky:
|
||||
title: Sticky header
|
||||
url: layout-header-sticky.html
|
||||
dark-mode:
|
||||
title: Dark mode
|
||||
url: layout-dark-mode.html
|
||||
url: layouts.html
|
||||
|
||||
docs:
|
||||
title: Documentation
|
||||
|
||||
9
pages/_includes/layout/layouts.html
Normal file
9
pages/_includes/layout/layouts.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% for layout in site.data.layouts %}
|
||||
<a href="{{ layout.url }}" class="d-block">
|
||||
{{ layout.title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,11 +1,17 @@
|
||||
{% removeemptylines %}
|
||||
{% assign side = false %}
|
||||
<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||
|
||||
{% 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 %}{% if level-1[1].children or level-1[1].docs %} dropdown{% endif %}">
|
||||
<a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="dropdown" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
|
||||
<li
|
||||
class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %} {% if side %}dropright{% else %}dropdown{% endif %}{% endif %}">
|
||||
<a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if
|
||||
level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
|
||||
aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle
|
||||
%}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
|
||||
%}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
|
||||
<span class="nav-icon">
|
||||
{% include ui/icon.html icon=icon %}
|
||||
</span>
|
||||
@@ -20,75 +26,36 @@
|
||||
</span>
|
||||
</a>
|
||||
{% if level-1[1].children or level-1[1].docs %}
|
||||
<ul class="dropdown-menu">
|
||||
<div class="dropdown-menu">
|
||||
|
||||
{% if level-1[1].docs %}
|
||||
{% for d in site.data.docs %}
|
||||
{% assign doc = site.docs | where: "slug", d.page | first %}
|
||||
{% if doc %}
|
||||
<li class="nav-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
|
||||
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
|
||||
<span class="nav-text">
|
||||
{{ doc.title }}
|
||||
<a class="dropdown-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
|
||||
<span class="nav-text">
|
||||
{{ doc.title }}
|
||||
|
||||
{% if doc.new %}
|
||||
<span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{% if doc.new %}
|
||||
<span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% for level-2 in level-1[1].children %}
|
||||
<li class="nav-item{% if level-2[0] == current-page[1] %} active{% endif %}{% if level-2[1].children %} dropdown{% endif %}">
|
||||
<a class="nav-link" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
|
||||
<span class="nav-text">
|
||||
{{ 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 %}
|
||||
<ul class="dropdown-menu">
|
||||
{% for level-3 in level-2[1].children %}
|
||||
<li class="nav-item{% if level-3[0] == current-page[2] %} active{% endif %}">
|
||||
<a class="nav-link" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
|
||||
<span class="nav-text">
|
||||
{{ 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 %}
|
||||
<div class="navbar-subnav collapse">
|
||||
<ul class="nav nav-sm flex-column">
|
||||
{% for level-4 in level-3[1].children %}
|
||||
<li class="nav-item{% if level-4[0] == current-page[3] %} active{% endif %}">
|
||||
<a class="nav-link" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
|
||||
<span class="nav-text">
|
||||
{{ 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 %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
|
||||
<span class="nav-text">
|
||||
{{ 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>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,21 +1,15 @@
|
||||
{% assign id = 0 | random_id %}
|
||||
<div class="pb-3">
|
||||
<a href="{{ site.base }}" class="navbar-brand text-reset">
|
||||
<img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
|
||||
<img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
|
||||
</a>
|
||||
</div>
|
||||
<a href="{{ site.base }}" class="navbar-brand">
|
||||
<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
|
||||
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
|
||||
</a>
|
||||
|
||||
<div class="flex-fill">
|
||||
<h6 class="navbar-heading">
|
||||
Docs
|
||||
</h6>
|
||||
<h6 class="navbar-heading">Docs</h6>
|
||||
|
||||
{% include layout/menu.html menu=include.menu class="mb-md-4" %}
|
||||
|
||||
<h6 class="navbar-heading">
|
||||
Other
|
||||
</h6>
|
||||
<h6 class="navbar-heading">Other</h6>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
{% assign menu = page.menu | default: layout.menu %}
|
||||
<aside class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
|
||||
<aside class="navbar navbar-side {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar" id="sidebar">
|
||||
{% unless include.empty %}
|
||||
{% include layout/sidenav-content.html menu=menu %}
|
||||
{% include layout/sidenav-content.html menu=menu dark=include.dark %}
|
||||
{% endunless %}
|
||||
</aside>
|
||||
<div class="navbar-bg"></div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
|
||||
<header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
|
||||
<div class="container{% if include.fluid %} container-fluid{% endif %}">
|
||||
{% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark notifications=true %}
|
||||
</div>
|
||||
|
||||
@@ -2,13 +2,14 @@
|
||||
layout: base
|
||||
---
|
||||
|
||||
<div class="d-flex flex-row h-100p">
|
||||
{% comment %}{% include layout/sidenav.html dark=true folded=false fixed=true %}{% endcomment %}
|
||||
<div class="layout d-flex flex-row vh-100">
|
||||
{% if page.nav-side %}
|
||||
{% include layout/sidenav.html dark=page.nav-dark folded=page.nav-folded fixed=page.nav-fixed right=page.nav-right %}
|
||||
{% endif %}
|
||||
|
||||
<div class="layout-main d-flex flex-column flex-fill max-w-full">
|
||||
{% unless page.nav-side %}
|
||||
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
||||
|
||||
{% unless page.nav-position == 'left' or page.nav-position == 'right'%}
|
||||
{% include layout/topmenu.html %}
|
||||
{% endunless %}
|
||||
|
||||
|
||||
@@ -2,5 +2,7 @@
|
||||
title: Dark mode
|
||||
dark-theme: true
|
||||
page-title: Dashboard
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
|
||||
@@ -2,5 +2,7 @@
|
||||
title: Dark header
|
||||
header-dark: true
|
||||
page-title: Dashboard
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
|
||||
@@ -3,5 +3,7 @@ title: Sticky header
|
||||
menu: layout.header-sticky
|
||||
page-title: Dashboard
|
||||
header-sticky: true
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
---
|
||||
title: Sidebar white
|
||||
menu: layout.sidebar-white
|
||||
nav-position: left
|
||||
nav-side: true
|
||||
nav-dark: true
|
||||
page-title: Dashboard
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -1,9 +1,11 @@
|
||||
---
|
||||
title: Folded sidebar
|
||||
menu: layout.sidebar-folded
|
||||
nav-position: left
|
||||
nav-side: true
|
||||
nav-folded: true
|
||||
nav-dark: true
|
||||
page-title: Dashboard
|
||||
sidenav-folded: true
|
||||
sidenav-dark: true
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Sidebar left
|
||||
menu: layout.sidebar-left
|
||||
nav-position: left
|
||||
nav-side: true
|
||||
page-title: Dashboard
|
||||
sidenav-dark: true
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
---
|
||||
title: Sidebar right
|
||||
menu: layout.sidebar-right
|
||||
nav-position: right
|
||||
nav-side: true
|
||||
nav-right: true
|
||||
page-title: Dashboard
|
||||
sidenav-dark: true
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Navbar top
|
||||
page-title: Dashboard
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
|
||||
6
pages/layouts.html
Normal file
6
pages/layouts.html
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -2,6 +2,7 @@
|
||||
border-bottom: 1px solid;
|
||||
background-color: $navbar-bg;
|
||||
border-color: $navbar-border-color;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -25,7 +26,7 @@ Navbar logo
|
||||
.nav-item.active .nav-link {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
@@ -107,98 +108,176 @@ Navbar logo
|
||||
// border: 0;
|
||||
//}
|
||||
//
|
||||
///*
|
||||
//Sidebar
|
||||
// */
|
||||
//.navbar-side {
|
||||
// flex-direction: column;
|
||||
// flex-wrap: nowrap;
|
||||
// align-items: inherit;
|
||||
// justify-content: start;
|
||||
// width: $sidenav-width;
|
||||
// min-width: $sidenav-width;
|
||||
// margin: 0;
|
||||
// overflow: auto;
|
||||
// pointer-events: inherit;
|
||||
// user-select: none;
|
||||
// background: $sidenav-bg;
|
||||
// border-right: 1px solid $sidenav-border-color;
|
||||
//
|
||||
// .nav {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
//
|
||||
// .nav-link {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// height: 2.5rem;
|
||||
// padding: 0 $navbar-padding-x;
|
||||
// color: $text-muted;
|
||||
// box-shadow: inset 2px 0 0 0 transparent;
|
||||
// transition: .3s background, .3s box-shadow;
|
||||
//
|
||||
// &[aria-expanded="true"],
|
||||
// &:hover {
|
||||
// background: rgba($link-color, .04);
|
||||
// border-color: $primary;
|
||||
// box-shadow: inset 2px 0 0 0 $primary;
|
||||
// }
|
||||
//
|
||||
// > .icon {
|
||||
// width: 2rem;
|
||||
// }
|
||||
//
|
||||
// &[data-toggle="collapse"] {
|
||||
// &::after {
|
||||
// display: block;
|
||||
// margin-left: auto;
|
||||
// font-family: $font-icons !important;
|
||||
// content: "";
|
||||
// transition: transform .3s;
|
||||
// }
|
||||
//
|
||||
// &[aria-expanded="true"]::after {
|
||||
// transform: rotate(-180deg);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &:not(.navbar-folded) {
|
||||
// &[data-toggle="collapse"][aria-expanded="true"] {
|
||||
// background: none;
|
||||
// box-shadow: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &:not(.hide-navbar-folded) {
|
||||
// //.nav-item .nav-item .nav-link {
|
||||
// // padding-left: 2.5rem;
|
||||
// //}
|
||||
// //
|
||||
// //.nav-item .nav-item .nav-item .nav-link {
|
||||
// // padding-left: 3.5rem;
|
||||
// //}
|
||||
// //
|
||||
// //.nav-item .nav-item .nav-item .nav-item .nav-link {
|
||||
// // padding-left: 4.5rem;
|
||||
// //}
|
||||
// }
|
||||
//
|
||||
// .navbar-brand {
|
||||
// height: 2.5rem;
|
||||
// text-align: center;
|
||||
// }
|
||||
//
|
||||
// .navbar-heading {
|
||||
// @include subheader;
|
||||
// margin: 0 0 .5rem;
|
||||
// }
|
||||
//
|
||||
// .navbar-nav {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
|
||||
$navbar-side-padding-x: 1rem;
|
||||
$navbar-side-padding-y: 1rem;
|
||||
$navbar-active-color: $primary;
|
||||
|
||||
/*
|
||||
Sidebar
|
||||
*/
|
||||
.navbar-side {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: inherit;
|
||||
justify-content: start;
|
||||
width: $sidenav-width;
|
||||
min-width: $sidenav-width;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
pointer-events: inherit;
|
||||
user-select: none;
|
||||
background: $sidenav-bg;
|
||||
padding: $navbar-side-padding-y $navbar-side-padding-x;
|
||||
|
||||
box-shadow: 1px 0 $sidenav-border-color;
|
||||
|
||||
.navbar-brand {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0 0 1.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
margin-left: -$navbar-side-padding-y;
|
||||
margin-right: -$navbar-side-padding-y;
|
||||
|
||||
.nav-link {
|
||||
padding: .5rem $navbar-side-padding-y;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
box-shadow: inset 2px 0 $navbar-active-color;
|
||||
background: rgba($navbar-active-color, .04);
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Right navbar
|
||||
*/
|
||||
&.navbar-right {
|
||||
order: 9;
|
||||
box-shadow: -1px 0 $sidenav-border-color;
|
||||
}
|
||||
|
||||
/*
|
||||
Folded navbar
|
||||
*/
|
||||
&.navbar-folded {
|
||||
width: $sidenav-folded-width;
|
||||
min-width: $sidenav-folded-width;
|
||||
|
||||
.navbar-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
margin: .25rem 0;
|
||||
width: 100%;
|
||||
font-size: 1.125rem;
|
||||
|
||||
.icon {
|
||||
margin: 0 auto;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-heading {
|
||||
@include subheader;
|
||||
margin: 0 0 .5rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
}
|
||||
|
||||
// .nav {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
//
|
||||
// .nav-link {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// height: 2.5rem;
|
||||
// padding: 0 $navbar-padding-x;
|
||||
// color: $text-muted;
|
||||
// box-shadow: inset 2px 0 0 0 transparent;
|
||||
// transition: .3s background, .3s box-shadow;
|
||||
//
|
||||
// &[aria-expanded="true"],
|
||||
// &:hover {
|
||||
// background: rgba($link-color, .04);
|
||||
// border-color: $primary;
|
||||
// box-shadow: inset 2px 0 0 0 $primary;
|
||||
// }
|
||||
//
|
||||
// > .icon {
|
||||
// width: 2rem;
|
||||
// }
|
||||
//
|
||||
// &[data-toggle="collapse"] {
|
||||
// &::after {
|
||||
// display: block;
|
||||
// margin-left: auto;
|
||||
// font-family: $font-icons !important;
|
||||
// content: "";
|
||||
// transition: transform .3s;
|
||||
// }
|
||||
//
|
||||
// &[aria-expanded="true"]::after {
|
||||
// transform: rotate(-180deg);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &:not(.navbar-folded) {
|
||||
// &[data-toggle="collapse"][aria-expanded="true"] {
|
||||
// background: none;
|
||||
// box-shadow: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &:not(.hide-navbar-folded) {
|
||||
// //.nav-item .nav-item .nav-link {
|
||||
// // padding-left: 2.5rem;
|
||||
// //}
|
||||
// //
|
||||
// //.nav-item .nav-item .nav-item .nav-link {
|
||||
// // padding-left: 3.5rem;
|
||||
// //}
|
||||
// //
|
||||
// //.nav-item .nav-item .nav-item .nav-item .nav-link {
|
||||
// // padding-left: 4.5rem;
|
||||
// //}
|
||||
// }
|
||||
//
|
||||
// .navbar-brand {
|
||||
// height: 2.5rem;
|
||||
// text-align: center;
|
||||
// }
|
||||
//
|
||||
|
||||
|
||||
//
|
||||
// .navbar-nav {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
}
|
||||
|
||||
///*
|
||||
//Fixed navbar
|
||||
// */
|
||||
@@ -208,17 +287,6 @@ Navbar logo
|
||||
// bottom: 0;
|
||||
// z-index: $zindex-sticky;
|
||||
//
|
||||
// + .navbar-bg {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// z-index: $zindex-dropdown;
|
||||
// display: none;
|
||||
// background: rgba($dark, .2);
|
||||
// }
|
||||
//
|
||||
// &.navbar-side {
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
@@ -267,16 +335,7 @@ Navbar logo
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///*
|
||||
//Right navbar
|
||||
// */
|
||||
//.navbar-right {
|
||||
// order: 9;
|
||||
// border-right: none;
|
||||
// border-left: 1px solid $sidenav-border-color;
|
||||
//}
|
||||
//
|
||||
|
||||
///*
|
||||
//Dark navbar
|
||||
// */
|
||||
@@ -309,89 +368,89 @@ Navbar logo
|
||||
// left: 0;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Folded navbar
|
||||
// */
|
||||
|
||||
/**
|
||||
Folded navbar
|
||||
*/
|
||||
//.navbar-folded {
|
||||
// width: $sidenav-folded-width;
|
||||
// min-width: $sidenav-folded-width;
|
||||
//
|
||||
// .navbar-brand {
|
||||
// width: 2.5rem;
|
||||
// }
|
||||
//
|
||||
// .navbar-heading {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// .nav-text {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// .nav-link {
|
||||
// justify-content: center;
|
||||
// padding-top: 0;
|
||||
// padding-bottom: 0;
|
||||
//
|
||||
// &[data-toggle="collapse"]::after {
|
||||
// content: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .nav-icon {
|
||||
// justify-content: center;
|
||||
// opacity: 1;
|
||||
// }
|
||||
//
|
||||
// .navbar-subnav {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 100%;
|
||||
// background: #fff;
|
||||
//
|
||||
// .nav-text {
|
||||
// display: block;
|
||||
// }
|
||||
//
|
||||
// .nav-link {
|
||||
// color: $body-color;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .navbar-brand {
|
||||
// width: 2.5rem;
|
||||
// }
|
||||
//
|
||||
// .navbar-heading {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// .nav-text {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// .nav-link {
|
||||
// justify-content: center;
|
||||
// padding-top: 0;
|
||||
// padding-bottom: 0;
|
||||
//
|
||||
// &[data-toggle="collapse"]::after {
|
||||
// content: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .nav-icon {
|
||||
// justify-content: center;
|
||||
// opacity: 1;
|
||||
// }
|
||||
//
|
||||
// .navbar-subnav {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 100%;
|
||||
// background: #fff;
|
||||
//
|
||||
// .nav-text {
|
||||
// display: block;
|
||||
// }
|
||||
//
|
||||
// .nav-link {
|
||||
// color: $body-color;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.nav-icon {
|
||||
// display: flex;
|
||||
// flex-shrink: 0;
|
||||
// align-items: center;
|
||||
// width: 1.5rem;
|
||||
// font-size: px2rem(15px);
|
||||
// border-radius: 100%;
|
||||
// opacity: .8;
|
||||
//
|
||||
// .icon {
|
||||
// font-size: inherit;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.nav-icon {
|
||||
// display: flex;
|
||||
// flex-shrink: 0;
|
||||
// align-items: center;
|
||||
// width: 1.5rem;
|
||||
// font-size: px2rem(15px);
|
||||
// border-radius: 100%;
|
||||
// opacity: .8;
|
||||
//
|
||||
// .icon {
|
||||
// font-size: inherit;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
|
||||
//.nav-text {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// width: 100%;
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Utils
|
||||
// */
|
||||
//.hide-navbar-folded {
|
||||
// @at-root .navbar-side.navbar-folded & {
|
||||
// display: none;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.hide-navbar-expanded {
|
||||
// @at-root .navbar-side:not(.navbar-folded) & {
|
||||
// display: none;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
|
||||
/**
|
||||
Utils
|
||||
*/
|
||||
.hide-navbar-folded {
|
||||
@at-root .navbar-side.navbar-folded & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-navbar-expanded {
|
||||
@at-root .navbar-side:not(.navbar-folded) & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -43,6 +43,10 @@
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
margin-right: .25rem;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
||||
Reference in New Issue
Block a user