Dodat navbar sa leve strane. Odradjen dizajn. Dodat poziv test funkcije po promeni steppera.

3 files changed, 78 insertions, 3 deletions

diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index e69de29b..4b16b450 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -0,0 +1,36 @@
+ul{
+    list-style: none;
+}
+.navmenu{
+    position: absolute;
+    background-color: var(--ns-bg-dark-50);
+    height: 100%;
+}
+.navmenuwrapper{
+    position: relative;
+    top:40%;
+    transform: translateY(-50%);
+}
+
+
+mat-stepper{
+    background-color: transparent;
+}
+
+::ng-deep .mat-step-header .mat-step-icon .mat-step-content{
+    background-color: white;
+    color:var(--ns-primary); 
+  }
+::ng-deep .mat-step-header .mat-step-icon{
+    color:white;
+}
+::ng-deep .mat-step-header .mat-step-icon-state-done{
+    background: var(--ns-primary);
+    color:var(--ns-primary)
+}
+::ng-deep .mat-step-header .mat-step-icon-state-done .label{
+    color:var(--ns-primary)
+}
+.label{
+    color: white;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 7f4e14ec..e0746d4a 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,2 +1,37 @@
-<p>experiment works!</p>
-<app-folder></app-folder>
\ No newline at end of file
+<app-folder></app-folder>
+<div class="wrapper">   
+    
+    <nav class="navmenu">
+        <div class="navmenuwrapper text-offwhite">
+          <mat-stepper orientation="vertical" (selectionChange)="test($event)">
+            <mat-step>
+              <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
+              <ng-template matStepContent>
+                <p>Izaberite vas izvor podataka</p>
+              </ng-template>
+            </mat-step>
+            <mat-step>
+              <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template>
+              <ng-template matStepContent>
+                <p>Pripremite podatke i izaberite izlazne kolone</p>
+              </ng-template>
+            </mat-step>
+            <mat-step >
+              <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
+              <p>Odaberite parametre i trenirajte model</p>
+            </mat-step>
+          </mat-stepper>
+        </div>
+
+          
+
+    </nav>
+    
+    
+
+    
+
+</div>
+
+
+
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 16de7351..f06a7c48 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import { StepperSelectionEvent } from '@angular/cdk/stepper';
 @Component({
   selector: 'app-experiment',
   templateUrl: './experiment.component.html',
@@ -12,4 +12,8 @@ export class ExperimentComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  test(event:StepperSelectionEvent){
+    console.log(event);
+  }
+
 }