ohayolibs/src/app/routes/dev/layout.component.html

Ohayo is a set of essential modules for ohayojp.

<div class="ohayo-default__header">
  <div class="ohayo-default__header-logo">
    <a [routerLink]="['/dev']" class="ohayo-default__header-logo-link">
      <img class="ohayo-default__header-logo-expanded" src="./assets/img/logo-full.svg" alt="{{ settings.app.name }}"
        style="max-height: 40px;" />
      <img class="ohayo-default__header-logo-collapsed" src="./assets/img/logo.svg" alt="{{ settings.app.name }}"
        style="max-height: 30px;" />
    </a>
  </div>
  <div class="ohayo-default__nav-wrap">
    <ul class="ohayo-default__nav">
      <li>
        <div class="ohayo-default__nav-item" (click)="toggleCollapsedSideabar()">
          <i nz-icon nzType="menu-{{ settings.layout.collapsed ? 'unfold' : 'fold' }}"></i>
        </div>
      </li>
      <li>
        <div class="ohayo-default__nav-item" (click)="toggleLang()">
          {{ lang }}
        </div>
      </li>
    </ul>
  </div>
</div>
<div class="ohayo-default__aside">
  <div class="ohayo-default__aside-inner">
    <div nz-dropdown nzTrigger="click" [nzDropdownMenu]="userMenu" class="ohayo-default__aside-user">
      <nz-avatar class="ohayo-default__aside-user-avatar" [nzSize]="'large'" nzIcon="user"></nz-avatar>
      <div class="ohayo-default__aside-user-info">
        <strong>{{ settings.user.name }}</strong>
        <p class="text-truncate mb0">{{ settings.user.email }}</p>
      </div>
    </div>
    <nz-dropdown-menu #userMenu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item (click)="msgSrv.success('profile')">{{ 'profile' | translate }}</li>
        <li nz-menu-item (click)="msgSrv.success('settings')">{{ 'settings' | translate }}</li>
        <li nz-menu-item (click)="msgSrv.success('logout')">{{ 'logout' | translate }}</li>
      </ul>
    </nz-dropdown-menu>
    <sidebar-nav class="d-block py-lg"></sidebar-nav>
  </div>
</div>
<section class="ohayo-default__content">
  <reuse-tab [mode]="2" [customContextMenu]="customContextMenu" #reuseTab></reuse-tab>
  <router-outlet (activate)="reuseTab.activate($event)"></router-outlet>
</section>