MainNavBars integrated in addons

This commit is contained in:
nklhrstv 2020-02-25 17:15:10 +02:00
parent 28d55bc68a
commit 83cf5fadb8
3 changed files with 7 additions and 14 deletions

View file

@ -8,7 +8,8 @@ const TABS = [
{ id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
{ id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' },
{ id: 'settings', label: 'Settings', icon: 'ic_settings', href: '#/settings' }
{ id: 'settings', label: 'Settings', icon: 'ic_settings', href: '#/settings' },
{ id: 'addons', label: 'Addons', icon: 'ic_addons', href: '#/addons' }
];
const MainNavBars = React.memo(({ className, route, query, children }) => {

View file

@ -2,7 +2,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const { useRouteFocused } = require('stremio-router');
const Icon = require('stremio-icons/dom');
const { AddonDetailsModal, Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
const { AddonDetailsModal, Button, Multiselect, MainNavBars, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
const Addon = require('./Addon');
const useAddons = require('./useAddons');
const useSelectableInputs = require('./useSelectableInputs');
@ -83,8 +83,7 @@ const Addons = ({ urlParams, queryParams }) => {
clearSharedTransportUrl();
}, [urlParams, queryParams]);
return (
<div className={styles['addons-container']}>
<NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
<MainNavBars className={styles['addons-container']} route={'addons'}>
<div className={styles['addons-content']}>
<div className={styles['selectable-inputs-container']}>
<Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
@ -201,7 +200,7 @@ const Addons = ({ urlParams, queryParams }) => {
:
null
}
</div>
</MainNavBars>
);
};

View file

@ -3,20 +3,13 @@
}
.addons-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: var(--color-background);
.nav-bar {
flex: none;
align-self: stretch;
}
.addons-content {
flex: 1;
align-self: stretch;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;