tabler layout, sidebar, nav

pages/_includes/layout/menu.html

@@ -1,6 +1,6 @@
 {% removeemptylines %}
 {% assign side = false %}
-<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
+<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
    {% assign current-page = page.menu | default: layout.menu | split: '.' %}
 
    {% for level-1 in site.data.menu %}

pages/_includes/layout/sidenav.html

@@ -1,9 +1,6 @@
 {% assign menu = page.menu | default: layout.menu %}
-<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 class="layout-menubar {% 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">
+   <div class="container">
+      {% include layout/sidenav-content.html menu=menu dark=include.dark %}
+   </div>
 </aside>

pages/_includes/layout/topmenu.html

@@ -1,4 +1,4 @@
-<div class="d-none d-lg-block navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %} navbar-expand-lg">
+<div class="layout-menubar navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
    <div class="container">
       {% include layout/menu.html top=true %}
    </div>

pages/_includes/layout/topnav.html

@@ -1,4 +1,4 @@
-<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 %}">
+<header class="layout-topnav 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>

pages/_layouts/default.html

@@ -2,18 +2,12 @@
 layout: base
 ---
 
-<div class="layout d-flex flex-row h-100p">
-   {% if page.sidenav %}
-   {% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded right=page.sidenav-right class=page.sidenav-class %}
-   {% endif %}
+<div class="layout{% if page.site-layout %} {{ page.site-layout }}{% endif %}">
 
-   <div class="sidenav-overlay" data-toggle="sidenav"></div>
+   {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
+   {% include layout/topmenu.html %}
 
-   <div class="layout-main d-flex flex-column flex-fill max-w-full">
-      {% unless page.sidenav %}
-      {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
-      {% include layout/topmenu.html %}
-      {% endunless %}
+   <div class="layout-main">
 
       <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

@@ -1,8 +1,8 @@
 ---
 title: Layout test
-sidenav-class: sidenav-expanded-xl sidenav-folded-md
 sidenav: true
 sidenav-dark: true
+site-layout: layout-with-sidebar-lg layout-with-sidebar-folded-md
 ---
 
 <div class="card" id="card-test">