Add notifications overview (#414)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/414
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/styles/components/_all.scss

@@ -22,3 +22,4 @@
 @import 'keyboard-shortcuts';
 @import 'api-config';
 @import 'datepicker';
+@import 'notifications';

src/styles/components/notifications.scss

@@ -0,0 +1,110 @@
+.notifications {
+	width: 50px;
+
+	.trigger {
+		cursor: pointer;
+		color: $grey-400;
+		padding: 1rem;
+		font-size: 1.25rem;
+		position: relative;
+
+		.unread-indicator {
+			position: absolute;
+			top: 1rem;
+			right: .75rem;
+			width: .75rem;
+			height: .75rem;
+
+			background: $primary;
+			border-radius: 100%;
+			border: 2px solid $white;
+		}
+	}
+
+	.notifications-list {
+		position: fixed;
+		right: 1rem;
+		margin-top: 1rem;
+		max-height: 400px;
+		overflow-y: auto;
+
+		background: $white;
+		width: 350px;
+		max-width: calc(100vw - 2rem);
+		padding: .75rem .25rem;
+		border-radius: $radius;
+		box-shadow: $shadow-sm;
+		font-size: .85rem;
+
+		@media screen and (max-width: $tablet) {
+			max-height: calc(100vh - 1rem - #{$navbar-height});
+		}
+
+		.head {
+			font-family: $vikunja-font;
+			font-size: 1rem;
+			padding: .5rem;
+		}
+
+		.single-notification {
+			display: flex;
+			align-items: center;
+
+			transition: background-color $transition;
+
+			&:hover {
+				background: $grey-100;
+				border-radius: $radius;
+			}
+
+			.read-indicator {
+				width: .35rem;
+				height: .35rem;
+				background: $primary;
+				border-radius: 100%;
+				margin-left: .5rem;
+
+				&.read {
+					background: transparent;
+				}
+			}
+
+			.user {
+				display: flex;
+				align-items: center;
+				width: auto;
+				margin-right: .25rem;
+
+				span {
+					font-family: $family-sans-serif;
+				}
+
+				.avatar {
+					height: 16px;
+				}
+			}
+
+			.detail .created {
+				color: $grey-400;
+			}
+
+			&:last-child {
+				margin-bottom: .25rem;
+			}
+
+			a {
+				color: $grey-800;
+			}
+		}
+
+		.nothing {
+			text-align: center;
+			padding: 1rem 0;
+			color: $grey-500;
+
+			.explainer {
+				font-size: .75rem;
+			}
+		}
+	}
+}