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} />