diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_button/notificationButtonStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_button/notificationButtonStyles.js
new file mode 100644
index 000000000..4be297ce5
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_button/notificationButtonStyles.js
@@ -0,0 +1,7 @@
+const styles = theme => ({
+ notificationButtonStyle: {
+ minWidth: '0px !important',
+ },
+});
+
+export default styles;
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelButtonStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelButtonStyles.js
new file mode 100644
index 000000000..55385d591
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelButtonStyles.js
@@ -0,0 +1,18 @@
+const styles = theme => ({
+ buttonStyle: {
+ borderRadius: '30px',
+ padding: '5px 15px',
+ color: '#757575',
+ backgroundColor: '#E4E4E4',
+ outline: 'none',
+ border: 'none',
+ cursor: 'pointer',
+ fontSize: '15px',
+ },
+ selectedButtonStyle: {
+ backgroundColor: '#00B8C4',
+ color: 'white',
+ },
+});
+
+export default styles;
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelPopperStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelPopperStyles.js
new file mode 100644
index 000000000..40efcd97b
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelPopperStyles.js
@@ -0,0 +1,18 @@
+const styles = theme => ({
+ popperContainerStyle: {
+ top: '56px !important',
+ },
+ popperArrowStyle: {
+ width: '50px',
+ height: '50px',
+ top: '-19px',
+ background: 'white',
+ position: 'absolute',
+ transform: 'scaleX(0.7) rotate(45deg)',
+ transformOrigin: 'center',
+ borderRadius: '200px 0px 1000px 0px',
+ zIndex: '2000',
+ },
+});
+
+export default styles;
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelStyles.js
new file mode 100644
index 000000000..623db92eb
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelStyles.js
@@ -0,0 +1,39 @@
+const styles = theme => ({
+ popperContainerStyle: {
+ top: '48px !important',
+ },
+ popperStyle: {
+ backgroundColor: 'white',
+ zIndex: 20,
+ padding: '20px',
+ borderRadius: '20px',
+ boxShadow: '0px 4px 4px 0px rgb(0 0 0 / 25%)',
+ },
+ fullscreenPopperStyle: {
+ width: '100vw',
+ height: '100vh',
+ borderRadius: '0px',
+ },
+ panelHeaderStyle: {
+ display: 'flex',
+ flexFlow: 'row nowrap',
+ alignItems: 'center',
+ gap: '10px',
+ color: '#00B8C4',
+ },
+ panelHeaderTextStyle: {
+ margin: '0px',
+ marginRight: '30px',
+ fontWeight: '600',
+ },
+ panelSubheadingTextStyle: {
+ margin: '5px 0px',
+ fontWeight: '600',
+ color: '#00B8C4',
+ },
+ fullWidth: {
+ width: '100%',
+ },
+});
+
+export default styles;
diff --git a/zubhub_frontend/zubhub/src/components/notification_button/NotificationButton.jsx b/zubhub_frontend/zubhub/src/components/notification_button/NotificationButton.jsx
new file mode 100644
index 000000000..0aeee25c9
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/notification_button/NotificationButton.jsx
@@ -0,0 +1,37 @@
+import React, { useRef, useState } from 'react';
+import NotificationPanel from '../notification_panel/NotificationPanel';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import CustomButton from '../button/Button';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import cn from 'classnames';
+import styles from '../../assets/js/styles/components/notification_button/notificationButtonStyles';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(styles);
+
+const NotificationButton = ({ className }) => {
+ const classes = useStyles();
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const buttonRef = useRef();
+
+ return (
+ setDropdownOpen(false)}>
+
+ setDropdownOpen(!dropdownOpen)}
+ ref={buttonRef}
+ >
+
+
+
+
+
+ );
+};
+
+export default NotificationButton;
diff --git a/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanel.jsx b/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanel.jsx
new file mode 100644
index 000000000..e5dd50ce5
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanel.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import styles from '../../assets/js/styles/components/notification_panel/notificationPanelStyles';
+import { makeStyles } from '@material-ui/core/styles';
+import NotificationPanelButton from './NotificationPanelButton';
+import cn from 'classnames';
+import NotificationPanelPopper from './NotificationPanelPopper';
+import { useMediaQuery } from '@material-ui/core';
+
+const useStyles = makeStyles(styles);
+
+const NOTIFICATION_VIEW_TYPE = {
+ ALL: 'ALL',
+ UNREAD: 'UNREAD',
+};
+
+const NotificationPanel = ({ open, anchorEl }) => {
+ const classes = useStyles();
+ const mediaQuery = useMediaQuery('(max-width: 600px)');
+ const [notificationViewType, setNotificationViewType] = useState(
+ NOTIFICATION_VIEW_TYPE.ALL,
+ );
+
+ const getAllNotificationView = () => {
+ const newNotificationsLength = 1;
+ const earlierNotificationsLength = 1;
+
+ return (
+
+ {newNotificationsLength > 0 && (
+
New
+ )}
+ {earlierNotificationsLength > 0 && (
+ Earlier
+ )}
+
+ );
+ };
+
+ const getUnreadNotificationView = () => (
+ Unread notifications here...
+ );
+
+ return (
+
+
+
+
Notifications
+ setNotificationViewType(NOTIFICATION_VIEW_TYPE.ALL)}
+ >
+ All
+
+
+ setNotificationViewType(NOTIFICATION_VIEW_TYPE.UNREAD)
+ }
+ >
+ Unread
+
+
+ {notificationViewType === NOTIFICATION_VIEW_TYPE.ALL
+ ? getAllNotificationView()
+ : getUnreadNotificationView()}
+
+
+ );
+};
+
+export default NotificationPanel;
diff --git a/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanelButton.jsx b/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanelButton.jsx
new file mode 100644
index 000000000..8dd9d1389
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanelButton.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import styles from '../../assets/js/styles/components/notification_panel/notificationPanelButtonStyles';
+import { makeStyles } from '@material-ui/core/styles';
+import cn from 'classnames';
+
+const useStyles = makeStyles(styles);
+
+const NotificationPanelButton = ({ selected, children, ...rest }) => {
+ const classNames = useStyles();
+
+ const selectedButtonClassName = selected
+ ? classNames.selectedButtonStyle
+ : '';
+
+ return (
+
+ );
+};
+
+export default NotificationPanelButton;
diff --git a/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanelPopper.jsx b/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanelPopper.jsx
new file mode 100644
index 000000000..1afe5f334
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanelPopper.jsx
@@ -0,0 +1,43 @@
+import { useMediaQuery } from '@material-ui/core';
+import React from 'react';
+import Popper from '@material-ui/core/Popper';
+import { makeStyles } from '@material-ui/core/styles';
+
+import styles from '../../assets/js/styles/components/notification_panel/notificationPanelPopperStyles';
+
+const useStyles = makeStyles(styles);
+
+const modifiers = {
+ offset: {
+ enabled: true,
+ offset: '20px, 30px',
+ },
+ arrow: {
+ enabled: true,
+ },
+};
+
+const fullscreenModifiers = {};
+
+const NotificationPanelPopper = ({ open, anchorEl, children }) => {
+ const classes = useStyles();
+ const mediaQuery = useMediaQuery('(max-width: 600px)');
+
+ return (
+
+ {!mediaQuery && (
+
+ )}
+ {children}
+
+ );
+};
+
+export default NotificationPanelPopper;
diff --git a/zubhub_frontend/zubhub/src/views/PageWrapper.jsx b/zubhub_frontend/zubhub/src/views/PageWrapper.jsx
index 7601cc4c7..424dfcd25 100644
--- a/zubhub_frontend/zubhub/src/views/PageWrapper.jsx
+++ b/zubhub_frontend/zubhub/src/views/PageWrapper.jsx
@@ -56,16 +56,17 @@ import styles from '../assets/js/styles/views/page_wrapper/pageWrapperStyles';
import commonStyles from '../assets/js/styles';
import languageMap from '../assets/js/languageMap.json';
+import NotificationButton from '../components/notification_button/NotificationButton';
const useStyles = makeStyles(styles);
const useCommonStyles = makeStyles(commonStyles);
/**
-* @function PageWrapper View
-* @author Raymond Ndibe
-*
-* @todo - describe function's signature
-*/
+ * @function PageWrapper View
+ * @author Raymond Ndibe
+ *
+ * @todo - describe function's signature
+ */
function PageWrapper(props) {
const backToTopEl = React.useRef(null);
const classes = useStyles();
@@ -325,6 +326,9 @@ function PageWrapper(props) {
>
+