import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-layout',
  template: `
    <div class="my-layout">

      <div class="my-sider shadow-sm" [style.width.px]="isCollapse ? 64 : 236" >
        <div class="my-sider-inner" >
          sider
          <admin-menu [isCollapsed]="isCollapse"></admin-menu>
        </div>
      </div>

      <div class="my-content" >
        <div class="my-header" >
          <button class="btn" (click)="isCollapse = !isCollapse">Toggle</button>
          my header
        </div>
        <div class="my-main-content">
          <router-outlet></router-outlet>
        </div>

      </div>

    </div>
  `,
  styles: [
    `
    .my-layout{
      display:flex;
      flex-direction : row;
      align-items: stretch;
    }

    .my-sider{
      position:relative;
      width:64px;
      transition: width 200ms ease-out, height 200ms ease-out;
    }

    .my-sider-inner{
      position:sticky;
      height:100vh;
      width:100%;
      top:0;
      left:0;
      background-color:white;
    }

    .my-content{
      flex: 1;
      display:flex;
      flex-direction:column;
    }

    .my-header{
      display:flex;
      flex-direction : row;
      align-items: center;
      height:64px;
      background-color:gray;
      position:sticky;
      top:0;
      left:0;
      z-index:1000;
    }

    .my-main-content{
      padding:20px;
    }

    `
  ]
})
export class MyLayoutComponent implements OnInit {

  constructor() { }
  isCollapse: boolean = true;

  toggle() {

  }

  ngOnInit(): void {
  }

}