From 7b0b06bf88e3c9f62a7e268bbd87960738764685 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 14 Jun 2018 15:27:42 +0300
Subject: [PATCH] simple tab navigation implemented

---
 src/app/app.js      | 44 ++++++++++++++++++++++++++++++++++----------
 src/app/styles.less | 26 ++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/src/app/app.js b/src/app/app.js
index 5c7155f28..625b23dd9 100644
--- a/src/app/app.js
+++ b/src/app/app.js
@@ -1,21 +1,45 @@
 import React, { Component } from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
-import { Checkbox } from 'stremio-common';
+import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom';
 import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
+const Board = () => <div style={{ backgroundColor: 'pink', paddingTop: 40 }}>You're on the Board Tab</div>;
+const Discover = () => <div style={{ backgroundColor: 'pink', paddingTop: 40 }}>You're on the Discover Tab</div>;
+const Library = () => <div style={{ backgroundColor: 'pink', paddingTop: 40 }}>You're on the Library Tab</div>;
+
 class App extends Component {
     render() {
         return (
             <BrowserRouter>
-                <div>
-                    <Checkbox checked={true} />
-                    <Icon
-                        style={{width: 100, height: 100}}
-                        icon={'ic_pause'}
-                        fill={'yellow'}
-                    />
-                    <Route path={'/home/:message'} component={({ match }) => <span>{match.params.message}</span>} />
+                <div className={styles['app']}>
+                    <div className={styles['nav-bar']}>
+                        <NavLink className={styles['nav-tab']} activeClassName={styles['active']} to={'/'} exact={true} replace={false}>
+                            <Icon
+                                className={styles['nav-tab-icon']}
+                                icon={'ic_board'}
+                            />
+                            Board
+                        </NavLink>
+                        <NavLink className={styles['nav-tab']} activeClassName={styles['active']} to={'/discover'} replace={false}>
+                            <Icon
+                                className={styles['nav-tab-icon']}
+                                icon={'ic_discover'}
+                            />
+                            Discover
+                        </NavLink>
+                        <NavLink className={styles['nav-tab']} activeClassName={styles['active']} to={'/library'} replace={false}>
+                            <Icon
+                                className={styles['nav-tab-icon']}
+                                icon={'ic_library'}
+                            />
+                            Library
+                        </NavLink>
+                    </div>
+                    <Switch>
+                        <Route path={'/'} exact={true} component={Board} />
+                        <Route path={'/discover'} component={Discover} />
+                        <Route path={'/library'} component={Library} />
+                    </Switch>
                 </div>
             </BrowserRouter>
         );
diff --git a/src/app/styles.less b/src/app/styles.less
index df7997cef..1e32fbcf3 100644
--- a/src/app/styles.less
+++ b/src/app/styles.less
@@ -88,3 +88,29 @@ html, body, .app {
     background-color: @colorbgmain;
     font: 13px / 18px 'Open Sans', LatoLight, Arial, Helvetica, sans-serif;
 }
+
+.nav-bar {
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: @colorsecondary;
+    .nav-tab {
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 16px 16px;
+        color: @colorneutral;
+        .nav-tab-icon {
+            fill: @colorneutral;
+            height: 100%; // margin: 10px;
+        }
+        &.active {
+            color: @colorwhite;
+            .nav-tab-icon {
+                fill: @colorwhite;
+            }
+        }
+    }
+}
\ No newline at end of file