NavTabButton selected by bool prop instead of match against location hash

src/common/MainNavBar/MainNavBar.js

@@ -3,17 +3,22 @@ const PropTypes = require('prop-types');
 const NavBar = require('stremio/common/NavBar');
 
 const TABS = [
-    { label: 'Board', icon: 'ic_board', href: '#/' },
-    { label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-    { label: 'Library', icon: 'ic_library', href: '#/library' }
+    { 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 MainNavBar = React.memo(({ className }) => {
+const MainNavBar = React.memo(({ className, selected }) => {
     return (
         <NavBar
             className={className}
             backButton={false}
-            tabs={TABS}
+            tabs={TABS.map(({ id, label, icon, href }) => ({
+                label,
+                icon,
+                href,
+                selected: id === selected
+            }))}
             searchBar={true}
             addonsButton={true}
             fullscreenButton={true}
@@ -26,7 +31,8 @@ const MainNavBar = React.memo(({ className }) => {
 MainNavBar.displayName = 'MainNavBar';
 
 MainNavBar.propTypes = {
-    className: PropTypes.string
+    className: PropTypes.string,
+    selected: PropTypes.string
 };
 
 module.exports = MainNavBar;

src/common/NavBar/NavBar.js

@@ -28,13 +28,14 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
             }
             {
                 Array.isArray(tabs) && tabs.length > 0 ?
-                    tabs.slice(0, 4).map(({ href = '', icon = '', label = '', onClick }) => (
+                    tabs.slice(0, 4).map(({ href, icon, label, selected, onClick }, index) => (
                         <NavTabButton
-                            key={`${href}${icon}${label}`}
+                            key={index}
                             className={styles['nav-tab-button']}
                             href={href}
                             icon={icon}
                             label={label}
+                            selected={selected}
                             onClick={onClick}
                         />
                     ))
@@ -88,6 +89,7 @@ NavBar.propTypes = {
         icon: PropTypes.string,
         label: PropTypes.string,
         href: PropTypes.string,
+        selected: PropTypes.bool,
         onClick: PropTypes.func
     })),
     title: PropTypes.string,

src/common/NavBar/NavTabButton/NavTabButton.js

@@ -3,25 +3,11 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
-const routesRegexp = require('stremio/common/routesRegexp');
-const useRouteActive = require('stremio/common/useRouteActive');
 const styles = require('./styles');
 
-const NavTabButton = ({ className, icon, label, href, onClick }) => {
-    const routeRegexp = React.useMemo(() => {
-        if (typeof href === 'string' && href.startsWith('#')) {
-            for (const { regexp } of Object.values(routesRegexp)) {
-                if (href.slice(1).match(regexp)) {
-                    return regexp;
-                }
-            }
-        }
-
-        return null;
-    }, [href]);
-    const routeActive = useRouteActive(routeRegexp);
+const NavTabButton = ({ className, icon, label, href, selected, onClick }) => {
     return (
-        <Button className={classnames(className, styles['nav-tab-button-container'], { 'active': routeActive })} title={label} tabIndex={-1} href={href} onClick={onClick}>
+        <Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <Icon className={styles['icon']} icon={icon} />
@@ -43,6 +29,7 @@ NavTabButton.propTypes = {
     icon: PropTypes.string,
     label: PropTypes.string,
     href: PropTypes.string,
+    selected: PropTypes.bool,
     onClick: PropTypes.func
 };
 

src/common/NavBar/NavTabButton/styles.less

@@ -8,7 +8,7 @@
         background-color: var(--color-secondary);
     }
 
-    &:global(.active) {
+    &:global(.selected) {
         background-color: var(--color-background);
     }
 

src/routes/Board/Board.js

@@ -11,7 +11,7 @@ const Board = () => {
     const [options, optionOnSelect] = useItemOptions();
     return (
         <div className={styles['board-container']}>
-            <MainNavBar className={styles['nav-bar']} />
+            <MainNavBar className={styles['nav-bar']} selected={'board'} />
             <div className={styles['board-content']}>
                 {
                     continueWatching.lib_items.length > 0 ?

src/routes/Discover/Discover.js

@@ -45,7 +45,7 @@ const Discover = ({ urlParams, queryParams }) => {
     }, [urlParams, queryParams]);
     return (
         <div className={styles['discover-container']}>
-            <MainNavBar className={styles['nav-bar']} />
+            <MainNavBar className={styles['nav-bar']} selected={'discover'} />
             <div className={styles['discover-content']}>
                 <div className={styles['selectable-inputs-container']}>
                     {selectInputs.map((selectInput, index) => (

src/routes/Library/Library.js

@@ -13,7 +13,7 @@ const Library = ({ urlParams }) => {
     const [options, optionOnSelect] = useItemOptions();
     return (
         <div className={styles['library-container']}>
-            <MainNavBar className={styles['nav-bar']} />
+            <MainNavBar className={styles['nav-bar']} selected={'library'} />
             <div className={styles['library-content']}>
                 {
                     library.library_state.type === 'Ready' && library.library_state.content.uid !== null && library.type_names.length > 0 ?