feat: NotificationsModal mobile styles

src/components/Drawers.tsx

@@ -51,15 +51,14 @@ export default function Drawers() {
     (state) => state.summaryPriceAfterDiscountsMap
   );
   const userAccount = useUserStore((state) => state.userAccount);
-  const ticketCount = useTicketStore((state) => state.ticketCount);
-  const ticketApiPage = useTicketStore((state) => state.apiPage);
-  const ticketsPerPage = useTicketStore((state) => state.ticketsPerPage);
-  const tickets = useTicketStore((state) => state.tickets);
+  const { tickets, ticketCount, apiPage, ticketsPerPage } = useTicketStore(
+    (state) => state
+  );
 
   useTickets({
     url: "https://hub.pena.digital/heruvym/getTickets",
     ticketsPerPage,
-    ticketApiPage,
+    ticketApiPage: apiPage,
     onNewTickets: useCallback((result) => {
       if (result.data) updateTickets(result.data);
       setTicketCount(result.count);

src/components/Navbar/NavbarCollapsed.tsx

@@ -1,9 +1,10 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import { Box, Badge, Drawer, IconButton, useTheme } from "@mui/material";
 import { Link } from "react-router-dom";
 import { useTickets } from "@frontend/kitui";
 
 import SectionWrapper from "../SectionWrapper";
+import { NotificationsModal } from "../NotificationsModal";
 
 import { useUserStore } from "@root/stores/user";
 import {
@@ -29,15 +30,18 @@ interface Props {
 
 export default function NavbarCollapsed({ isLoggedIn, children }: Props) {
   const [open, setOpen] = useState(false);
+  const [openNotificationsModal, setOpenNotificationsModal] =
+    useState<boolean>(false);
+  const bellRef = useRef<HTMLButtonElement | null>(null);
   const userAccount = useUserStore((state) => state.userAccount);
-  const ticketCount = useTicketStore((state) => state.ticketCount);
-  const ticketApiPage = useTicketStore((state) => state.apiPage);
-  const ticketsPerPage = useTicketStore((state) => state.ticketsPerPage);
+  const { ticketCount, tickets, apiPage, ticketsPerPage } = useTicketStore(
+    (state) => state
+  );
 
   useTickets({
     url: "https://hub.pena.digital/heruvym/getTickets",
     ticketsPerPage,
-    ticketApiPage,
+    ticketApiPage: apiPage,
     onNewTickets: useCallback((result) => {
       if (result.data) updateTickets(result.data);
       setTicketCount(result.count);
@@ -134,6 +138,8 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) {
           </IconButton>
         </Link>
         <IconButton
+          ref={bellRef}
+          onClick={() => setOpenNotificationsModal((isOpened) => !isOpened)}
           aria-label="cart"
           sx={{
             width: "30px",
@@ -168,6 +174,16 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) {
             <BellIcon />
           </Badge>
         </IconButton>
+        <NotificationsModal
+          open={openNotificationsModal}
+          setOpen={setOpenNotificationsModal}
+          anchorElement={bellRef.current}
+          notifications={tickets.map((ticket) => ({
+            text: "У вас новое сообщение от техподдержки",
+            date: new Date(ticket.updated_at).toLocaleDateString(),
+            watched: ticket.user === ticket.top_message.user_id,
+          }))}
+        />
         <Link to="/" style={{ marginLeft: "auto" }}>
           <PenaLogo width={100} />
         </Link>

src/components/NotificationsModal.tsx

@@ -1,4 +1,11 @@
-import { Popover, List, ListItem, Typography } from "@mui/material";
+import {
+  Popover,
+  List,
+  ListItem,
+  Typography,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 
 type Notification = {
   text: string;
@@ -19,6 +26,9 @@ export const NotificationsModal = ({
   anchorElement,
   notifications,
 }: NotificationsModalProps) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
+
   return (
     <Popover
       open={open}
@@ -28,7 +38,7 @@ export const NotificationsModal = ({
       transformOrigin={{ vertical: "top", horizontal: "right" }}
       sx={{
         "& .MuiPopover-paper": {
-          maxWidth: 600,
+          maxWidth: isMobile ? "calc(100vw - 30px)" : 600,
           width: "100%",
           maxHeight: "310px",
           borderRadius: "8px",
@@ -53,8 +63,9 @@ export const NotificationsModal = ({
           <ListItem
             sx={{
               display: "flex",
-              alignItems: "center",
+              alignItems: isMobile ? "normal" : "center",
               justifyContent: "space-between",
+              flexDirection: isMobile ? "column-reverse" : "unset",
               borderBottom: "1px solid #F2F3F7",
               padding: "20px 10px",
               background: watched ? "none" : "#F0F0F6",
@@ -76,8 +87,8 @@ export const NotificationsModal = ({
                   display: watched ? "none" : "block",
                   position: "absolute",
                   left: "10px",
-                  top: "50%",
-                  transform: "translateY(-50%)",
+                  top: isMobile ? "5px" : "50%",
+                  transform: isMobile ? "none" : "translateY(-50%)",
                   height: "8px",
                   width: "8px",
                   borderRadius: "50%",
@@ -93,6 +104,8 @@ export const NotificationsModal = ({
                 lineHeight: "19px",
                 color: "#9A9AAF",
                 fontWeight: watched ? "normal" : "bold",
+                paddingLeft: isMobile ? (watched ? "0" : "35px") : "0",
+                marginBottom: isMobile ? "5px" : "0",
               }}
             >
               {date}