docs: update examples

Author: mrholek

packages/docs/.vuepress/client.ts

@@ -21,6 +21,7 @@ import {
   cilContrast,
   cilHandshake,
   cilInfo,
+  cilLayers,
   cilMenu,
   cilMoon,
   cilOptions,
@@ -49,6 +50,7 @@ export const icons = {
   cilContrast,
   cilHandshake,
   cilInfo,
+  cilLayers,
   cilMenu,
   cilMoon,
   cilOptions,

packages/docs/.vuepress/config.ts

@@ -66,6 +66,16 @@ export default defineUserConfig({
         }
       },
     }),
+    containerPlugin({
+      type: 'demo-bg-secondary',
+      render: function (tokens, idx) {
+        if (tokens[idx].nesting === 1) {
+          return '<div class="docs-example rounded-top p-0 bg-body-secondary overflow-hidden">\n'
+        } else {
+          return '</div>\n'
+        }
+      },
+    }),
     tocPlugin({}),
     registerComponentsPlugin({
       components: {

packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss

@@ -110,6 +110,16 @@
     margin-bottom: 0;
   }
 
+    // Sidebar
+    .sidebar-narrow,
+    .sidebar-narrow-unfoldable {
+      position: static;
+    }
+  
+    .sidebar-narrow-unfoldable {
+      min-height: 550px;
+    }
+
   // Spinners
   > .spinner-grow + .spinner-border,
   > .spinner-border + .spinner-grow,