Search uses horizontal/vertical nav bar

src/routes/Board/styles.less

@@ -25,6 +25,7 @@
     .board-content-container {
         display: flex;
         flex-direction: row;
+        height: 100%;
 
         .board-content {
             flex: 1;

src/routes/Search/Search.js

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

src/routes/Search/styles.less

@@ -17,11 +17,16 @@
     height: 100%;
     background-color: var(--color-background);
 
-    .nav-bar {
+    .horizontal-nav-bar {
         flex: none;
         align-self: stretch;
     }
 
+    .search-content-container {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+
         .search-content {
             flex: 1;
             align-self: stretch;
@@ -82,9 +87,11 @@
             }
         }
     }
+}
 
 @media only screen and (min-width: @large) {
     .search-container {
+        .search-content-container {
             .search-content {
                 .search-row, .search-row-placeholder {
                     .meta-item, .meta-item-placeholder {
@@ -96,9 +103,11 @@
             }
         }
     }
+}
 
 @media only screen and (max-width: @large) {
     .search-container {
+        .search-content-container {
             .search-content {
                 .search-row, .search-row-placeholder {
                     .meta-item, .meta-item-placeholder {
@@ -110,9 +119,11 @@
             }
         }
     }
+}
 
 @media only screen and (max-width: @medium) {
     .search-container {
+        .search-content-container {
             .search-content {
                 .search-row, .search-row-placeholder {
                     .meta-item, .meta-item-placeholder {
@@ -124,9 +135,11 @@
             }
         }
     }
+}
 
 @media only screen and (max-width: @small) {
     .search-container {
+        .search-content-container {
             .search-content {
                 .search-row, .search-row-placeholder {
                     .meta-item, .meta-item-placeholder {
@@ -138,9 +151,11 @@
             }
         }
     }
+}
 
 @media only screen and (max-width: @xsmall) {
     .search-container {
+        .search-content-container {
             .search-content {
                 .search-row, .search-row-placeholder {
                     .meta-item, .meta-item-placeholder {
@@ -152,3 +167,4 @@
             }
         }
     }
+}