feat: notifications on mobile

client/src/components/layout/header/HeaderMobile.tsx

@@ -3,6 +3,7 @@ import { UserContext } from "context/UserContext";
 import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { SetState } from "types/react";
+import { UserNotificationButton } from "./UserNotificationButton";
 
 export function HeaderMobile({
 	mobileShow,
@@ -27,28 +28,31 @@ export function HeaderMobile({
 				</div>
 
 				<div className="d-flex align-items-center">
-					<button
-						className="btn btn-icon btn-hover-transparent-white p-0 ml-3"
-						id="kt_header_mobile_topbar_toggle"
-					>
-						{user ? (
-							<Link to={`/dashboard/users/${user.username}`}>
-								<div className="px-4">
-									<img
-										className="rounded"
-										src={ToAPIURL("/users/me/pfp")}
-										style={{
-											width: "30px",
-											height: "30px",
-											display: "inline-block",
-										}}
-									/>
-								</div>
-							</Link>
-						) : (
-							<></>
-						)}
-					</button>
+					{user ? (
+						<>
+							<UserNotificationButton user={user} />
+							<button
+								className="btn btn-icon btn-hover-transparent-white p-0 ml-3"
+								id="kt_header_mobile_topbar_toggle"
+							>
+								<Link to={`/dashboard/users/${user.username}`}>
+									<div className="px-4">
+										<img
+											className="rounded"
+											src={ToAPIURL("/users/me/pfp")}
+											style={{
+												width: "30px",
+												height: "30px",
+												display: "inline-block",
+											}}
+										/>
+									</div>
+								</Link>
+							</button>
+						</>
+					) : (
+						<></>
+					)}
 				</div>
 			</div>
 		</>