Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

simple tab navigation implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-06-14 15:27:42 +03:00
parent 9cf0ff20e8
commit 7b0b06bf88
2 changed files with 60 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/app/app.js
View file

@ -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>
);

26
src/app/styles.less
View file

@ -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;
}
}
}
}