added NotificationsCenter

packages/app/src/App.jsx

@@ -59,7 +59,7 @@ import { Translation } from "react-i18next"
 import { Session, User } from "models"
 import config from "config"
 
-import { NotFound, RenderError, Crash, Settings, Navigation, Login, UserRegister, Creator, Searcher } from "components"
+import { NotFound, RenderError, Crash, Settings, Navigation, Login, UserRegister, Creator, Searcher, NotificationsCenter } from "components"
 import { DOMWindow } from "components/RenderWindow"
 import loadable from "@loadable/component"
 
@@ -124,10 +124,13 @@ class App extends React.Component {
 			}
 		},
 		"app.openSearcher": () => {
-			return App.publicMethods.openSearcher()
+			App.publicMethods.openSearcher()
 		},
-		"app.openCreator": (...args) => {
-			return App.publicMethods.openCreator(...args)
+		"app.openCreator": () => {
+			App.publicMethods.openCreator()
+		},
+		"app.openNotifications": () => {
+			App.publicMethods.openNotifications()
 		},
 		"app.createLogin": async () => {
 			app.DrawerController.open("login", Login, {
@@ -271,6 +274,15 @@ class App extends React.Component {
 	}
 
 	static publicMethods = {
+		openNotifications: () => {
+			window.app.SidedrawerController.open("notifications", NotificationsCenter, {
+				props: {
+					width: "fit-content",
+				},
+				allowMultiples: false,
+				escClosable: true,
+			})
+		},
 		openSearcher: (options) => {
 			window.app.ModalController.open((props) => <Searcher {...props} />)
 		},

packages/app/src/components/Layout/sidebar/index.jsx

@@ -359,7 +359,7 @@ export default class Sidebar extends React.Component {
 									{(t) => t("Create")}
 								</Translation>
 							</Menu.Item>
-							<Menu.Item key="notifications" icon={<Icons.Bell />}>
+							<Menu.Item key="notifications" icon={<Icons.Bell />} overrideEvent="app.openNotifications">
 								<Translation>
 									{t => t("Notifications")}
 								</Translation>

packages/app/src/components/NotificationsCenter/index.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+import "./index.less"
+
+export default (props) => {
+    return <div className="notificationsCenter">
+        <div className="header">
+            <h2>Notifications</h2>
+        </div>
+
+        <div className="content">
+
+        </div>
+    </div>
+}

packages/app/src/components/NotificationsCenter/index.less

@@ -0,0 +1,16 @@
+.notificationsCenter{
+    display: flex;
+    flex-direction: column;
+
+    .header {
+        display: flex;
+        flex-direction: column;
+
+        margin-bottom: 20px;
+
+        h2 {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+    }
+}

packages/app/src/components/index.js

@@ -33,6 +33,8 @@ export { default as UserPreview } from "./UserPreview"
 export { default as FeaturedEventAnnouncement } from "./FeaturedEventAnnouncement"
 export { default as FeaturedEventsAnnouncements } from "./FeaturedEventsAnnouncements"
 
+export { default as NotificationsCenter } from "./NotificationsCenter"
+
 // CREATOR
 export { default as Creator } from "./Creator"