customer-dashboard/src/Components/SideMenu/index.js

import {
  AppstoreOutlined,
  BgColorsOutlined,
  CalendarOutlined,
  ClusterOutlined,
  EditOutlined,
  FileImageOutlined,
  MessageOutlined,
  QuestionCircleOutlined,
  ScissorOutlined,
  SettingOutlined,
  ShopOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Divider, Menu } from "antd";
import { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { BreakpointLgWidth, Constants } from "../../utils";
import { useTranslation } from "react-i18next";
import { useSideBarContext } from "../../Contexts/SideBarContext";
import { useAppContext } from "../../Contexts/AppContext";
import { useStoresContext } from "../../Contexts/StoresContext";

export function SideMenuContent({
  setIsSideMenuCollapsed,
  contentFirstRender,
}) {
  const sideBarContext = useSideBarContext();
  const storesContext = useStoresContext();
  const location = useLocation();
  const [selectedKeys, setSelectedKeys] = useState("/");
  const { t } = useTranslation();
  //const lastSubscribedTopic = useRef("");

  const navigate = useNavigate();

  const getFirstMenuItems = () => {
    let items = [
      {
        label: t("sideMenu.overview"),
        icon: <AppstoreOutlined />,
        key: Constants.ROUTE_PATHS.OVERVIEW,
      },
    ];

    // website

    let groupWebsite = {
      label: t("sideMenu.website.title"),
      icon: <EditOutlined />,
      children: [],
      key: "/website",
    };

    groupWebsite.children.push({
      label: t("sideMenu.website.colorPalette"),
      icon: <BgColorsOutlined />,
      key: Constants.ROUTE_PATHS.WEBSITE_COLOR_PALETTE,
    });

    groupWebsite.children.push({
      label: t("sideMenu.website.banner"),
      icon: <FileImageOutlined />,
      key: Constants.ROUTE_PATHS.WEBSITE_BANNER,
    });

    groupWebsite.children.push({
      label: t("sideMenu.website.socials"),
      icon: <ClusterOutlined />,
      key: Constants.ROUTE_PATHS.WEBSITE_SOCIALS,
    });

    items.push(groupWebsite);

    // stores

    let stores = {
      label:
        storesContext.stores.length > 1
          ? t("sideMenu.store.titlePlural")
          : t("sideMenu.store.titleSingular"),
      children: [],
      type: "group",
    };

    storesContext.stores.forEach((store) => {
      let groupStore = {
        label: store.name,
        icon: <ShopOutlined />,
        children: [],
      };

      if (sideBarContext.permissions.includes("settings")) {
        groupStore.children.push({
          label: t("sideMenu.store.settings"),
          icon: <SettingOutlined />,
          key: `${Constants.ROUTE_PATHS.STORE.SETTINGS}/${store.store_id}`,
        });
      }

      if (sideBarContext.permissions.includes("employees")) {
        groupStore.children.push({
          label: t("sideMenu.store.employees"),
          icon: <TeamOutlined />,
          key: `${Constants.ROUTE_PATHS.STORE.EMPLOYEES}/${store.store_id}`,
        });
      }

      if (sideBarContext.permissions.includes("services")) {
        groupStore.children.push({
          label: t("sideMenu.store.services"),
          icon: <ScissorOutlined />,
          key: `${Constants.ROUTE_PATHS.STORE.SERVICES}/${store.store_id}`,
        });
      }

      if (sideBarContext.permissions.includes("calendar")) {
        groupStore.children.push({
          label: t("sideMenu.store.calendar"),
          icon: <CalendarOutlined />,
          key: `${Constants.ROUTE_PATHS.STORE.CALENDAR}/${store.store_id}`,
        });
      }

      stores.children.push(groupStore);
    });

    items.push(stores);

    return items;
  };

  const getSecondMenuItems = () => {
    let items = [];

    items.push(
      {
        label: t("sideMenu.support"),
        icon: <QuestionCircleOutlined />,
        key: Constants.ROUTE_PATHS.SUPPORT,
      },
      {
        label: t("sideMenu.feedback"),
        icon: <MessageOutlined />,
        key: Constants.ROUTE_PATHS.FEEDBACK,
      },
      {
        label: sideBarContext.username,
        icon: <UserOutlined />,
        key: Constants.ROUTE_PATHS.USER_PROFILE,
      }
    );

    return items;
  };

  useEffect(() => {
    const pathname = location.pathname;

    setSelectedKeys(pathname);

    //lastSubscribedTopic.current = pathname;
    /*
    const subscribeTopicMessage = () =>
      webSocketContext.SendSocketMessage(
        SentMessagesCommands.SubscribeToTopic,
        {
          topic: pathname,
          browserTabSession: BrowserTabSession,
        }
      );

    subscribeTopicMessage();

    const handleSubscribeTopicMessage = () => subscribeTopicMessage();

    document.addEventListener(
      wsConnectionCustomEventName,
      handleSubscribeTopicMessage
    ); */

    // auto close sideMenu on mobile
    // this will prevent to auto close sideMenu on first render as the useEffects will be called after the first render
    if (contentFirstRender.current) {
      contentFirstRender.current = false;
      //return;
    } else if (
      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      ) ||
      document.body.clientWidth < BreakpointLgWidth
    ) {
      setIsSideMenuCollapsed(true);
    }
    /*
    return () =>
      document.removeEventListener(
        wsConnectionCustomEventName,
        handleSubscribeTopicMessage
      ); */
  }, [location.pathname]);

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        flexDirection: "column",
        height: "100%",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          overflowY: "hidden",
        }}
      >
        <div>
          <div className="CompanyNameContainer">
            <span>C</span>
            <span>O</span>
            <span>M</span>
            <span>P</span>
            <span>A</span>
            <span>N</span>
            <span>Y</span>
          </div>

          <div className="Subtitle">Dashboard</div>
        </div>

        <div style={{ overflowY: "scroll" }}>
          <Menu
            mode="inline"
            onClick={(item) => navigate(item.key)}
            theme="light"
            selectedKeys={[selectedKeys]}
            items={getFirstMenuItems()}
            defaultOpenKeys={["/website"]}
          />
        </div>
      </div>

      <div>
        <Divider style={{ margin: 0 }} />

        <Menu
          selectable={true}
          selectedKeys={[selectedKeys]}
          mode="vertical"
          onClick={(item) => navigate(item.key)}
          items={getSecondMenuItems()}
        />
      </div>
    </div>
  );
}