diff --git a/app/javascript/flavours/glitch/features/drawer/header/index.js b/app/javascript/flavours/glitch/features/drawer/header/index.js
index deec424358..435538de4d 100644
--- a/app/javascript/flavours/glitch/features/drawer/header/index.js
+++ b/app/javascript/flavours/glitch/features/drawer/header/index.js
@@ -46,6 +46,7 @@ const messages = defineMessages({
// The component.
export default function DrawerHeader ({
columns,
+ unreadNotifications,
intl,
onSettingsClick,
}) {
@@ -77,7 +78,12 @@ export default function DrawerHeader ({
aria-label={intl.formatMessage(messages.notifications)}
title={intl.formatMessage(messages.notifications)}
to='/notifications'
- >
+ >
+
+
+ { unreadNotifications > 0 && }
+
+
))}
{renderForColumn('COMMUNITY', (
({
searchHidden: state.getIn(['search', 'hidden']),
searchValue: state.getIn(['search', 'value']),
submitted: state.getIn(['search', 'submitted']),
+ unreadNotifications: state.getIn(['notifications', 'unread']),
});
// Dispatch mapping.
@@ -87,6 +88,7 @@ class Drawer extends React.Component {
searchValue,
submitted,
isSearchPage,
+ unreadNotifications,
} = this.props;
const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
@@ -96,6 +98,7 @@ class Drawer extends React.Component {
{multiColumn ? (
@@ -139,6 +142,7 @@ Drawer.propTypes = {
searchHidden: PropTypes.bool,
searchValue: PropTypes.string,
submitted: PropTypes.bool,
+ unreadNotifications: PropTypes.number,
// Dispatch props.
onChange: PropTypes.func,
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 1419888faf..52fe908855 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1121,6 +1121,22 @@
left: 0;
}
+.icon-badge-wrapper {
+ position: relative;
+}
+
+.icon-badge {
+ position: absolute;
+ display: block;
+ right: -.25em;
+ top: -.25em;
+ background-color: $ui-highlight-color;
+ border-radius: 50%;
+ font-size: 75%;
+ width: 1em;
+ height: 1em;
+}
+
::-webkit-scrollbar-thumb {
border-radius: 0;
}