page buttons side

pages/_includes/layout/page-title.html

 {% if page.page-title or layout.page-title %}
 <div class="page-title-box">
-	<h2 class="page-title">
-		{{ page.page-title | default: layout.page-title }}
-	</h2>
 
-   {% if page.page-right %}
-	<div class="page-options d-none d-md-block ml-auto">
-
-		{% if page.page-right == "date" %}
-		<form class="form-inline">
-			<div class="mb-2">
-				<div class="input-group">
-					<input type="text" class="form-control form-control-light" placeholder="09/10/2018">
-					<div class="input-group-append">
-                        <a class="input-group-text">
-                            {% include ui/icon.html icon="calendar" %}
-                        </a>
-					</div>
-				</div>
-			</div>
-			<a href="javascript:void(0)" class="btn btn-icon btn-secondary ml-2">
-				{% include ui/icon.html icon="refresh-ccw" %}
-			</a>
-			<a href="javascript:void(0)" class="btn btn-icon btn-secondary ml-2">
-				{% include ui/icon.html icon="filter" %}
-			</a>
-		</form>
-		{% elsif page.page-right == "breadcrumb" %}
-		<ol class="breadcrumb m-0">
-			<li class="breadcrumb-item"><a href="javascript:void(0)">UI Kit</a></li>
-			<li class="breadcrumb-item"><a href="javascript:void(0)">Tables</a></li>
-			<li class="breadcrumb-item active">Basic Tables</li>
-		</ol>
-		{% endif %}
-	</div>
-   {% endif %}
+   <div class="row align-items-center">
+      <div class="col">
+         <div class="page-pretitle">
+            Overview
+         </div>
+         <h2 class="page-title">
+            {{ page.page-title | default: layout.page-title }}
+         </h2>
+      </div>
+      <div class="col-auto">
+         {% include ui/button.html text="New view" color="secondary" icon="plus" %}
+         {% include ui/button.html text="Create new report" color="primary" class="ml-3" %}
+      </div>
+   </div>
 </div>
 {% endif %}

pages/_layouts/default.html

@@ -3,13 +3,16 @@ layout: base
 ---
 
 <div class="d-flex flex-row h-100p">
-   {% comment %}
+   {% if page.nav-position == 'left' or page.nav-position == 'right'%}
    {% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded fixed=true %}
-   {% endcomment %}
+   {% endif %}
 
    <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 %}
+
+      {% unless page.nav-position == 'left' or page.nav-position == 'right'%}
       {% include layout/topmenu.html %}
+      {% endunless %}
 
       <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/snippets.html

 ---
 title: Snippets
 page-title: Snippets
-page-right: date
+page-title-right: date
 ---
 
 <div class="row">

scss/_variables.scss

@@ -42,7 +42,7 @@ $black: #000000 !default;
 $white: #ffffff !default;
 
 $light: #f5f7fb !default;
-$dark: #495057 !default;
+$dark: #354052 !default;
 
 $body-bg: $light !default;
 $body-color: $dark !default;

scss/layout/_navbar.scss

@@ -193,7 +193,7 @@ Sidebar
   }
 
   .navbar-heading {
-    @extend .text-subheader;
+    @extend .subheader;
     margin: 0 0 .5rem;
   }
 

scss/layout/_page.scss

 .page-title-box {
-  display: flex;
-  align-items: center;
   min-height: 2.5rem;
-  margin: .5rem 0 1.5rem;
+  margin: .75rem 0 2rem;
+}
+
+.page-pretitle {
+  @extend .subheader;
 }
 
 .page-title {
   margin: 0;
   font-size: $h2-font-size;
   font-weight: 400;
-  line-height: 2.5rem;
   color: $body-color;
-}
-
-.page-title-options {
-  margin-left: auto;
-  color: $text-muted;
+  line-height: 1;
 }

scss/tabler.scss

@@ -57,7 +57,6 @@
 @import "utils/background";
 @import "utils/colors";
 @import "utils/scroll";
-@import "utils/text";
 @import "utils/sizing";
 @import "utils/opacity";
 @import "utils/shadow";

scss/ui/_typo.scss

@@ -91,3 +91,46 @@ Selection
   color: #fff;
   background-color: lighten($primary, 8%);
 }
+
+
+/**
+Subheader
+ */
+.subheader {
+  font-size: $h6-font-size;
+  font-weight: 600;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+
+/**
+Antialiasing
+ */
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+/**
+Markdown
+ */
+.markdown {
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  table {
+    @extend .table, .table-bordered;
+  }
+}

scss/utils/_text.scss

 // stylelint-disable declaration-no-important
-
-.text-subheader {
-  font-size: $h6-font-size;
-  font-weight: 600;
-  color: $text-muted;
-  text-transform: uppercase;
-  letter-spacing: .04em;
-}
-
-/**
-Antialiasing
- */
-.antialiased {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.subpixel-antialiased {
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-
-/**
-Markdown
- */
-.markdown {
-
-  > :first-child {
-    margin-top: 0;
-  }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-
-  table {
-    @extend .table, .table-bordered;
-  }
-}