#913 new offcanvas menu

src/pages/_data/menu.yml

@@ -75,6 +75,9 @@ base:
     typography:
       title: Typography
       url: typography.html
+    offcanvas:
+      title: Offcanvas
+      url: offcanvas.html
     markdown:
       title: Markdown
       url: markdown.html

src/pages/offcanvas.html

@@ -0,0 +1,36 @@
+---
+menu: base.offcanvas
+title: Offcanvas
+page-header: Offcanvas
+---
+
+{% assign directions = 'start,end,top,bottom' | split: ',' %}
+
+<div class="card">
+	<div class="card-body">
+		{% for direction in directions %}
+		<a class="btn" data-bs-toggle="offcanvas" href="#offcanvas{{ direction | capitalize }}" role="button" aria-controls="offcanvas{{ direction | capitalize }}">
+			Toggle {{ direction }} offcanvas
+		</a>
+		{% endfor %}
+	</div>
+</div>
+
+{% for direction in directions %}
+<div class="offcanvas offcanvas-{{ direction }}" tabindex="-1" id="offcanvas{{ direction | capitalize }}" aria-labelledby="offcanvas{{ direction | capitalize }}Label">
+	<div class="offcanvas-header">
+		<h2 class="offcanvas-title" id="offcanvas{{ direction | capitalize }}Label">{{ direction | capitalize }} offcanvas</h2>
+		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+	</div>
+	<div class="offcanvas-body">
+		<div>
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!
+		</div>
+		<div class="mt-3">
+			<button class="btn" type="button" data-bs-dismiss="offcanvas">
+				Close offcanvas
+			</button>
+		</div>
+	</div>
+</div>
+{% endfor %}

src/scss/_bootstrap-components.scss

@@ -27,6 +27,8 @@
 @import "~bootstrap/scss/popover";
 @import "~bootstrap/scss/carousel";
 @import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/offcanvas";
+@import "~bootstrap/scss/placeholders";
 
 // Helpers
 @import "~bootstrap/scss/helpers";

src/scss/_tabler-core.scss

@@ -50,6 +50,7 @@
 @import "ui/toolbar";
 @import "ui/type";
 @import "ui/charts";
+@import "ui/offcanvas";
 
 @import "utils/background";
 @import "utils/colors";

src/scss/_variables.scss

@@ -12,8 +12,8 @@ $enable-negative-margins: false !default;
 $assets-base: ".." !default;
 
 // FONTS
-$google-font: 'Inter' !default;
-$google-font-monospaced: null !default;
+$google-font: false !default;
+$google-font-monospaced: false !default;
 
 $font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
 $font-family-monospace: $google-font-monospaced, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
@@ -27,7 +27,7 @@ $icon-stroke-width: 1.5 !default;
 $icon-size: 1.25rem !default;
 
 //Fonts
-$font-size-base: .875rem !default;
+$font-size-base: .9375rem !default;
 $body-letter-spacing: 0 !default;
 
 $font-weight-light: 300 !default;

src/scss/ui/_offcanvas.scss

@@ -0,0 +1,3 @@
+.offcanvas-blur {
+  backdrop-filter: blur($modal-backdrop-blur);
+}