fix(demo): fix left sidebar is not fully visible on small screens (#3780

)

- Changed buttons for bootstrap versions to prevent height changes on small screens

Closes #3383

demo/src/app/common/sidebar/sidebar.component.html

@@ -9,8 +9,9 @@
 </form>
 <div class="mobile-menu">
   <div class="bootstrap-version">
-    <button class="btn" [class.selected]="isBs3" (click)="installTheme('bs3')">Bootstrap 3</button>
-    <button class="btn" [class.selected]="!isBs3" (click)="installTheme('bs4')">Bootstrap 4</button>
+    <span>Bootstrap: </span>
+    <button class="btn" [class.selected]="isBs3" (click)="installTheme('bs3')">3</button>
+    <button class="btn" [class.selected]="!isBs3" (click)="installTheme('bs4')">4</button>
   </div>
   <div class="sidebar-content" *ngIf="routes && routes.length">
     <ul class="sidebar-list">
@@ -27,6 +28,11 @@ <h4 class="sidebar-title">Components</h4>
           [routerLinkActiveOptions]="{exact: true}">
         <a routerLink="/{{route.path}}">{{route.data[0]}}</a>
       </li>
+      <li *ngFor="let route of routes | slice:2 | SearchFilter:search.text"
+          [routerLinkActive]="['active']"
+          [routerLinkActiveOptions]="{exact: true}">
+        <a routerLink="/{{route.path}}">{{route.data[0]}}</a>
+      </li>
     </ul>
   </div>
 </div>

demo/src/assets/css/style.scss

@@ -223,10 +223,14 @@ a:hover {
     padding: 15px 19px 10px 20px;
     display: flex;
     flex-flow: row wrap;
+    align-items: center;
     border-bottom: 1px solid #dadada;
 
+    span {
+      margin-right: 4px;
+    }
+
     .btn {
-      margin-bottom: 5px;
       cursor: pointer;
       text-align: center;
       white-space: nowrap;
@@ -240,11 +244,13 @@ a:hover {
       padding: 6px 8px;
       font-size: 0.8125rem;
       line-height: 1.25;
-      border-radius: .25rem;
       transition: all .15s ease-in-out;
 
-      &:first-child {
-        margin-right: 6px;
+      &:first-of-type {
+        border-radius: .25rem 0 0 .25rem;
+      }
+      &:last-of-type {
+        border-radius: 0 .25rem .25rem 0;
       }
 
       &.selected {