sidebar layouts

_config.yml

@@ -46,6 +46,7 @@ defaults:
       type: pages
     values:
       layout: default
+      nav-position: top
   -
     scope:
       type: docs

package.json

@@ -7,7 +7,7 @@
     "build": "npm-run-all lint html-build css-compile js-compile",
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",
-    "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch --incremental",
+    "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch",
     "html-build": "JEKYLL_ENV=production bundle exec jekyll build",
     "lint": "npm-run-all --parallel js-lint css-lint",
     "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css",

pages/_data/menu.yml

@@ -8,15 +8,29 @@ level-1:
   children:
     level-2:
       title: Level 2
-      icon: menu
       children:
         level-3:
           title: Level 3
-          icon: menu
           children:
             level-4:
               title: Level 4
-              icon: menu
+layout:
+  title: Layout
+  icon: layout
+  children:
+    sidebar-left:
+      title: Left sidebar
+      url: navbar-left.html
+    sidebar-right:
+      title: Right sidebar
+      url: navbar-right.html
+    navbar-top:
+      title: Navbar top
+      url: navbar-top.html
+    header-dark:
+      title: Dark header
+      url: header-dark.html
+
 docs:
   title: Documentation
   icon: file-text

pages/_includes/layout/header.html

@@ -1,3 +1,3 @@
-<header class="header">
+<header class="header{% if include.dark %} bg-dark text-white{% endif %}">
-   {% include parts/navbar.html logo=true user-menu=1 person=5 dark=false %}
+   {% include parts/navbar.html logo=true user-menu=1 person=5 dark=false white-logo=include.dark %}
 </header>

pages/_includes/layout/menu.html

@@ -1,4 +1,4 @@
-<ul class="navbar-nav mb-md-4">
+<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
    {% assign current-page = include.menu | split: '.' %}
 
    {% for level-1 in site.data.menu %}

pages/_includes/layout/sidenav-content.html

@@ -10,4 +10,4 @@
    Docs
 </h6>
 
-{% include layout/menu.html menu=include.menu %}
+{% include layout/menu.html menu=include.menu class="mb-md-4" %}

pages/_includes/layout/sidenav.html

@@ -1,4 +1,4 @@
 {% assign menu = page.menu | default: layout.menu %}
-<div class="sidenav sidenav-dark sidenav-expand-md">
+<div class="sidenav sidenav-dark{% if page.nav-position == "right" %} sidenav-right{% endif %} sidenav-expand-md">
    {% include layout/sidenav-content.html white=true menu=menu %}
 </div>

pages/_includes/layout/topnav.html

@@ -1,9 +1,5 @@
 <div class="topnav">
-	<div class="container-fluid">
+	<div class="container">
-		<nav class="navbar navbar-expand-lg topnav-menu">
-			<div class="navbar-collapse active collapse show" id="topnav-menu-content" style="">
       {% include layout/menu.html %}
 	</div>
-		</nav>
-	</div>
 </div>

pages/_includes/parts/navbar.html

@@ -2,8 +2,7 @@
 {% assign person = site.data.people | where: "id", include.person %}
 {% assign person = person[0] %}
 
-<div class="navbar navbar-expand-lg{% if include.dark %} navbar-dark bg-dark{% endif %}">
+<div class="navbar container{% if include.fluid %}-fluid{% endif %} navbar-expand-lg{% if include.dark %} navbar-dark bg-dark{% endif %}">
-   <div class="container{% if include.fluid %}-fluid{% endif %}">
    <a class="d-lg-none px-1" data-toggle="modal" data-target="#aside">
       {% include ui/icon.html icon="menu" %}
    </a>
@@ -12,7 +11,7 @@
    <a href="{{ site.base }}" class="navbar-brand text-inherit">
       {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
       {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
-         {% if include.logo %}<img src="{{ site.base }}/img/logo.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
+      {% if include.logo %}<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
       {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
    </a>
 
@@ -230,5 +229,4 @@
          </a>
       </li>
    </ul>
-   </div>
 </div>

pages/_layouts/base.html

@@ -20,8 +20,8 @@
 
 	<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
 
-	{% include_cached layout/css.html %}
+	{% include layout/css.html %}
-	{% include_cached layout/js.html %}
+	{% include layout/js.html %}
 </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 %}">
 

pages/_layouts/default.html

@@ -3,10 +3,18 @@ layout: base
 ---
 
 <div class="d-flex h-auto min-h-screen">
+
+   {% if page.nav-position == "left" or page.nav-position == "right" %}
    {% include layout/sidenav.html %}
+   {% endif %}
 
    <div class="flex-fill d-flex flex-column mw-100">
-      {% include_cached layout/header.html %}
+      {{ page.header-dark }}
+      {% include layout/header.html dark=page.header-dark %}
+
+      {% if page.nav-position == "top" %}
+      {% include layout/topnav.html %}
+      {% endif %}
 
       <div class="d-flex flex-fill">
 

pages/header-dark.html

@@ -0,0 +1,4 @@
+---
+title: Dark header
+header-dark: true
+---

pages/navbar-left.html

@@ -0,0 +1,5 @@
+---
+title: Sidebar left
+menu: layout.sidebar-left
+nav-position: left
+---

pages/navbar-right.html

@@ -0,0 +1,5 @@
+---
+title: Sidebar right
+menu: layout.sidebar-right
+nav-position: right
+---

pages/navbar-top.html

@@ -0,0 +1,3 @@
+---
+title: Navbar top
+---

pages/sidebar.html

@@ -1,4 +0,0 @@
----
-title: Sidebar
-body-class: sidebar-folded
----

scss/_variables.scss

@@ -105,9 +105,9 @@ $avatar-sizes: (
   "xl": 6rem
 ) !default;
 
-$font-size-base: .9375rem !default;
+$font-size-base: 1rem !default;
 $font-weight-base: 400 !default;
-$line-height-base: (24 / 15) !default;
+$line-height-base: 1.5 !default;
 
 $border-radius: 3px !default;