Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

folded navbar responsive

Browse Source
This commit is contained in:
codecalm
2019-07-10 21:27:07 +02:00
parent fba6e2a785
commit 43a2fc1652
4 changed files with 51 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
js/demo.js
View File

@@ -135,6 +135,7 @@ class TablerDemo {
}; };
toggleSidebarColor(color) { toggleSidebarColor(color) {
console.log('color', color);
return this.setConfig('sidebarColor', color, ['dark', 'light'], () => { return this.setConfig('sidebarColor', color, ['dark', 'light'], () => {
if (color === 'dark') { if (color === 'dark') {
document.querySelector('.js-sidebar').classList.add('navbar-dark'); document.querySelector('.js-sidebar').classList.add('navbar-dark');

3
pages/_includes/layout/sidenav.html
View File

@@ -1,4 +1,5 @@
{% assign menu = page.menu | default: layout.menu %} {% assign menu = page.menu | default: layout.menu %}
<aside class="d-none d-lg-flex navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar"> <aside class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
{% include layout/sidenav-content.html menu=menu %} {% include layout/sidenav-content.html menu=menu %}
</aside> </aside>
<div class="navbar-bg"></div>

2
pages/_layouts/default.html
View File

@@ -8,7 +8,7 @@ layout: base
<div class="layout-main d-flex flex-column flex-fill max-w-full"> <div class="layout-main d-flex flex-column flex-fill max-w-full">
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %} {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
<div class="d-none d-lg-flex navbar navbar-expand-md"> <div class="navbar navbar-expand-md">
<div class="container"> <div class="container">
{% include layout/menu.html top=true %} {% include layout/menu.html top=true %}
</div> </div>

42
scss/layout/_navbar.scss
View File

@@ -206,32 +206,63 @@ Sidebar
Fixed navbar Fixed navbar
*/ */
.navbar-fixed { .navbar-fixed {
position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
+ .navbar-bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($dark, .2);
z-index: $zindex-dropdown;
display: none;
}
}
/*
Responsive utils
*/
.navbar {
&.navbar-side {
display: none;
outline: 1px solid red;
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
& + .layout-main { display: flex;
outline: 3px solid orange;
& ~ .layout-main {
margin-left: $sidenav-width; margin-left: $sidenav-width;
} }
&.navbar-right + .layout-main { &.navbar-right ~ .layout-main {
margin-left: 0; margin-left: 0;
margin-right: $sidenav-width; margin-right: $sidenav-width;
} }
} }
&.navbar-folded {
display: flex;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
&.navbar-folded + .layout-main {
outline: 3px solid yellow;
& ~ .layout-main {
margin-left: $sidenav-folded-width; margin-left: $sidenav-folded-width;
} }
&.navbar-right.navbar-folded + .layout-main { &.navbar-right ~ .layout-main {
margin-left: 0; margin-left: 0;
margin-right: $sidenav-folded-width; margin-right: $sidenav-folded-width;
} }
} }
} }
}
}
/* /*
Right navbar Right navbar
@@ -362,7 +393,6 @@ Utils
} }
} }
.navbar-toggler-icon { .navbar-toggler-icon {
outline: 1px solid red; outline: 1px solid red;
} }