MainNavBars applied to Search

src/common/MainNavBars/MainNavBars.js

@@ -10,12 +10,13 @@ const TABS = [
     { id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
 ];
 
-const MainNavBars = React.memo(({ className, route, children }) => {
+const MainNavBars = React.memo(({ className, route, query, children }) => {
     return (
         <div className={classnames(className, styles['main-nav-bars-container'])}>
             <HorizontalNavBar
                 className={styles['horizontal-nav-bar']}
                 route={route}
+                query={query}
                 backButton={false}
                 searchBar={true}
                 addonsButton={true}
@@ -37,6 +38,7 @@ MainNavBars.displayName = 'MainNavBars';
 MainNavBars.propTypes = {
     className: PropTypes.string,
     route: PropTypes.string,
+    query: PropTypes.string,
     children: PropTypes.node
 };
 

src/routes/Search/Search.js

@@ -1,37 +1,26 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const Icon = require('stremio-icons/dom');
-const { HorizontalNavBar, MainVerticalNavBar, MetaRow } = require('stremio/common');
+const { MainNavBars, MetaRow } = require('stremio/common');
 const useSearch = require('./useSearch');
 const styles = require('./styles');
 
 const Search = ({ queryParams }) => {
     const search = useSearch(queryParams);
-    return (
+    const query = React.useMemo(() => {
-        <div className={styles['search-container']}>
+        return search.selected !== null ?
-            <HorizontalNavBar
+            search.selected.extra.reduce((query, [name, value]) => {
-                className={styles['horizontal-nav-bar']}
+                if (name === 'search') {
-                route={'search'}
+                    return value;
-                query={
-                    search.selected !== null ?
-                        search.selected.extra.reduce((query, [name, value]) => {
-                            if (name === 'search') {
-                                return value;
-                            }
-
-                            return query;
-                        }, null)
-                        :
-                        null
                 }
-                backButton={false}
+
-                searchBar={true}
+                return query;
-                addonsButton={true}
+            }, null)
-                fullscreenButton={true}
+            :
-                notificationsMenu={true}
+            null;
-                navMenu={true}
+    }, [search.selected]);
-            />
+    return (
-            <MainVerticalNavBar className={styles['vertical-nav-bar']} route={'search'} />
+        <MainNavBars className={styles['search-container']} route={'search'} query={query}>
             <div className={styles['search-content']}>
                 {
                     search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?
@@ -89,7 +78,7 @@ const Search = ({ queryParams }) => {
                             })
                 }
             </div>
-        </div>
+        </MainNavBars>
     );
 };
 

src/routes/Search/styles.less

@@ -12,27 +12,13 @@
 }
 
 .search-container {
-    display: grid;
     width: 100%;
     height: 100%;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-        "horizontal-nav-bar horizontal-nav-bar"
-        "vertical-nav-bar search-content";
     background-color: @color-background-dark2;
 
-
-    .horizontal-nav-bar {
-        grid-area: horizontal-nav-bar;
-    }
-
-    .vertical-nav-bar {
-        grid-area: vertical-nav-bar;
-    }
-
     .search-content {
-        grid-area: search-content;
+        width: 100%;
+        height: 100%;
         overflow-y: auto;
 
         .search-row, .search-row-placeholder {