feat: initial develop page

src/app/app-routing.module.ts

@@ -2,7 +2,12 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: 'develop',
+    loadChildren: () => import('./pages/develop/develop.module').then(m => m.DevelopModule)
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/pages/develop/develop-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DevelopComponent } from './develop.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DevelopComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DevelopRoutingModule { }

src/app/pages/develop/develop.component.html

@@ -0,0 +1,29 @@
+<h2>Toolbar properties</h2>
+<h3>Actions</h3>
+<button mat-button (click)="toolbar.toggleIsSelectionMode()">Toggle selection mode</button>
+<button mat-button (click)="toolbar.clearActionItems()">Clear action items</button>
+<button mat-button color="warn" (click)="resetActionItems()">Reset to default action items</button>
+<h4>Add action items</h4>
+<form [formGroup]="addActionItemForm" fxLayout="column">
+  <mat-form-field>
+    <mat-label>Title</mat-label>
+    <input matInput formControlName="title">
+    <mat-error>This is required.</mat-error>
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Icon</mat-label>
+    <input matInput formControlName="icon">
+  </mat-form-field>
+  <mat-checkbox formControlName="isOverflow">Mark as overflow action item</mat-checkbox>
+  <div class="form-actions">
+    <span fxFlex></span>
+    <button mat-button color="warn" (click)="addActionItemForm.reset()">Reset</button>
+    <button mat-raised-button color="primary" (click)="addActionItem()" [disabled]="addActionItemForm.invalid">Add action item</button>
+  </div>
+</form>
+<br>
+<h3>Info</h3>
+<p>Is selection mode? {{ toolbar.isSelectionMode$ | async }}</p>
+<p>Menu icon: {{ toolbar.menuIcon$ | async }}</p>
+<p>Menu title: {{ toolbar.menuTitle$ | async }}</p>
+<p>Action items:</p> <pre><code>{{ (toolbar.actionItems$ | async) | json }}</code></pre>

src/app/pages/develop/develop.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DevelopComponent } from './develop.component';
+
+describe('DevelopComponent', () => {
+  let component: DevelopComponent;
+  let fixture: ComponentFixture<DevelopComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DevelopComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DevelopComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/develop/develop.component.ts

@@ -0,0 +1,144 @@
+import { Component, OnInit } from '@angular/core';
+import { ToolbarService } from '../../components/toolbar/toolbar.service';
+import { ActionItem } from 'src/app/components/toolbar/models/action-item.model';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-develop',
+  templateUrl: './develop.component.html',
+  styleUrls: ['./develop.component.scss']
+})
+export class DevelopComponent implements OnInit {
+
+  addActionItemForm: FormGroup;
+  defaultActionItems = [
+    {
+      title: 'Text button',
+      onClickListener: item => {
+        this.onActionItemClick(item);
+      }
+    },
+    {
+      icon: 'info',
+      title: 'Icon button',
+      onClickListener: item => {
+        this.onActionItemClick(item);
+      }
+    },
+    {
+      icon: 'edit',
+      title: 'Edit options...',
+      children: [
+        {
+          icon: 'delete',
+          title: 'Delete document',
+          onClickListener: item => {
+            if (confirm('Are you sure you want to delete the document?')) {
+              alert('Document was deleted.');
+            } else {
+              alert('Document was not deleted.');
+            }
+          }
+        },
+        {
+          icon: 'save_alt',
+          title: 'Save document',
+          onClickListener: item => {
+            alert('Successfully saved file!');
+          }
+        },
+        {
+          icon: 'cloud_upload',
+          title: 'Upload document...',
+          onClickListener: item => {
+            alert('(A file chooser dialog would be shown here)');
+          }
+        }
+      ]
+    },
+    {
+      icon: 'extension',
+      title: 'Overflow text button',
+      isOverflow: true,
+      onClickListener: item => {
+        this.onActionItemClick(item);
+      }
+    },
+    {
+      title: 'Overflow text button with submenu',
+      children: [
+        {
+          icon: 'visibility',
+          title: 'Action item 1',
+          onClickListener: item => {
+            this.onActionItemClick(item);
+          }
+        },
+        {
+          icon: 'visibility_off',
+          title: 'Action item 2',
+          onClickListener: item => {
+            this.onActionItemClick(item);
+          }
+        },
+        {
+          title: 'Even more actions',
+          children: [
+            {
+              title: 'Action item 3-1',
+              onClickListener: item => {
+                this.onActionItemClick(item);
+              }
+            },
+            {
+              title: 'Action item 3-2',
+              onClickListener: item => {
+                this.onActionItemClick(item);
+              }
+            },
+            {
+              title: 'Action item 3-3',
+              onClickListener: item => {
+                this.onActionItemClick(item);
+              }
+            }
+          ]
+        }
+      ],
+      isOverflow: true
+    }
+  ];
+
+  constructor(private fb: FormBuilder, public toolbar: ToolbarService) {
+    this.addActionItemForm = fb.group({
+      title: ['', Validators.required],
+      icon: '',
+      isOverflow: false
+    });
+
+    toolbar.addActionItems(this.defaultActionItems);
+  }
+
+  onActionItemClick(item: ActionItem) {
+    alert(`Item with title "${item.title}" clicked!`);
+    console.log('Item clicked with metadata:', item);
+  }
+
+  resetActionItems() {
+    this.toolbar.clearActionItems();
+    this.toolbar.addActionItems(this.defaultActionItems);
+  }
+
+  addActionItem() {
+    const formValue = this.addActionItemForm.value as ActionItem;
+    console.log('Form value:', formValue);
+    this.toolbar.addActionItems([formValue]);
+    // Reset form
+    this.addActionItemForm.reset();
+  }
+
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/develop/develop.module.ts

@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { DevelopRoutingModule } from './develop-routing.module';
+import { DevelopComponent } from './develop.component';
+
+const MATERIAL_MODULES = [
+  MatButtonModule,
+  MatCheckboxModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatSlideToggleModule
+];
+
+@NgModule({
+  declarations: [DevelopComponent],
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MATERIAL_MODULES,
+    DevelopRoutingModule
+  ]
+})
+export class DevelopModule { }

src/styles.scss

@@ -1 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
+
+.app-sidenav {
+  min-width: 200px;
+}
+
+.app-content {
+  margin: 5%;
+}