layout is added

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "Angular.ng-template",
+    "msjsdiag.debugger-for-chrome",
+    "eamodio.gitlens",
+    "esbenp.prettier-vscode",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "VisualStudioExptTeam.vscodeintellicode",
+    "nkokhelox.svg-font-previewer"
+  ]
+}

.vscode/settings.json

@@ -7,7 +7,8 @@
   "editor.trimAutoWhitespace": true,
   "files.trimTrailingWhitespace": true,
   "files.trimFinalNewlines": true,
-  "git.ignoreLimitWarning": true,
-  "prettier.singleQuote": true,
+  "files.watcherExclude": {
+    "**/dist/electron/win-unpacked/**": true
+  },
   "debug.node.autoAttach": "on"
 }

projects/@app/src/app/app-routing.module.ts

@@ -5,6 +5,12 @@ import { LayoutsModule } from '@app/layouts/layouts.module';
 import { DefaultLayoutComponent } from '@app/layouts/components/default.layout.component';
 
 const routes: Routes = [
+  {
+    path: '',
+    component: DefaultLayoutComponent,
+    loadChildren: () =>
+      import('./pages/main/main.page.module').then(m => m.MainPageModule)
+  },
   {
     path: 'user',
     component: DefaultLayoutComponent,

projects/@app/src/app/layouts/components/default.layout.component.html

@@ -1 +1,44 @@
-<router-outlet></router-outlet>
+<div fxLayout="column" fxFlexFill>
+  <div class="app-layout-default-top" fxFlex="50px">TOP</div>
+  <div class="app-layout-default-body" fxFlexFill>
+    <div class="app-layout-default-body-left">
+      <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+        <!-- This is the tree node template for leaf nodes -->
+        <mat-tree-node
+          *matTreeNodeDef="let node"
+          matTreeNodePadding
+          matTreeNodePaddingIndent="5"
+        >
+          <!-- use a disabled button to provide padding for tree leaf -->
+          <button mat-icon-button disabled></button>
+          {{ node.name }}
+        </mat-tree-node>
+        <!-- This is the tree node template for expandable nodes -->
+        <mat-tree-node
+          *matTreeNodeDef="let node; when: hasChild"
+          matTreeNodePadding
+          matTreeNodePaddingIndent="5"
+        >
+          <button
+            mat-icon-button
+            matTreeNodeToggle
+            [attr.aria-label]="'toggle ' + node.name"
+          >
+            <span
+              class="mdi"
+              [class.mdi-chevron-down]="treeControl.isExpanded(node)"
+              [class.mdi-chevron-right]="!treeControl.isExpanded(node)"
+            ></span>
+          </button>
+          {{ node.name }}
+        </mat-tree-node>
+      </mat-tree>
+    </div>
+    <div class="app-layout-default-body-content" fxFlex>
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+  <div class="app-layout-default-bottom" fxFlex="50px" fxLayoutGap="20px">
+    Bottom
+  </div>
+</div>

projects/@app/src/app/layouts/components/default.layout.component.scss

@@ -0,0 +1,21 @@
+.app-layout-default-top {
+  width: 100%;
+}
+
+.app-layout-default-body {
+  width: 100%;
+
+  .app-layout-default-body-left {
+    width: 200px;
+    height: 100%;
+  }
+  .app-layout-default-body-content {
+    width: calc(100% - 200px);
+    height: 100%;
+  }
+}
+
+.app-layout-default-bottom {
+  width: 100%;
+  bottom: 0px;
+}

projects/@app/src/app/layouts/components/default.layout.component.ts

@@ -1,4 +1,38 @@
 import { Component } from '@angular/core';
+import { FlatTreeControl } from '@angular/cdk/tree';
+import {
+  MatTreeFlattener,
+  MatTreeFlatDataSource
+} from '@angular/material/tree';
+
+interface NavigationNode {
+  name: string;
+  children?: NavigationNode[];
+}
+
+interface NavigationFlatNode {
+  expandable: boolean;
+  name: string;
+  level: number;
+}
+
+const TREE_DATA: NavigationNode[] = [
+  {
+    name: 'Fruit',
+    children: [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Fruit loops' }]
+  },
+  {
+    name: 'Vegetables',
+    children: [
+      {
+        name: 'Green'
+      },
+      {
+        name: 'Orange'
+      }
+    ]
+  }
+];
 
 @Component({
   selector: 'app-layouts-default',
@@ -6,5 +40,39 @@ import { Component } from '@angular/core';
   styleUrls: ['./default.layout.component.scss']
 })
 export class DefaultLayoutComponent {
-  constructor() {}
+  treeControl: FlatTreeControl<NavigationFlatNode>;
+  treeFlattener: MatTreeFlattener<NavigationNode, NavigationFlatNode>;
+  dataSource: MatTreeFlatDataSource<NavigationNode, NavigationFlatNode>;
+
+  constructor() {
+    this.treeControl = new FlatTreeControl<NavigationFlatNode>(
+      node => node.level,
+      node => node.expandable
+    );
+
+    this.treeFlattener = new MatTreeFlattener<
+      NavigationNode,
+      NavigationFlatNode
+    >(
+      (node: NavigationNode, level: number) => {
+        return {
+          expandable: !!node.children && 0 < node.children.length,
+          name: node.name,
+          level
+        };
+      },
+      node => node.level,
+      node => node.expandable,
+      node => node.children
+    );
+
+    this.dataSource = new MatTreeFlatDataSource(
+      this.treeControl,
+      this.treeFlattener
+    );
+
+    this.dataSource.data = TREE_DATA;
+  }
+
+  hasChild = (_: number, node: NavigationFlatNode) => node.expandable;
 }

projects/@app/src/app/layouts/layouts.module.ts

@@ -2,10 +2,25 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTreeModule } from '@angular/material/tree';
+
 import { COMPONENTS } from './components';
 
 @NgModule({
-  imports: [CommonModule, RouterModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+
+    FlexLayoutModule,
+
+    MatButtonModule,
+    MatIconModule,
+    MatTreeModule
+  ],
   declarations: [...COMPONENTS]
 })
 export class LayoutsModule {}

projects/@app/src/app/pages/main/components/index.ts

@@ -0,0 +1,3 @@
+import { MainIndexPageComponent } from './main-index.page.component';
+
+export const COMPONENTS = [MainIndexPageComponent];

projects/@app/src/app/pages/main/components/main-index.page.component.html

@@ -0,0 +1 @@
+main index

projects/@app/src/app/pages/main/components/main-index.page.component.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { MainIndexPageComponent } from './main-index.page.component';
+
+describe('MainIndexPageComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [MainIndexPageComponent]
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(MainIndexPageComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'backend'`, () => {
+    const fixture = TestBed.createComponent(MainIndexPageComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('backend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(MainIndexPageComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'backend app is running!'
+    );
+  });
+});

projects/@app/src/app/pages/main/components/main-index.page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-pages-main-index',
+  templateUrl: './main-index.page.component.html',
+  styleUrls: ['./main-index.page.component.scss']
+})
+export class MainIndexPageComponent {
+  constructor() {}
+}

projects/@app/src/app/pages/main/main-routing.page.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MainIndexPageComponent } from './components/main-index.page.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'index' },
+  { path: 'index', component: MainIndexPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MainRoutingPageModule {}

projects/@app/src/app/pages/main/main.page.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MainRoutingPageModule } from './main-routing.page.module';
+
+import { MainSectionModule } from '@app/sections/main/main.section.module';
+
+import { COMPONENTS } from './components';
+
+@NgModule({
+  imports: [CommonModule, MainSectionModule, MainRoutingPageModule],
+  declarations: [...COMPONENTS]
+})
+export class MainPageModule {}

projects/@app/src/app/sections/main/components/index.ts

@@ -0,0 +1 @@
+export const COMPONENTS = [];

projects/@app/src/app/sections/main/main.section.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { COMPONENTS } from './components';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [...COMPONENTS]
+})
+export class MainSectionModule {}

projects/@app/src/assets/fonts/materialdesignicons/scss/_animated.scss

@@ -0,0 +1,27 @@
+// From Font Awesome
+.#{$mdi-css-prefix}-spin:before {
+  -webkit-animation: #{$mdi-css-prefix}-spin 2s infinite linear;
+  animation: #{$mdi-css-prefix}-spin 2s infinite linear;
+}
+
+@-webkit-keyframes #{$mdi-css-prefix}-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes #{$mdi-css-prefix}-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

projects/@app/src/assets/fonts/materialdesignicons/scss/_core.scss

@@ -0,0 +1,10 @@
+.#{$mdi-css-prefix}:before,
+.#{$mdi-css-prefix}-set {
+  display: inline-block;
+  font: normal normal normal #{$mdi-font-size-base}/ 1 '#{$mdi-font-name}'; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

projects/@app/src/assets/fonts/materialdesignicons/scss/_extras.scss

@@ -0,0 +1,65 @@
+$mdi-sizes: 18 24 36 48;
+@each $mdi-size in $mdi-sizes {
+  .#{$mdi-css-prefix}-#{$mdi-size}px {
+    &.#{$mdi-css-prefix}-set,
+    &.#{$mdi-css-prefix}:before {
+      font-size: $mdi-size * 1px;
+    }
+  }
+}
+
+.#{$mdi-css-prefix}-dark {
+  &:before {
+    color: rgba(0, 0, 0, 0.54);
+  }
+  &.#{$mdi-css-prefix}-inactive:before {
+    color: rgba(0, 0, 0, 0.26);
+  }
+}
+.#{$mdi-css-prefix}-light {
+  &:before {
+    color: rgba(255, 255, 255, 1);
+  }
+  &.#{$mdi-css-prefix}-inactive:before {
+    color: rgba(255, 255, 255, 0.3);
+  }
+}
+
+$mdi-degrees: 45 90 135 180 225 270 315;
+@each $mdi-degree in $mdi-degrees {
+  .#{$mdi-css-prefix}-rotate-#{$mdi-degree} {
+    &:before {
+      -webkit-transform: rotate(#{$mdi-degree}deg);
+      -ms-transform: rotate(#{$mdi-degree}deg);
+      transform: rotate(#{$mdi-degree}deg);
+    }
+    /*
+        // Not included in production
+        &.#{$mdi-css-prefix}-flip-h:before {
+            -webkit-transform: scaleX(-1) rotate(#{$mdi-degree}deg);
+            transform: scaleX(-1) rotate(#{$mdi-degree}deg);
+            filter: FlipH;
+            -ms-filter: "FlipH";
+        }
+        &.#{$mdi-css-prefix}-flip-v:before {
+            -webkit-transform: scaleY(-1) rotate(#{$mdi-degree}deg);
+            -ms-transform: rotate(#{$mdi-degree}deg);
+            transform: scaleY(-1) rotate(#{$mdi-degree}deg);
+            filter: FlipV;
+            -ms-filter: "FlipV";
+        }
+        */
+  }
+}
+.#{$mdi-css-prefix}-flip-h:before {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+  filter: FlipH;
+  -ms-filter: 'FlipH';
+}
+.#{$mdi-css-prefix}-flip-v:before {
+  -webkit-transform: scaleY(-1);
+  transform: scaleY(-1);
+  filter: FlipV;
+  -ms-filter: 'FlipV';
+}

projects/@app/src/assets/fonts/materialdesignicons/scss/_functions.scss

@@ -0,0 +1,19 @@
+@function char($character-code) {
+  @if function-exists('selector-append') {
+    @return unquote('"\\#{$character-code}"');
+  }
+
+  @if "\\#{'x'}"== '\\x' {
+    @return str-slice('\x', 1, 1) + $character-code;
+  } @else {
+    @return #{'"\\'}#{$character-code + '"'};
+  }
+}
+
+@function mdi($name) {
+  @if map-has-key($mdi-icons, $name) == false {
+    @warn "Icon #{$name} not found.";
+    @return '';
+  }
+  @return char(map-get($mdi-icons, $name));
+}

projects/@app/src/assets/fonts/materialdesignicons/scss/_icons.scss

@@ -0,0 +1,10 @@
+@each $key, $value in $mdi-icons {
+  .#{$mdi-css-prefix}-#{$key}::before {
+    content: char($value);
+  }
+}
+
+.#{$mdi-css-prefix}-blank::before {
+  content: '\F68C';
+  visibility: hidden;
+}

projects/@app/src/assets/fonts/materialdesignicons/scss/_path.scss

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: '#{$mdi-font-name}';
+  src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot?v=#{$mdi-version}');
+  src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot?#iefix&v=#{$mdi-version}')
+      format('embedded-opentype'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff2?v=#{$mdi-version}')
+      format('woff2'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff?v=#{$mdi-version}')
+      format('woff'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.ttf?v=#{$mdi-version}')
+      format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

projects/@app/src/assets/fonts/materialdesignicons/scss/materialdesignicons.scss

@@ -0,0 +1,8 @@
+/* MaterialDesignIcons.com */
+@import 'variables';
+@import 'functions';
+@import 'path';
+@import 'core';
+@import 'icons';
+@import 'extras';
+@import 'animated';

projects/@app/src/styles.scss

@@ -2,4 +2,25 @@
 // Material theming tools
 @import '~@angular/material/theming';
 
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$app-primary: mat-palette($mat-indigo);
+$app-accent: mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$app-warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($app-theme);
+
+@import 'assets/fonts/materialdesignicons/scss/materialdesignicons';
+
 @import '~@totopia-scss/ui/theming';