NavBar components structure changed

src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -4,11 +4,11 @@ const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
 const Image = require('stremio/common/Image');
-const SearchBar = require('../SearchBar');
-const AddonsButton = require('../AddonsButton');
-const FullscreenButton = require('../FullscreenButton');
-const NotificationsMenu = require('../NotificationsMenu');
-const NavMenu = require('../NavMenu');
+const SearchBar = require('./SearchBar');
+const AddonsButton = require('./AddonsButton');
+const FullscreenButton = require('./FullscreenButton');
+const NotificationsMenu = require('./NotificationsMenu');
+const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 
 const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {

src/common/NavBar/NavBar.js

@@ -1,105 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const NavTabButton = require('./NavTabButton');
-const SearchBar = require('./SearchBar');
-const AddonsButton = require('./AddonsButton');
-const FullscreenButton = require('./FullscreenButton');
-const NotificationsMenu = require('./NotificationsMenu');
-const NavMenu = require('./NavMenu');
-const styles = require('./styles');
-
-const NavBar = React.memo(({ className, route, query, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
-    const backButtonOnClick = React.useCallback(() => {
-        window.history.back();
-    }, []);
-    return (
-        <nav className={classnames(className, styles['nav-bar-container'])}>
-            {
-                backButton ?
-                    <NavTabButton
-                        className={styles['nav-tab-button']}
-                        icon={'ic_back_ios'}
-                        label={'Back'}
-                        onClick={backButtonOnClick}
-                    />
-                    :
-                    null
-            }
-            {
-                Array.isArray(tabs) && tabs.length > 0 ?
-                    tabs.slice(0, 4).map((tab, index) => (
-                        <NavTabButton
-                            key={index}
-                            className={styles['nav-tab-button']}
-                            selected={tab.route === route}
-                            href={tab.href}
-                            icon={tab.icon}
-                            label={tab.label}
-                            onClick={tab.onClick}
-                        />
-                    ))
-                    :
-                    <h2 className={styles['title']}>{title}</h2>
-            }
-            {
-                searchBar ?
-                    <React.Fragment>
-                        <div className={styles['spacing']} />
-                        <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
-                        <div className={styles['spacing']} />
-                    </React.Fragment>
-                    :
-                    null
-            }
-            {
-                addonsButton ?
-                    <AddonsButton className={styles['addons-button']} />
-                    :
-                    null
-            }
-            {
-                fullscreenButton ?
-                    <FullscreenButton className={styles['fullscreen-button']} />
-                    :
-                    null
-            }
-            {
-                notificationsMenu ?
-                    <NotificationsMenu className={styles['notifications-menu']} />
-                    :
-                    null
-            }
-            {
-                navMenu ?
-                    <NavMenu className={styles['nav-menu']} />
-                    :
-                    null
-            }
-        </nav>
-    );
-});
-
-NavBar.displayName = 'NavBar';
-
-NavBar.propTypes = {
-    className: PropTypes.string,
-    route: PropTypes.string,
-    query: PropTypes.string,
-    backButton: PropTypes.bool,
-    tabs: PropTypes.arrayOf(PropTypes.shape({
-        route: PropTypes.string,
-        label: PropTypes.string,
-        icon: PropTypes.string,
-        href: PropTypes.string,
-        onClick: PropTypes.func
-    })),
-    title: PropTypes.string,
-    searchBar: PropTypes.bool,
-    addonsButton: PropTypes.bool,
-    fullscreenButton: PropTypes.bool,
-    notificationsMenu: PropTypes.bool,
-    navMenu: PropTypes.bool
-};
-
-module.exports = NavBar;

src/common/NavBar/VerticalNavBar/VerticalNavBar.js

@@ -1,7 +1,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const NavTabButton = require('../NavTabButton');
+const NavTabButton = require('./NavTabButton');
 const styles = require('./styles');
 
 const VerticalNavBar = React.memo(({ className, route, tabs }) => {

src/common/NavBar/styles.less

@@ -1,51 +0,0 @@
-.nav-bar-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: var(--nav-bar-size);
-    background-color: var(--color-secondarydark);
-    overflow: visible;
-
-    .nav-tab-button {
-        flex: none;
-        align-self: stretch;
-        max-width: 11rem;
-    }
-
-    .title {
-        flex: 1;
-        padding: 0 1rem;
-        font-size: 1.1rem;
-        font-style: normal;
-        font-weight: 400;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        color: var(--color-surfacelighter);
-
-        &~.spacing {
-            display: none;
-        }
-    }
-
-    .spacing {
-        flex: 1;
-    }
-
-    .search-bar {
-        flex-grow: 0;
-        flex-shrink: 1;
-        flex-basis: 25rem;
-        align-self: stretch;
-        min-width: 9.5rem;
-
-        &+.spacing {
-            max-width: 11rem;
-        }
-    }
-
-    .addons-button, .fullscreen-button, .notifications-menu, .nav-menu {
-        flex: none;
-        width: var(--nav-bar-size);
-        height: var(--nav-bar-size);
-    }
-}