mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
sidenav responsive init
This commit is contained in:
codecalm
@@ -1,6 +1,9 @@
|
||||
{% assign menu = page.menu | default: layout.menu %}
|
||||
<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">
|
||||
<aside class="sidenav {% if include.class %} {{ include.class }}{% endif %} {% if include.dark %}sidenav-dark bg-dark text-white{% else %}sidenav-light{% endif %}{% if include.fixed %} sidenav-fixed{% endif %}{% if include.right %} sidenav-right{% endif %}{% if include.folded %} sidenav-folded{% endif %} js-sidebar" id="sidebar">
|
||||
|
||||
{% comment %}
|
||||
{% unless include.empty %}
|
||||
{% include layout/sidenav-content.html menu=menu dark=include.dark %}
|
||||
{% endunless %}
|
||||
{% endcomment %}
|
||||
</aside>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<meta http-equiv="Content-Language" content="en"/>
|
||||
|
||||
@@ -32,8 +32,7 @@
|
||||
|
||||
<style>body { display: none; }</style>
|
||||
</head>
|
||||
<body
|
||||
class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
|
||||
<body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
|
||||
|
||||
{{ content}}
|
||||
|
||||
|
||||
@@ -2,16 +2,20 @@
|
||||
layout: base
|
||||
---
|
||||
|
||||
<div class="layout d-flex flex-row vh-100">
|
||||
<div class="layout d-flex flex-row h-100p">
|
||||
{% 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 %}
|
||||
|
||||
{% include layout/sidenav.html class=page.side-class dark=true %}
|
||||
|
||||
<div class="layout-main d-flex flex-column flex-fill max-w-full">
|
||||
{% comment %}
|
||||
{% unless page.nav-side %}
|
||||
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
||||
{% include layout/topmenu.html %}
|
||||
{% endunless %}
|
||||
{% endcomment %}
|
||||
|
||||
<main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
|
||||
{% include layout/page-title.html %}
|
||||
|
||||
33
pages/layout-test.html
Normal file
33
pages/layout-test.html
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Layout test
|
||||
side-class: sidenav-expanded-xl sidenav-folded-lg
|
||||
---
|
||||
|
||||
<div class="card" id="card-test">
|
||||
<div class="card-body">
|
||||
<a href="#" class="btn btn-secondary btn-block" id="toggle-sidebar">sidebar</a>
|
||||
<div id="card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture_global scripts %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var $test_el = $('#card-test'),
|
||||
$test_body_el = $('#card-body'),
|
||||
test_width = function () {
|
||||
$test_body_el.text($test_el.width());
|
||||
};
|
||||
|
||||
test_width();
|
||||
|
||||
$(window).on('resize', function () {
|
||||
test_width();
|
||||
});
|
||||
|
||||
$('#toggle-sidebar').on('click', function () {
|
||||
$('body').toggleClass('show-sidenav');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endcapture_global %}
|
||||
@@ -175,7 +175,6 @@ $sizes-percentage: (
|
||||
) !default;
|
||||
|
||||
|
||||
$loader-size: 2.5rem !default;
|
||||
|
||||
$generate-social-colors: true !default;
|
||||
$generate-color-hues: true !default;
|
||||
@@ -183,8 +182,6 @@ $generate-colors: true !default;
|
||||
|
||||
$enable-gradients: false !default;
|
||||
|
||||
$grid-gutter-width: 24px !default;
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
@@ -257,6 +254,12 @@ $dropdown-padding-y: .5rem !default;
|
||||
$dropdown-link-hover-bg: $hover-bg !default;
|
||||
$dropdown-link-hover-color: inherit !default;
|
||||
|
||||
//grid
|
||||
$grid-gutter-width: 2rem !default;
|
||||
|
||||
//loader
|
||||
$loader-size: 2.5rem !default;
|
||||
|
||||
//navbar
|
||||
$navbar-bg: $white !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
|
||||
@@ -11,12 +11,6 @@ Navbar logo
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
//.nav-link {
|
||||
// &.active {
|
||||
// color: $primary;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
margin-right: -($navbar-padding-x);
|
||||
@@ -35,421 +29,6 @@ Navbar logo
|
||||
border-bottom: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// .nav-link {
|
||||
// display: flex;
|
||||
// color: $text-muted;
|
||||
// transition: .3s color;
|
||||
//
|
||||
// &:hover {
|
||||
// color: $body-color;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .nav-item {
|
||||
// position: relative;
|
||||
// }
|
||||
//
|
||||
// .navbar-nav {
|
||||
// padding-right: .5rem;
|
||||
// padding-left: .5rem;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
//.navbar:not(.navbar-side) .navbar-subnav {
|
||||
// position: absolute;
|
||||
// top: 100%;
|
||||
// left: 0;
|
||||
// z-index: $zindex-tooltip;
|
||||
// width: 12rem;
|
||||
// padding: .25rem;
|
||||
// font-size: $h5-font-size;
|
||||
// background: #fff;
|
||||
// border: 1px solid $border-color;
|
||||
// border-radius: 3px;
|
||||
// box-shadow: 0 .5rem 1rem rgba(18, 18, 18, .15);
|
||||
//
|
||||
// .nav {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Navbar brand
|
||||
// */
|
||||
//.navbar-brand {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
//
|
||||
// @at-root a#{&} {
|
||||
// transition: .3s opacity;
|
||||
//
|
||||
// &:hover {
|
||||
// opacity: .8;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.navbar-brand-logo {
|
||||
// height: 2rem;
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Navbar toggler
|
||||
// */
|
||||
//.navbar-toggler {
|
||||
// padding: 0;
|
||||
// border: 0;
|
||||
//}
|
||||
//
|
||||
|
||||
$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
|
||||
// */
|
||||
//.navbar-fixed {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// z-index: $zindex-sticky;
|
||||
//
|
||||
// &.navbar-side {
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
//
|
||||
// &.navbar-right {
|
||||
// right: 0;
|
||||
// left: auto;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.navbar-side {
|
||||
// display: none;
|
||||
//
|
||||
// @include media-breakpoint-up(xl) {
|
||||
// display: flex;
|
||||
//
|
||||
// &.navbar-fixed {
|
||||
// & ~ .layout-main {
|
||||
// margin-left: $sidenav-width;
|
||||
// }
|
||||
//
|
||||
// &.navbar-right ~ .layout-main {
|
||||
// margin-right: $sidenav-width;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &.navbar-folded {
|
||||
// display: flex;
|
||||
//
|
||||
// &.navbar-fixed {
|
||||
// @include media-breakpoint-up(lg) {
|
||||
//
|
||||
// & ~ .layout-main {
|
||||
// margin-left: $sidenav-folded-width;
|
||||
// }
|
||||
//
|
||||
// &.navbar-right ~ .layout-main {
|
||||
// margin-right: $sidenav-folded-width;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
///*
|
||||
//Dark navbar
|
||||
// */
|
||||
//.navbar-dark {
|
||||
// color: #fff;
|
||||
// background-color: $sidenav-dark-bg;
|
||||
//
|
||||
// .navbar-brand {
|
||||
// filter: brightness(0) invert(1);
|
||||
// }
|
||||
//
|
||||
// .navbar-divider {
|
||||
// border-color: rgba(#fff, .2);
|
||||
// }
|
||||
//
|
||||
// .nav-link {
|
||||
// color: inherit;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Sticky navbar
|
||||
// */
|
||||
//.navbar-sticky {
|
||||
// position: sticky;
|
||||
// top: 0;
|
||||
// z-index: 100;
|
||||
//
|
||||
// &.navbar-side {
|
||||
// left: 0;
|
||||
// }
|
||||
//}
|
||||
|
||||
/**
|
||||
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;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
121
scss/layout/_sidenav.scss
Normal file
121
scss/layout/_sidenav.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
$sidenav-padding-x: 1rem;
|
||||
$sidenav-padding-y: 1rem;
|
||||
$sidenav-active-color: $primary;
|
||||
$breakpoints: $grid-breakpoints;
|
||||
|
||||
@mixin sidenav-base {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-fixed;
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
transition: .3s opacity, .3s transform;
|
||||
will-change: transform;
|
||||
|
||||
@include sidenav-expanded;
|
||||
|
||||
body.show-sidenav & {
|
||||
@include sidenav-visible-common;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidenav-visible-common {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@mixin sidenav-expanded {
|
||||
width: $sidenav-width;
|
||||
min-width: $sidenav-width;
|
||||
|
||||
&:before {
|
||||
content: 'sidenav'
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidenav-folded {
|
||||
@include sidenav-visible-common;
|
||||
width: $sidenav-folded-width;
|
||||
min-width: $sidenav-folded-width;
|
||||
|
||||
&:before {
|
||||
content: 'sidenav-folded'
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Sidebar
|
||||
*/
|
||||
.sidenav {
|
||||
@include sidenav-base;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: inherit;
|
||||
justify-content: start;
|
||||
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
pointer-events: inherit;
|
||||
user-select: none;
|
||||
background: $sidenav-bg;
|
||||
padding: $sidenav-padding-y $sidenav-padding-x;
|
||||
padding: 0; //todo: remove
|
||||
|
||||
box-shadow: 1px 0 $sidenav-border-color;
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Right navbar
|
||||
*/
|
||||
&.navbar-right {
|
||||
order: 9;
|
||||
box-shadow: -1px 0 $sidenav-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Folded navbar
|
||||
*/
|
||||
.sidenav-folded {
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
&#{$infix} {
|
||||
@include sidenav-folded;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-expanded {
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
&#{$infix} {
|
||||
@include sidenav-expanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Utils
|
||||
*/
|
||||
.hide-sidenav-folded {
|
||||
.sidenav.sidenav-folded & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-sidenav-expanded {
|
||||
.sidenav:not(.sidenav-folded) & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,7 @@
|
||||
|
||||
@import "layout/core";
|
||||
@import "layout/navbar";
|
||||
@import "layout/sidenav";
|
||||
@import "layout/page";
|
||||
|
||||
@import "ui/alerts";
|
||||
|
||||
Reference in New Issue
Block a user