D-Net

<aside id="sidebar_main">

  <div *ngIf="stakeholder" class="sidebar_main_header">

    <div class="uk-padding-small">

      <img class="uk-margin-bottom" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">

      <div class="uk-text-bold">{{stakeholder.index_name}}</div>

      <div>Admin Dashboard</div>

    </div>

  </div>

  <div *ngIf="stakeholder" class="menu_section">

    <ul>

      <li [class.current_section]="analysisOpen"

          [class.act_section]="analysisOpen"

          title="Analysis Indicators"

          class="submenu_trigger">

        <a [routerLink]="" (click)="analysisOpen = !analysisOpen">

          <span class="menu_icon"><i class="material-icons">donut_large</i></span>

          <span class="menu_title">Analysis Indicators</span>

        </a>

        <ul [style.display]="(analysisOpen?'block':'none')">

          <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">

            <li>

              <a [routerLink]="topic.alias">

                <span *ngIf="topic.icon" class="menu_icon uk-margin-small-right"><i

                  class="material-icons">{{topic.icon}}</i></span>

                <span class="menu_title">{{topic.name}}</span>

              </a>

            </li>

          </ng-template>

          <li>

            <a [routerLink]="" (click)="newTopicOpen()">

              <span class="menu_icon"><i class="material-icons">add</i></span>

              <span class="menu_title">Create new Topic</span>

            </a>

            <div uk-drop="mode: click; offset: -2; delay-hide: 0" #newTopic

                 class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">

              <div *ngIf="topic">

                <div class="md-card">

                  <div class="md-card-content uk-position-relative">

                    <a [routerLink]="" class="uk-position-top-right">

                      <i (click)="hide(newTopic)" class="material-icons">close</i>

                    </a>

                    <div class="uk-grid-small" uk-grid>

                      <div class="uk-width-1-1">

                        <label class="uk-text-bold">New Topic</label>

                        <input class="uk-input uk-form-small" [(ngModel)]="topic.name"

                               [class.uk-form-danger]="!valid" type="text">

                      </div>

                      <div class="uk-width-1-2">

                        <select class="uk-select uk-form-small" [(ngModel)]="topic.isPublic">

                          <option [value]="true">Public</option>

                          <option [value]="false">Private</option>

                        </select>

                      </div>

                      <div class="uk-width-1-2">

                        <select class="uk-select uk-form-small"  [(ngModel)]="topic.isActive">

                          <option [value]="true">Active</option>

                          <option [value]="false">Inactive</option>

                        </select>

                      </div>

                    </div>

                    <hr>

                    <div class="uk-grid-small uk-child-width-1-2" uk-grid>

                      <div>

                        <button class="md-btn md-btn-small" (click)="hide(newTopic)">Cancel</button>

                      </div>

                      <div>

                        <button class="md-btn md-btn-small md-btn-primary uk-float-right" (click)="createTopic(newTopic)">Create</button>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>

          </li>

        </ul>

      </li>

    </ul>

  </div>

</aside>

<div id="page_content" click-outside-or-esc targetId="page_content" (clickOutside)="toggleOpen($event)">

  <div id="page_content_inner">

    <h4 class="uk-text-bold">

      Customise your Monitor Dashboard!

    </h4>

    <div class="uk-text-large uk-margin-bottom">

      <div>

        Modify or add new topics, categories and content.<br><br>

        Start your navigation through the <span class="md-color-blue-700">left side menu!</span>

      </div>

      <div class="uk-margin-small-top uk-margin-small-bottom uk-margin-large-left">

        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="88" viewBox="0 0 30 88">

          <g id="Group_749" data-name="Group 749" transform="translate(-872.168 -490.5)">

            <text class="fill_text" id="OR" transform="translate(872.168 540.271)" font-size="18"

                  font-family="OpenSans-Bold, Open Sans" font-weight="900" opacity="0.8">

              <tspan x="0" y="0">OR</tspan>

            </text>

            <line class="stroke_line" id="Line_225" data-name="Line 225" y2="30" transform="translate(885.5 490.5)"

                  fill="none" stroke="#000" stroke-width="1" opacity="0.2"/>

            <line class="stroke_line" id="Line_226" data-name="Line 226" y2="30" transform="translate(885.5 548.5)"

                  fill="none" stroke="#000" stroke-width="1" opacity="0.2"/>

          </g>

        </svg>

      </div>

      <div class="uk-width-1-1">

        Select one of the <span class="md-color-blue-700">topics below</span>!

      </div>

    </div>

    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-medium" uk-grid uk-height-match="target: .target">

      <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>

        <div>

          <a [routerLink]="topic.alias">

            <div class="md-card target">

              <div class="md-card-content">

                <h6 class="uk-text-bold">{{topic.name}}</h6>

                <div class="uk-text-secondary">

                  {{topic.description}}

                </div>

              </div>

            </div>

          </a>

        </div>

      </ng-template>

    </div>

  </div>

</div>