Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

sidenav responsive init

Browse Source
This commit is contained in:
codecalm
2019-10-31 19:59:33 +01:00
parent 3561ca6cf6
commit bedd566155
8 changed files with 172 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/layout/sidenav.html
+4 -1
View File
@@ -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>
pages/_layouts/base.html
+2 -3
View File
@@ -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}}
pages/_layouts/default.html
+5 -1
View File
@@ -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 %}
pages/layout-test.html
+33
View 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 %}