feat: support page previous page

src/components/Menu.tsx

@@ -14,7 +14,6 @@ export default function Menu() {
   const location = useLocation();
 
   const color = location.pathname === "/" ? "white" : "black";
-  console.log(location)
 
   const arrayMenu: MenuItem[] = [
     {
@@ -42,49 +41,50 @@ export default function Menu() {
         overflow: "hidden",
       }}
     >
-      {location.pathname !== "/" ? arrayMenu.map(({ name, url, subMenu = [] }) => (
+      {location.pathname !== "/"
-        <Link
+        ? arrayMenu.map(({ name, url, subMenu = [] }) => (
-          key={name}
+            <Link
-          style={{
+              key={name}
-            textDecoration: "none",
+              style={{
-            height: "100%",
+                textDecoration: "none",
-            display: "flex",
+                height: "100%",
-            alignItems: "center",
+                display: "flex",
-          }}
+                alignItems: "center",
-          to={url}
+              }}
-          onMouseEnter={() => setActiveSubMenu(subMenu)}
+              to={url}
-        >
+              onMouseEnter={() => setActiveSubMenu(subMenu)}
-          <Typography
+              state={{ previousUrl: location.pathname }}
-            color={
+            >
-              location.pathname === url
+              <Typography
-                ? theme.palette.brightPurple.main
+                color={
-                : color
+                  location.pathname === url
-            }
+                    ? theme.palette.brightPurple.main
-            variant="body2"
+                    : color
-            sx={{
+                }
-              whiteSpace: "nowrap",
+                variant="body2"
-            }}
+                sx={{
-          >
+                  whiteSpace: "nowrap",
-            {name}
+                }}
-          </Typography>
+              >
-        </Link>
+                {name}
-      ))
+              </Typography>
-    :arrayMenu.map(({ name, url, subMenu = [] }) => (
+            </Link>
-        <Typography
+          ))
-          color={
+        : arrayMenu.map(({ name, url, subMenu = [] }) => (
-            location.pathname === url
+            <Typography
-              ? theme.palette.brightPurple.main
+              color={
-              : color
+                location.pathname === url
-          }
+                  ? theme.palette.brightPurple.main
-          variant="body2"
+                  : color
-          sx={{
+              }
-            whiteSpace: "nowrap",
+              variant="body2"
-          }}
+              sx={{
-        >
+                whiteSpace: "nowrap",
-          {name}
+              }}
-        </Typography>
+            >
-    ))
+              {name}
-    }
+            </Typography>
+          ))}
       <Box
         sx={{
           zIndex: "10",
@@ -96,29 +96,30 @@ export default function Menu() {
         }}
         onMouseLeave={() => setActiveSubMenu([])}
       >
-        {location.pathname !== "/" && activeSubMenu.map(({ name, url }) => (
+        {location.pathname !== "/" &&
-          <Link key={name} style={{ textDecoration: "none" }} to={url}>
+          activeSubMenu.map(({ name, url }) => (
-            <Typography
+            <Link key={name} style={{ textDecoration: "none" }} to={url}>
-              color={
+              <Typography
-                location.pathname === url
+                color={
-                  ? theme.palette.brightPurple.main
+                  location.pathname === url
-                  : color
+                    ? theme.palette.brightPurple.main
-              }
+                    : color
-              variant="body2"
+                }
-              sx={{
+                variant="body2"
-                padding: "15px",
+                sx={{
-                whiteSpace: "nowrap",
+                  padding: "15px",
-                paddingLeft: "185px",
+                  whiteSpace: "nowrap",
-                "&:hover": {
+                  paddingLeft: "185px",
-                  color: theme.palette.brightPurple.main,
+                  "&:hover": {
-                  background: theme.palette.background.default,
+                    color: theme.palette.brightPurple.main,
-                },
+                    background: theme.palette.background.default,
-              }}
+                  },
-            >
+                }}
-              {name}
+              >
-            </Typography>
+                {name}
-          </Link>
+              </Typography>
-        ))}
+            </Link>
+          ))}
       </Box>
     </Box>
   );

src/components/Navbar/DialogMenu.tsx

@@ -85,7 +85,7 @@ export default function DialogMenu({ handleClose }: DialogMenuProps) {
                 key={index}
                 component={Link}
                 to={url}
-                state={user ? undefined : { backgroundLocation: location }}
+                state={{ previousUrl: location.pathname }}
                 disableRipple
                 variant="text"
                 onClick={() =>
@@ -134,6 +134,7 @@ export default function DialogMenu({ handleClose }: DialogMenuProps) {
                         }}
                         to={url}
                         onClick={closeDialogMenu}
+                        state={{ previousUrl: location.pathname }}
                       >
                         <Typography
                           variant="body2"

src/components/Navbar/NavbarFull.tsx

@@ -58,6 +58,7 @@ export default function NavbarFull({ isLoggedIn, children }: Props) {
           disableGutters
           maxWidth={false}
           sx={{
+            zIndex: 1,
             position: "fixed",
             top: "0",
             px: "16px",

src/pages/Support/Support.tsx

@@ -6,12 +6,12 @@ import {
   IconButton,
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams, useLocation } from "react-router-dom";
 import SectionWrapper from "@components/SectionWrapper";
 import SupportChat from "./SupportChat";
 import CreateTicket from "./CreateTicket";
 import TicketList from "./TicketList/TicketList";
-import { useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { Ticket, getMessageFromFetchError, useToken } from "@frontend/kitui";
 import {
   updateTickets,
@@ -23,12 +23,14 @@ import { enqueueSnackbar } from "notistack";
 import { useSSESubscription, useTickets } from "@frontend/kitui";
 
 export default function Support() {
+  const [previousPage, setPreviousPage] = useState<string>("");
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const ticketId = useParams().ticketId;
   const ticketApiPage = useTicketStore((state) => state.apiPage);
   const ticketsPerPage = useTicketStore((state) => state.ticketsPerPage);
   const token = useToken();
+  const location = useLocation();
 
   const fetchState = useTickets({
     url: "https://hub.pena.digital/heruvym/getTickets",
@@ -44,6 +46,10 @@ export default function Support() {
     }, []),
   });
 
+  useEffect(() => {
+    setPreviousPage(location.state?.previousUrl || "/");
+  }, []);
+
   useSSESubscription<Ticket>({
     enabled: Boolean(token),
     url: `https://admin.pena.digital/heruvym/subscribe?Authorization=${token}`,
@@ -73,7 +79,7 @@ export default function Support() {
         }}
       >
         <Link
-          to="/support"
+          to={previousPage}
           style={{
             textDecoration: "none",
             display: "flex",