docs: add components examples

Author: mrholek

src/assets/img/full.jpg

@@ -0,0 +1,17 @@
+/* global coreui */
+
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI Free Boostrap Admin Template (v4.0.0-alpha.2): popovers.js
+ * Licensed under MIT (https://coreui.io/license)
+ * --------------------------------------------------------------------------
+ */
+
+const toastTrigger = document.getElementById('liveToastBtn')
+const toastLiveExample = document.getElementById('liveToast')
+if (toastTrigger) {
+  toastTrigger.addEventListener('click', function () {
+    const toast = new coreui.Toast(toastLiveExample)
+    toast.show()
+  })
+}

src/js/toasts.js

@@ -12,8 +12,8 @@ mixin example
           svg.icon.me-2
             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code")
           | Code
-    .tab-content
-      .tab-pane.py-3.active.preview(role="tabpanel" id="preview-"+id )
+    .tab-content.border.border-top-0.rounded-bottom
+      .tab-pane.p-3.active.preview(role="tabpanel" id="preview-"+id )
         block
       .tab-pane.py-3(role="tabpanel" id="code-"+id )
         script.language-markup(type='text/plain')

src/pug/_mixins/example.pug

@@ -1,6 +1,6 @@
 header.header.header-sticky.mb-4
   .container-fluid
-    button.header-toggler.px-md-0.me-md-3.d-xl-none(type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()")
+    button.header-toggler.px-md-0.me-md-3.d-xxl-none(type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()")
       svg.icon.icon-lg
         use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu")
     a.header-brand.d-xl-none(href="#")

src/pug/_partials/header.pug

@@ -178,6 +178,10 @@
           a.nav-link(href='notifications/modals.html')
             span.nav-icon
             |  Modals
+        li.nav-item
+          a.nav-link(href='notifications/toasts.html')
+            span.nav-icon
+            |  Toasts
     li.nav-item
       a.nav-link(href='widgets.html')
         svg.nav-icon

src/pug/_partials/sidebar.pug

@@ -7,7 +7,7 @@ block view
   +callout('Collapse', 'https://coreui.io/docs/4.0/components/collapse/')
   .card.mb-4
     .card-header
-      |  Collapse
+      strong Collapse
     .card-body
       p.text-medium-emphasis.small
         | You can use a link with the

src/pug/views/base/cards.pug

@@ -60,7 +60,7 @@ block view
         .card-body
           p.text-medium-emphasis.small
             | Change the horizontal alignment of your nav with 
-            a(href='/docs/4.0/layout/grid/#horizontal-alignment') flexbox utilities
+            a(href='https://coreui.io/docs/4.0/docs/4.0/layout/grid/#horizontal-alignment') flexbox utilities
             | . By default, navs are left-aligned, but you can easily change them to center or right aligned.
           p.text-medium-emphasis.small
             | Centered with 
@@ -243,7 +243,7 @@ block view
         .card-body
           p.text-medium-emphasis.small
             | If you need responsive nav variations, consider using a series of 
-            a(href='/docs/4.0/utilities/flex/') flexbox utilities
+            a(href='https://coreui.io/docs/4.0/docs/4.0/utilities/flex/') flexbox utilities
             | . While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
           +example()
             nav.nav.nav-pills.flex-column.flex-sm-row

src/pug/views/base/carousel.pug

@@ -173,7 +173,7 @@ block view
         .card-body
           p.text-medium-emphasis.small
             | Change the alignment of pagination components with 
-            a(href='/docs/4.0/utilities/flex/') flexbox utilities
+            a(href='https://coreui.io/docs/4.0/docs/4.0/utilities/flex/') flexbox utilities
             | .
           +example()
             nav(aria-label='Page navigation example')