feat: add triangle icon for expandable menu items

Redocly · May 5, 2017 · e7130d2 · e7130d2
1 parent 583c571
commit e7130d2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/lib/components/SideMenu/side-menu-items.html b/lib/components/SideMenu/side-menu-items.html
@@ -3,6 +3,9 @@
   <label class="menu-item-header" [ngClass]="{disabled: !item.ready}" (click)="activateItem(item)">
     <span class="operation-type" [ngClass]="item?.metadata?.operation" *ngIf="item?.metadata?.operation"> {{item?.metadata?.operation}} </span><!--
  --><span class="menu-item-title">{{item.name}}</span>
+   <svg *ngIf="item.items?.length" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
+     <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
+   </svg>
   </label>
   <ul *ngIf="item.items" class="menu-subitems" [@itemAnimation]="(item.active || item.isGroup) ? 'expanded' : 'collapsed'">
     <side-menu-items [items]="item.items" (activate)="activateItem($event)"> </side-menu-items>

diff --git a/lib/components/SideMenu/side-menu-items.scss b/lib/components/SideMenu/side-menu-items.scss
@@ -20,6 +20,25 @@
     cursor: default;
     color: lighten($text-color, 60%);
   }
+
+  display: flex;
+  justify-content: space-between;
+
+  > svg {
+    height: 18px;
+    vertical-align: middle;
+    float: right;
+    transform: rotateZ(-90deg);
+    //transition: transform 0.3s ease-out;
+
+    polygon {
+      fill: $border-color;
+    }
+
+    .active > & {
+      transform: rotateZ(0);
+    }
+  }
 }
 
 .menu-item {
@@ -98,6 +117,10 @@
     font-size: 0.8em;
     padding-bottom: 0;
     cursor: default;
+
+    > svg {
+      display: none;
+    }
   }
   &:hover,
   &.active {