Merge branch 'boc'

components/app/app.less

@@ -21,7 +21,7 @@
 
     > .content-component {
       flex: 1 1 0;
-      background-color: #333;
+      background-color: #eee;
     }
   }
 }

components/app/app.tsx

@@ -3,15 +3,39 @@ import {HeaderComponent} from "../header/header";
 import {SidebarComponent} from "../sidebar/sidebar";
 import {ContentComponent} from "../content/content";
 
-export class AppComponent extends React.Component {
+interface Props {
+
+}
+
+interface State {
+    readonly selectedNavigationItem: string;
+}
+
+export class AppComponent extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            selectedNavigationItem: ""
+        };
+    }
+
     render() {
+        const {selectedNavigationItem} = this.state;
+
+        const selectNavigationItem = (navigationItem: string) => {
+            this.setState({
+                selectedNavigationItem: navigationItem
+            });
+        };
+
         return (
             <div className="app-component">
                 <HeaderComponent/>
 
                 <div className="container">
-                    <SidebarComponent/>
-                    <ContentComponent/>
+                    <SidebarComponent selectNavigationItem={selectNavigationItem}/>
+                    <ContentComponent selectedNavigationItem={selectedNavigationItem}/>
                 </div>
             </div>
         );

components/components.less

@@ -1 +1,2 @@
-@import "./app/app";
+@import "./app/app";
+@import "./sidebar/sidebar";

components/content/content.tsx

@@ -1,7 +1,24 @@
 import * as React from "react";
 
-export class ContentComponent extends React.Component {
+interface Props {
+    readonly selectedNavigationItem: string;
+}
+
+export class ContentComponent extends React.Component<Props> {
     render() {
-        return <div className="content-component"></div>;
+        return (
+            <div className="content-component">
+                {this.renderContent(this.props.selectedNavigationItem)}
+            </div>
+        );
     }
+
+    private renderContent = (navigationItem: string) => {
+        switch (navigationItem) {
+            case "Übersicht":
+                return <div>Übersicht</div>;
+            default:
+                return <div>Alles andere</div>;
+        }
+    };
 }

components/sidebar/sidebar.less

@@ -0,0 +1,7 @@
+.sidebar-component {
+  button {
+    display: block;
+    margin-top: 10px;
+    background-color: transparent;
+  }
+}

components/sidebar/sidebar.tsx

@@ -1,7 +1,27 @@
 import * as React from "react";
 
-export class SidebarComponent extends React.Component {
+interface Props {
+    readonly selectNavigationItem: (navigationItem: string) => void;
+}
+
+interface State {
+
+}
+
+export class SidebarComponent extends React.Component<Props, State> {
     render() {
-        return <aside className="sidebar-component"></aside>;
+        const selectNavigationItem = this.props.selectNavigationItem;
+
+        return (
+            <aside className="sidebar-component">
+                {navigationItems.map(navigationItem =>
+                    <button key={navigationItem}
+                            onClick={() => selectNavigationItem(navigationItem)}>{navigationItem}</button>)}
+            </aside>
+        );
     }
-}
+}
+
+const navigationItems = [
+    "Übersicht", "Disposition", "Meldungen"
+];