Revize 5b862e59

Re #7263 Created simple menu with a service and mock data

frontend/src/app/app.component.html

@@ -8 +8 @@
   </div>
   <div class="row content">
     <div class="col-lg-2 navigation">
-      <nav class="navbar">
-        <ul class="navbar-nav">
-          <li *ngFor="let item of menuItems; let i = index" class="nav-item selected">
-            <a href="#">{{i}} {{item}}</a>
-          </li>
-        </ul>
-      </nav>
+      <app-menu></app-menu>
     </div>
     <div class="col-lg-7">seamless</div>
     <div class="col-lg-3">mas</div>

frontend/src/app/app.component.sass

@@ -32 +32 @@
   background-color: #2F313F
   margin: 0
   padding: 0
-
-
-.navbar
-  width: 100%
-  margin: 0
-  padding: 0
-
-.navbar-nav
-  width: 100%
-
-.nav-bar
-  width: 100%
-
-.nav-item
-  height: 50px
-  line-height: 50px
-  width: 100%
-  padding-left: 20px
-  color: #404353
-  background-color: #2F313F
-  border-style: solid
-  border-width: 0 0 1px 0
-  border-color: #6D6F81
-
-  &:hover
-    background-color: #414356
-
-  a
-    color: #6D6F81
-    width: 100%
-    height: 100%
-
-
-.nav-item.selected
-  background-color: #63AA22
-
-  a
-    color: white
-
-  &:hover
-    background-color: #7ad129
-

frontend/src/app/app.module.ts

@@ -4 +4 @@
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import {HttpClientModule} from '@angular/common/http';
+import { MenuComponent } from './menu/menu.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MenuComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/menu.service.ts

@@ +1 @@
+import { Injectable } from '@angular/core';
+import { MenuItem } from './menu/menuItem';
+import { Observable, of } from 'rxjs';
+import { MENU_ITEMS } from './mock-menu-items';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MenuService {
+
+  getMenuItems(): Observable<MenuItem[]> {
+    return of(MENU_ITEMS);
+  }
+
+  constructor() { }
+}

frontend/src/app/menu/menu.component.html

@@ +1 @@
+<div class="navigation">
+  <nav class="navbar">
+    <ul class="navbar-nav">
+      <li *ngFor="let item of menuItems; let i = index" class="nav-item selected">
+        <a href="#">{{item.name}}</a>
+      </li>
+    </ul>
+  </nav>
+</div>

frontend/src/app/menu/menu.component.sass

@@ +1 @@
+.navbar
+  width: 100%
+  margin: 0
+  padding: 0
+
+.navbar-nav
+  width: 100%
+
+.nav-bar
+  width: 100%
+
+.nav-item
+  height: 50px
+  line-height: 50px
+  width: 100%
+  padding-left: 20px
+  color: #404353
+  background-color: #2F313F
+  border-style: solid
+  border-width: 0 0 1px 0
+  border-color: #6D6F81
+
+  &:hover
+    background-color: #414356
+
+  a
+    color: #6D6F81
+    width: 100%
+    height: 100%
+
+
+.nav-item.selected
+  background-color: #63AA22
+
+  a
+    color: white
+
+  &:hover
+    background-color: #7ad129

frontend/src/app/menu/menu.component.ts

@@ +1 @@
+import { Component, OnInit } from '@angular/core';
+import { MenuService } from '../menu.service';
+import { MenuItem } from './menuItem';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.sass']
+})
+export class MenuComponent implements OnInit {
+  menuItems: MenuItem[];
+
+
+  getMenuItems(): void {
+    this.menuService.getMenuItems()
+      .subscribe(menuItems => this.menuItems = menuItems);
+  }
+
+  constructor(private menuService: MenuService) { }
+
+  ngOnInit() {
+    this.getMenuItems();
+  }
+
+
+}

frontend/src/app/menu/menuItem.ts

@@ +1 @@
+export class MenuItem {
+  name: string;
+}

frontend/src/app/mock-menu-items.ts

@@ +1 @@
+import { MenuItem } from './menu/menuItem';
+
+export const MENU_ITEMS: MenuItem[] = [
+  {name: 'Dashboard'},
+  {name: 'Zamestnanci'},
+];