diff --git a/src/common/MainNavBar/MainNavBar.js b/src/common/MainNavBar/MainNavBar.js index 88672b44c..9f2db6a02 100644 --- a/src/common/MainNavBar/MainNavBar.js +++ b/src/common/MainNavBar/MainNavBar.js @@ -17,6 +17,7 @@ const MainNavBar = ({ className }) => { searchBar={true} addonsButton={true} fullscreenButton={true} + notificationsMenu={true} navMenu={true} /> ); diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js index 1a75f843e..92663af21 100644 --- a/src/common/NavBar/NavBar.js +++ b/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 ? + + : + null + } { navMenu ? @@ -87,6 +94,7 @@ NavBar.propTypes = { searchBar: PropTypes.bool, addonsButton: PropTypes.bool, fullscreenButton: PropTypes.bool, + notificationsMenu: PropTypes.bool, navMenu: PropTypes.bool }; diff --git a/src/common/NavBar/NotificationsMenu/NotificationsMenu.js b/src/common/NavBar/NotificationsMenu/NotificationsMenu.js new file mode 100644 index 000000000..db0a52b45 --- /dev/null +++ b/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 ( + ( + + )} + renderMenu={() => ( +
+ )} + /> + ); +}; + +NotificationsMenu.propTypes = { + className: PropTypes.string, + metaItems: PropTypes.arrayOf(PropTypes.object).isRequired +}; +NotificationsMenu.defaultProps = { + metaItems: [] +}; + +module.exports = NotificationsMenu; diff --git a/src/common/NavBar/NotificationsMenu/index.js b/src/common/NavBar/NotificationsMenu/index.js new file mode 100644 index 000000000..a18e804c8 --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/index.js @@ -0,0 +1,3 @@ +const NotificationsMenu = require('./NotificationsMenu'); + +module.exports = NotificationsMenu; diff --git a/src/common/NavBar/NotificationsMenu/styles.less b/src/common/NavBar/NotificationsMenu/styles.less new file mode 100644 index 000000000..de1c1ece9 --- /dev/null +++ b/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); + } +} diff --git a/src/common/NavBar/styles.less b/src/common/NavBar/styles.less index 43a8d3d89..458b37a21 100644 --- a/src/common/NavBar/styles.less +++ b/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); diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 4884722dd..d7018c9d3 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -56,6 +56,7 @@ const Settings = () => { backButton={true} addonsButton={true} fullscreenButton={true} + notificationsMenu={true} navMenu={true} />