feat: Application Layouts

[valentingavran]

Feature Description

Every application needs at least one layout and Anglify should make it easy to create these responsive layouts.

If we leave everything up to the user, then the user has the most options with the use of CSS Grids. However, the user has to overcome various challenges, which sound easy, but are harder than expected. One of these challenges is the responsiveness.

Example: Let's assume the user wants to make a Navigation Drawer layout. The drawer should remain open on the left side on desktop devices and intentionally take up screen space and on mobile devices the drawer should appear as a model from the left side when a menu button is pressed.

How do we tackle that?

1. Create layout

<anglify-toolbar [elevation]="5">
  <ng-template slot="navigation">
    <button anglifyButton appearance="icon" (click)="drawer.toggle()">
      <anglify-icon icon="mdi-menu"></anglify-icon>
    </button>
  </ng-template>
</anglify-toolbar>
<anglify-nav-drawer [(ngModel)]="true" mode="standard"></anglify-nav-drawer>
<main>
  <!-- your content here -->
</main>

2. Add responsive layout

:host {
  display: grid;
  height: 100vh;
  grid-template-areas:
    'toolbar'
    'main';

  @include md {
    grid-auto-columns: auto 1fr;
    grid-template-areas:
      'drawer toolbar'
      'drawer main';
    grid-template-rows: auto 1fr;
  }

  anglify-nav-drawer {
    grid-area: drawer;
  }

  anglify-toolbar {
    grid-area: toolbar;
  }

  main {
    grid-area: main;
    overflow-y: auto;
  }
}

Problems

1. How do we tell the navigation drawer to switch from standard mode to modal mode?
2. What if the drawer should also be toggleable on desktop devices? If the user minimizes the window (for mobile mode), then the drawer must always be closed. When the window becomes large again (desktop mode), then the user setting should have been saved, that the drawer was closed on desktop devices.

Use Case

No response

[valentingavran]

@iCrawl I have briefly described the problem here, which I would like to discuss with you tomorrow.

In the featue/application-layouts branch you can see the example under http://localhost:4200/examples/layouts/base