refactor: update views

Author: mrholek

src/pug/_mixins/example.pug

@@ -1,7 +1,7 @@
 mixin example(url)
 
   .example
-    ul.nav.nav-tabs(role="tablist")
+    ul.nav.nav-underline-border(role="tablist")
       li.nav-item
         a.nav-link.active(data-coreui-toggle="tab" href="#preview-"+count role="tab")
           svg.icon.me-2

src/pug/_partials/sidebar.pug

@@ -112,12 +112,18 @@
       ul.nav-group-items.compact
         li.nav-item
           a.nav-link(href='buttons/buttons.html')
+            span.nav-icon
+              span.nav-icon-bullet
             |  Buttons
         li.nav-item
           a.nav-link(href='buttons/button-group.html')
+            span.nav-icon
+              span.nav-icon-bullet
             |  Buttons Group
         li.nav-item
           a.nav-link(href='buttons/dropdowns.html')
+            span.nav-icon
+              span.nav-icon-bullet
             |  Dropdowns
     li.nav-item
       a.nav-link(href='charts.html')

src/views/base/accordion.html

@@ -98,9 +98,9 @@
               <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cursor"></use>
             </svg> Buttons</a>
           <ul class="nav-group-items compact">
-            <li class="nav-item"><a class="nav-link" href="buttons/buttons.html"> Buttons</a></li>
-            <li class="nav-item"><a class="nav-link" href="buttons/button-group.html"> Buttons Group</a></li>
-            <li class="nav-item"><a class="nav-link" href="buttons/dropdowns.html"> Dropdowns</a></li>
+            <li class="nav-item"><a class="nav-link" href="buttons/buttons.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Buttons</a></li>
+            <li class="nav-item"><a class="nav-link" href="buttons/button-group.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Buttons Group</a></li>
+            <li class="nav-item"><a class="nav-link" href="buttons/dropdowns.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Dropdowns</a></li>
           </ul>
         </li>
         <li class="nav-item"><a class="nav-link" href="charts.html">
@@ -317,7 +317,7 @@
                 <div class="card-body">
                   <p class="text-body-secondary small">Click the accordions below to expand/collapse the accordion content.</p>
                   <div class="example">
-                    <ul class="nav nav-tabs" role="tablist">
+                    <ul class="nav nav-underline-border" role="tablist">
                       <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1000" role="tab">
                           <svg class="icon me-2">
                             <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
@@ -367,7 +367,7 @@ <h2 class="accordion-header" id="headingThree">
                 <div class="card-body">
                   <p class="text-body-secondary small">Add <code>.accordion-flush</code> to remove the default <code>background-color</code>, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>
                   <div class="example">
-                    <ul class="nav nav-tabs" role="tablist">
+                    <ul class="nav nav-underline-border" role="tablist">
                       <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1001" role="tab">
                           <svg class="icon me-2">
                             <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>

src/views/base/breadcrumb.html

@@ -98,9 +98,9 @@
               <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cursor"></use>
             </svg> Buttons</a>
           <ul class="nav-group-items compact">
-            <li class="nav-item"><a class="nav-link" href="buttons/buttons.html"> Buttons</a></li>
-            <li class="nav-item"><a class="nav-link" href="buttons/button-group.html"> Buttons Group</a></li>
-            <li class="nav-item"><a class="nav-link" href="buttons/dropdowns.html"> Dropdowns</a></li>
+            <li class="nav-item"><a class="nav-link" href="buttons/buttons.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Buttons</a></li>
+            <li class="nav-item"><a class="nav-link" href="buttons/button-group.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Buttons Group</a></li>
+            <li class="nav-item"><a class="nav-link" href="buttons/dropdowns.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Dropdowns</a></li>
           </ul>
         </li>
         <li class="nav-item"><a class="nav-link" href="charts.html">
@@ -317,7 +317,7 @@
                 <div class="card-body">
                   <p class="text-body-secondary small">The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"> <code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"> <code>content</code></a>.</p>
                   <div class="example">
-                    <ul class="nav nav-tabs" role="tablist">
+                    <ul class="nav nav-underline-border" role="tablist">
                       <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1000" role="tab">
                           <svg class="icon me-2">
                             <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>