user notifications WIP

src/common/MainNavBar/MainNavBar.js

@@ -17,6 +17,7 @@ const MainNavBar = ({ className }) => {
             searchBar={true}
             addonsButton={true}
             fullscreenButton={true}
+            notificationsMenu={true}
             navMenu={true}
         />
     );

src/common/NavBar/NavBar.js

@@ -5,10 +5,11 @@ 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, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, navMenu }) => {
+const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -62,6 +63,12 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
                     :
                     null
             }
+            {
+                notificationsMenu ?
+                    <NotificationsMenu className={styles['notifications-menu']} />
+                    :
+                    null
+            }
             {
                 navMenu ?
                     <NavMenu className={styles['nav-menu']} />
@@ -87,6 +94,7 @@ NavBar.propTypes = {
     searchBar: PropTypes.bool,
     addonsButton: PropTypes.bool,
     fullscreenButton: PropTypes.bool,
+    notificationsMenu: PropTypes.bool,
     navMenu: PropTypes.bool
 };
 

src/common/NavBar/NotificationsMenu/NotificationsMenu.js

@@ -0,0 +1,36 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const Button = require('stremio/common/Button');
+const Popup = require('stremio/common/Popup');
+const useBinaryState = require('stremio/common/useBinaryState');
+const styles = require('./styles');
+
+const NotificationsMenu = ({ className, metaItems }) => {
+    const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
+    return (
+        <Popup
+            open={menuOpen}
+            onCloseRequest={closeMenu}
+            renderLabel={(ref) => (
+                <Button ref={ref} className={classnames(className, styles['notifications-menu-label-container'], { 'active': menuOpen })} tabIndex={-1} onClick={toggleMenu}>
+                    <Icon className={styles['icon']} icon={'ic_bell'} />
+                </Button>
+            )}
+            renderMenu={() => (
+                <div className={styles['notifications-menu-container']} />
+            )}
+        />
+    );
+};
+
+NotificationsMenu.propTypes = {
+    className: PropTypes.string,
+    metaItems: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+NotificationsMenu.defaultProps = {
+    metaItems: []
+};
+
+module.exports = NotificationsMenu;

src/common/NavBar/NotificationsMenu/index.js

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

src/common/NavBar/NotificationsMenu/styles.less

@@ -0,0 +1,21 @@
+.notifications-menu-label-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+        background-color: var(--color-secondary);
+    }
+
+    &:global(.active) {
+        background-color: var(--color-background);
+    }
+
+    .icon {
+        flex: none;
+        width: 50%;
+        height: 50%;
+        fill: var(--color-surfacelighter);
+    }
+}

src/common/NavBar/styles.less

@@ -43,7 +43,7 @@
         }
     }
 
-    .addons-button, .fullscreen-button, .nav-menu {
+    .addons-button, .fullscreen-button, .notifications-menu, .nav-menu {
         flex: none;
         width: var(--nav-bar-size);
         height: var(--nav-bar-size);

src/routes/Settings/Settings.js

@@ -56,6 +56,7 @@ const Settings = () => {
                 backButton={true}
                 addonsButton={true}
                 fullscreenButton={true}
+                notificationsMenu={true}
                 navMenu={true} />
             <div className={styles['settings-container']}>
                 <SectionsSelector className={styles['side-menu']} sections={sections} selectedSectionId={selectedSectionId} onSelectedSection={changeSection} />