MainNavBars implemented and applied in Board

src/common/MainNavBars/MainNavBars.js

@@ -0,0 +1,43 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const { VerticalNavBar, HorizontalNavBar } = require('stremio/common/NavBar');
+const styles = require('./styles');
+
+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' }
+];
+
+const MainNavBars = React.memo(({ className, route, children }) => {
+    return (
+        <div className={classnames(className, styles['main-nav-bars-container'])}>
+            <HorizontalNavBar
+                className={styles['horizontal-nav-bar']}
+                route={route}
+                backButton={false}
+                searchBar={true}
+                addonsButton={true}
+                fullscreenButton={true}
+                navMenu={true}
+            />
+            <VerticalNavBar
+                className={styles['vertical-nav-bar']}
+                selected={route}
+                tabs={TABS}
+            />
+            <div className={styles['nav-content-container']}>{children}</div>
+        </div>
+    );
+});
+
+MainNavBars.displayName = 'MainNavBars';
+
+MainNavBars.propTypes = {
+    className: PropTypes.string,
+    route: PropTypes.string,
+    children: PropTypes.node
+};
+
+module.exports = MainNavBars;

src/common/MainNavBars/index.js

@@ -0,0 +1,3 @@
+const MainNavBars = require('./MainNavBars');
+
+module.exports = MainNavBars;

src/common/MainNavBars/styles.less

@@ -0,0 +1,29 @@
+.main-nav-bars-container {
+    position: relative;
+    z-index: 0;
+
+    .horizontal-nav-bar {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 1;
+    }
+
+    .vertical-nav-bar {
+        position: absolute;
+        top: var(--horizontal-nav-bar-size);
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+    }
+
+    .nav-content-container {
+        position: absolute;
+        top: var(--horizontal-nav-bar-size);
+        right: 0;
+        bottom: 0;
+        left: var(--vertical-nav-bar-size);
+        z-index: 0;
+    }
+}

src/common/MainVerticalNavBar/MainVerticalNavBar.js

@@ -1,28 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const { VerticalNavBar } = require('stremio/common/NavBar');
-
-const TABS = [
-    { route: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
-    { route: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-    { route: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
-];
-
-const MainVerticalNavBar = React.memo(({ className, route }) => {
-    return (
-        <VerticalNavBar
-            className={className}
-            route={route}
-            tabs={TABS}
-        />
-    );
-});
-
-MainVerticalNavBar.displayName = 'MainVerticalNavBar';
-
-MainVerticalNavBar.propTypes = {
-    className: PropTypes.string,
-    route: PropTypes.string
-};
-
-module.exports = MainVerticalNavBar;

src/common/MainVerticalNavBar/index.js

@@ -1,3 +0,0 @@
-const MainVerticalNavBar = require('./MainVerticalNavBar');
-
-module.exports = MainVerticalNavBar;

src/common/index.js

@@ -3,7 +3,7 @@ const Button = require('./Button');
 const Checkbox = require('./Checkbox');
 const ColorInput = require('./ColorInput');
 const Image = require('./Image');
-const MainVerticalNavBar = require('./MainVerticalNavBar');
+const MainNavBars = require('./MainNavBars');
 const MetaItem = require('./MetaItem');
 const MetaPreview = require('./MetaPreview');
 const MetaRow = require('./MetaRow');
@@ -35,7 +35,7 @@ module.exports = {
     Checkbox,
     ColorInput,
     Image,
-    MainVerticalNavBar,
+    MainNavBars,
     MetaItem,
     MetaPreview,
     MetaRow,

src/routes/Board/Board.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const { HorizontalNavBar, MainVerticalNavBar, MetaRow } = require('stremio/common');
+const { MainNavBars, MetaRow } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatching = require('./useContinueWatching');
 const useItemOptions = require('./useItemOptions');
@@ -10,18 +10,7 @@ const Board = () => {
     const continueWatching = useContinueWatching();
     const [options, optionOnSelect] = useItemOptions();
     return (
-        <div className={styles['board-container']}>
+        <MainNavBars className={styles['board-container']} route={'board'}>
-            <HorizontalNavBar
-                className={styles['horizontal-nav-bar']}
-                route={'board'}
-                backButton={false}
-                searchBar={true}
-                addonsButton={true}
-                fullscreenButton={true}
-                notificationsMenu={true}
-                navMenu={true}
-            />
-            <MainVerticalNavBar className={styles['vertical-nav-bar']} route={'board'} />
             <div className={styles['board-content']}>
                 {
                     continueWatching.lib_items.length > 0 ?
@@ -79,7 +68,7 @@ const Board = () => {
                     }
                 })}
             </div>
-        </div>
+        </MainNavBars>
     );
 };
 

src/routes/Board/styles.less

@@ -12,26 +12,13 @@
 }
 
 .board-container {
-    display: grid;
     width: 100%;
     height: 100%;
-    grid-template-columns: var(--vertical-nav-bar-size) calc(100% - var(--vertical-nav-bar-size));
-    grid-template-rows: var(--horizontal-nav-bar-size) calc(100% - var(--horizontal-nav-bar-size));
-    grid-template-areas:
-        "horizontal-nav-bar horizontal-nav-bar"
-        "vertical-nav-bar board-content";
     background-color: @color-background-dark2;
 
-    .horizontal-nav-bar {
-        grid-area: horizontal-nav-bar;
-    }
-
-    .vertical-nav-bar {
-        grid-area: vertical-nav-bar;
-    }
-
     .board-content {
-        grid-area: board-content;
+        width: 100%;
+        height: 100%;
         overflow-y: auto;
 
         .board-row, .board-row-placeholder {