@campxdev/react-blueprint 1.1.5 → 1.1.7

package/src/components/Navigation/Sidebar/Components.tsx

@@ -0,0 +1,97 @@
+import { Box, Stack } from "@mui/material";
+import { useMemo } from "react";
+import { Icons, Tooltip, Typography } from "../../export";
+import {
+  DefaultButtonProps,
+  InternalMenuButtonProps,
+  SubMenuButtonProps,
+  TooltipIconProps,
+} from "./interfaces";
+import { createSidebarStyles } from "./styles";
+
+export const TooltipIcon = ({ name, icon }: TooltipIconProps) => {
+  return (
+    <Tooltip title={<Typography variant="label2">{name}</Typography>}>
+      {icon}
+    </Tooltip>
+  );
+};
+
+export const DefaultButton = ({
+  name,
+  icon,
+  collapsed,
+}: DefaultButtonProps) => {
+  const { StyledListItemButton, StyledListItemIcon } = useMemo(
+    () => createSidebarStyles(collapsed),
+    [collapsed]
+  );
+
+  return (
+    <StyledListItemButton collapsed={collapsed}>
+      <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
+      <Typography variant="button1">{name}</Typography>
+    </StyledListItemButton>
+  );
+};
+
+export const InternalMenuButton = ({
+  name,
+  icon,
+  collapsed,
+}: InternalMenuButtonProps) => {
+  const { StyledListItemButton, StyledListItemIcon, HoverIcon } = useMemo(
+    () => createSidebarStyles(collapsed),
+    [collapsed]
+  );
+
+  return (
+    <StyledListItemButton collapsed={collapsed}>
+      <Stack
+        width={"100%"}
+        direction="row"
+        alignItems={"center"}
+        justifyContent={"space-between"}
+      >
+        <Stack direction="row" alignItems={"center"}>
+          <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
+          <Typography variant="button1">{name}</Typography>
+        </Stack>
+        <HoverIcon display={"flex"} className="hoverIcon">
+          <Icons.RedoIcon size={18} />
+        </HoverIcon>
+      </Stack>
+    </StyledListItemButton>
+  );
+};
+
+export const SubMenuButton = ({
+  name,
+  icon,
+  expanded,
+  collapsed,
+}: SubMenuButtonProps) => {
+  const { StyledListItemButton, StyledListItemIcon } = useMemo(
+    () => createSidebarStyles(collapsed),
+    [collapsed]
+  );
+
+  return (
+    <StyledListItemButton collapsed={collapsed}>
+      <Stack
+        width={"100%"}
+        direction="row"
+        alignItems={"center"}
+        justifyContent={"space-between"}
+      >
+        <Stack direction="row" alignItems={"center"}>
+          <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
+          <Typography variant="button1">{name}</Typography>
+        </Stack>
+        <Box display={"flex"}>
+          {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
+        </Box>
+      </Stack>
+    </StyledListItemButton>
+  );
+};

package/src/components/Navigation/Sidebar/MenuItem.tsx

@@ -1,104 +1,47 @@
-import { Box, Stack } from "@mui/material";
-import { motion } from "framer-motion";
-import { useState } from "react";
-import { useMatch, useResolvedPath } from "react-router-dom";
-import { Icons, Tooltip, Typography } from "../../export";
-import { SidebarDropdownItem } from "./DropdownItem";
-import { MenuItemProps } from "./interfaces";
-import { createSidebarStyles } from "./styles";
+import { Stack } from '@mui/material';
+import { motion } from 'framer-motion';
+import { useMemo, useState } from 'react';
+import { useMatch, useResolvedPath } from 'react-router-dom';
+import { SideMenuItemProps } from '../exports';
+import {
+  DefaultButton,
+  InternalMenuButton,
+  SubMenuButton,
+  TooltipIcon,
+} from './Components';
+import { InternalMenuClickHandlerProps } from './interfaces';
+import { createSidebarStyles } from './styles';
+import { SidebarSubMenuItem } from './SubMenuItem';
 
 export const SideBarMenuItem = ({
-  menuItem,
   index,
   collapsed,
-  newMenuClickHandler,
+  menuItem,
+  currentMenuPath,
+  internalMenuClickHandler,
 }: {
-  menuItem: MenuItemProps;
   index: number;
   collapsed: boolean;
-  newMenuClickHandler: (newMenu: MenuItemProps[], newMenuTitle: string) => void;
+  currentMenuPath: string | null;
+  menuItem: SideMenuItemProps;
+  internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
 }) => {
-  const {
-    StyledListItem,
-    StyledLinkButton,
-    StyledListItemButton,
-    StyledListItemIcon,
-    StyledDropdownButton,
-    HoverIcon,
-  } = createSidebarStyles(collapsed);
+  const { name, path, icon: Icon, menu: internalMenu, subMenu } = menuItem;
 
-  const { name, path, icon: Icon, menu: newMenu, dropdownMenu } = menuItem;
+  const newPath = currentMenuPath ? `${currentMenuPath}${path}` : path;
 
-  let resolved = useResolvedPath(path);
+  let resolved = useResolvedPath(newPath);
   let match = useMatch({ path: resolved.pathname, end: false });
 
   let [expanded, setExpanded] = useState(false);
-  const dropdownMenuClickHandler = () => {
+  const subMenuButtonClickHandler = () => {
     setExpanded(!expanded);
   };
 
-  const DrawerCollapsedTile = () => {
-    return (
-      <Tooltip title={<Typography variant="label2">{name}</Typography>}>
-        {Icon}
-      </Tooltip>
-    );
-  };
-
-  const NewMenuTile = () => {
-    return (
-      <StyledListItemButton collapsed={collapsed}>
-        <Stack
-          width={"100%"}
-          direction="row"
-          alignItems={"center"}
-          justifyContent={"space-between"}
-        >
-          <Stack direction="row" alignItems={"center"}>
-            <StyledListItemIcon collapsed={collapsed}>
-              {Icon ? Icon : <Icons.HomeIcon />}
-            </StyledListItemIcon>
-            <Typography variant="button1">{name}</Typography>
-          </Stack>
-          <HoverIcon display={"flex"} className="hoverIcon">
-            <Icons.RedoIcon size={18} />
-          </HoverIcon>
-        </Stack>
-      </StyledListItemButton>
-    );
-  };
-
-  const DropdownMenuTile = () => {
-    return (
-      <StyledListItemButton collapsed={collapsed}>
-        <Stack
-          width={"100%"}
-          direction="row"
-          alignItems={"center"}
-          justifyContent={"space-between"}
-        >
-          <Stack direction="row" alignItems={"center"}>
-            <StyledListItemIcon collapsed={collapsed}>
-              {Icon ? Icon : <Icons.HomeIcon />}
-            </StyledListItemIcon>
-            <Typography variant="button1">{name}</Typography>
-          </Stack>
-          <Box display={"flex"}>
-            {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
-          </Box>
-        </Stack>
-      </StyledListItemButton>
-    );
-  };
-
-  const DefaultTile = () => {
-    return (
-      <StyledListItemButton collapsed={collapsed}>
-        <StyledListItemIcon collapsed={collapsed}>{Icon}</StyledListItemIcon>
-        <Typography variant="button1">{name}</Typography>
-      </StyledListItemButton>
-    );
-  };
+  const { StyledListItem, StyledLinkButton, StyledSubMenuButton } = useMemo(
+    () => createSidebarStyles(collapsed),
+    [collapsed],
+  );
 
   return (
     <motion.div
@@ -107,41 +50,70 @@ export const SideBarMenuItem = ({
       animate={{ opacity: 1 }}
       transition={{ duration: 1 }}
     >
-      {newMenu && (
+      {internalMenu && internalMenu.length > 0 && (
         <StyledListItem key={index} disablePadding className="listItem">
-          <StyledDropdownButton
+          <StyledSubMenuButton
             match={match}
-            onClick={() => newMenuClickHandler(newMenu, name)}
+            onClick={() =>
+              internalMenuClickHandler({
+                menuTitle: name,
+                menuPath: newPath,
+                internalMenu,
+              })
+            }
           >
-            {collapsed ? <DrawerCollapsedTile /> : <NewMenuTile />}
-          </StyledDropdownButton>
+            {collapsed ? (
+              <TooltipIcon name={name} icon={Icon} />
+            ) : (
+              <InternalMenuButton
+                name={name}
+                icon={Icon}
+                collapsed={collapsed}
+              />
+            )}
+          </StyledSubMenuButton>
         </StyledListItem>
       )}
-      {dropdownMenu && dropdownMenu.length > 0 && (
+      {subMenu && subMenu.length > 0 && (
         <StyledListItem key={index} disablePadding className="listItem">
-          <StyledDropdownButton
+          <StyledSubMenuButton
             match={match}
-            onClick={() => dropdownMenuClickHandler()}
+            onClick={() => subMenuButtonClickHandler()}
           >
-            {collapsed ? <DrawerCollapsedTile /> : <DropdownMenuTile />}
-          </StyledDropdownButton>
+            {collapsed ? (
+              <TooltipIcon name={name} icon={Icon} />
+            ) : (
+              <SubMenuButton
+                name={name}
+                icon={Icon}
+                expanded={expanded}
+                collapsed={collapsed}
+              />
+            )}
+          </StyledSubMenuButton>
         </StyledListItem>
       )}
-      {expanded && dropdownMenu && dropdownMenu.length > 0 && (
+      {expanded && !collapsed && subMenu && subMenu.length > 0 && (
         <Stack>
-          {dropdownMenu?.map((item: any, index: number) => (
-            <SidebarDropdownItem
-              dropdownItem={item}
-              collapsed={collapsed}
+          {subMenu?.map((item: any, index: number) => (
+            <SidebarSubMenuItem
+              key={index}
               index={index}
+              collapsed={collapsed}
+              subMenuItem={item}
+              subMenuButtonPath={newPath}
             />
           ))}
         </Stack>
       )}
-      {!newMenu && !dropdownMenu && (
-        <StyledListItem key={path} disablePadding className="listItem">
-          <StyledLinkButton to={path} match={match}>
-            {collapsed ? <DrawerCollapsedTile /> : <DefaultTile />}
+      {!internalMenu && !subMenu && (
+        <StyledListItem key={index} disablePadding className="listItem">
+          <StyledLinkButton to={newPath} match={match}>
+            {collapsed ? (
+              <TooltipIcon name={name} icon={Icon} />
+            ) : (
+              <DefaultButton name={name} icon={Icon} collapsed={collapsed} />
+            )}
           </StyledLinkButton>
         </StyledListItem>
       )}

package/src/components/Navigation/Sidebar/Sidebar.tsx

@@ -1,76 +1,162 @@
-import { motion } from "framer-motion";
-import { useMemo, useState } from "react";
-import { CampxFullLogoIcon } from "../../Assets/Icons/IconComponents/CampxFullLogoIcon";
-import { CampxIcon } from "../../Assets/Icons/IconComponents/CampxIcon";
-import { LeftIcon } from "../../Assets/Icons/IconComponents/LeftIcon";
-import { RightIcon } from "../../Assets/Icons/IconComponents/RightIcon";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Icons } from "../../export";
-import { SideBarMenuItem } from "./MenuItem";
-import { MenuHistory, MenuItemProps } from "./interfaces";
-import { createSidebarStyles } from "./styles";
+import { motion } from 'framer-motion';
+import { ReactElement, useEffect, useMemo, useState } from 'react';
+import { CampxFullLogoIcon } from '../../Assets/Icons/IconComponents/CampxFullLogoIcon';
+import { CampxIcon } from '../../Assets/Icons/IconComponents/CampxIcon';
+import { LeftIcon } from '../../Assets/Icons/IconComponents/LeftIcon';
+import { RightIcon } from '../../Assets/Icons/IconComponents/RightIcon';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Icons } from '../../export';
+import { SideBarMenuItem } from './MenuItem';
+import {
+  GetActiveMenuProps,
+  InternalMenuClickHandlerProps,
+  MenuState,
+} from './interfaces';
+import { createSidebarStyles } from './styles';
 
 export const Sidebar = ({
   menu,
   collapsed,
   setCollapsed,
 }: {
-  menu: MenuItemProps[];
+  menu: SideMenuItemProps[];
   collapsed: boolean;
   setCollapsed: any;
 }) => {
-  const [history, setHistory] = useState<MenuHistory[]>([]);
-  const [currentMenu, setCurrentMenu] = useState<MenuItemProps[] | null>(menu);
-  const [currentMenuTitle, setCurrentMenuTitle] = useState<string | null>(null);
   const [menuPosition, setMenuPosition] = useState(0);
 
-  const newMenuClickHandler = (
-    newMenu: MenuItemProps[],
-    newMenuTitle: string
-  ) => {
-    if (newMenu) {
+  const [history, setHistory] = useState<MenuState[]>([]);
+  const [currentMenuState, setCurrentMenuState] = useState<MenuState>({
+    menu: menu,
+    title: null,
+    path: null,
+  });
+
+  const toggleSidebar = () => {
+    setMenuPosition(0);
+    setCollapsed(!collapsed);
+  };
+
+  const internalMenuClickHandler = ({
+    menuTitle,
+    menuPath,
+    internalMenu,
+  }: InternalMenuClickHandlerProps) => {
+    if (menuTitle && menuPath && internalMenu) {
       setHistory((prev) => [
         ...prev,
-        { menu: currentMenu, menuTitle: currentMenuTitle },
+        {
+          title: currentMenuState.title,
+          path: currentMenuState.path,
+          menu: currentMenuState.menu,
+        },
       ]);
 
-      setCurrentMenu(newMenu);
+      setCurrentMenuState({
+        title: menuTitle,
+        path: menuPath,
+        menu: internalMenu,
+      });
+
       setMenuPosition(collapsed ? 60 : 250);
-      setCurrentMenuTitle(newMenuTitle);
     }
   };
 
-  const backClickHandler = () => {
+  const previousMenuClickHandler = () => {
     const prev = history && history.length > 0 && history.pop();
 
-    if (prev) {
-      setCurrentMenu(prev.menu);
-      setCurrentMenuTitle(prev.menuTitle);
+    if (prev && prev.menu) {
+      setCurrentMenuState({
+        menu: prev.menu,
+        title: prev.title,
+        path: prev.path,
+      });
       setHistory([...history]);
       setMenuPosition(collapsed ? -60 : -250);
     }
   };
 
-  const toggleSidebar = () => {
-    setMenuPosition(0);
-    setCollapsed(!collapsed);
+  const getActiveMenu = ({
+    menu,
+    pathArray,
+    previousMenuState,
+  }: GetActiveMenuProps): MenuState => {
+    setHistory((prevHistory) => [
+      ...prevHistory,
+      {
+        title: previousMenuState?.title,
+        path: previousMenuState?.path,
+        menu: previousMenuState.menu,
+      },
+    ]);
+
+    const item = menu.find((item: any) => item.path === `/${pathArray[0]}`);
+
+    if (item) {
+      if (!item.menu) {
+        return previousMenuState;
+      } else if (pathArray.length > 1) {
+        return getActiveMenu({
+          menu: item.menu,
+          pathArray: pathArray.slice(1),
+          previousMenuState: {
+            title: item.name,
+            path: previousMenuState.path
+              ? previousMenuState.path + item.path
+              : item.path,
+            menu: item.menu,
+          },
+        });
+      } else {
+        return {
+          title: item.name,
+          path: previousMenuState.path
+            ? previousMenuState.path + item.path
+            : item.path,
+          menu: item.menu,
+        };
+      }
+    } else {
+      return previousMenuState;
+    }
   };
 
+  useEffect(() => {
+    const currentPathArray = window.location.pathname.split('/');
+
+    if (currentPathArray.length > 2) {
+      currentPathArray.splice(0, 2);
+      currentPathArray.pop();
+    }
+
+    const activeMenu = getActiveMenu({
+      menu: currentMenuState.menu,
+      pathArray: currentPathArray,
+      previousMenuState: currentMenuState,
+    });
+
+    setCurrentMenuState({
+      title: activeMenu?.title,
+      path: activeMenu.path,
+      menu: activeMenu?.menu,
+    });
+  }, []);
+
   const {
     StyledSidebarContainer,
     StyledLogoArea,
     StyledMenuBar,
     StyledCollapsibleSection,
     StyledMenuHeaderButton,
-  } = useMemo(() => createSidebarStyles(collapsed), [collapsed]);
+  } = useMemo(() => createSidebarStyles(collapsed), [collapsed, menuPosition]);
 
   return (
     <motion.div
-      animate={{ width: collapsed ? "60px" : "250px" }}
-      transition={{ duration: 0.3, ease: "circOut" }}
+      animate={{ width: collapsed ? '60px' : '250px' }}
+      transition={{ duration: 0.3, ease: 'circOut' }}
       style={{
-        margin: "12px",
-        height: "calc(100vh - 24px)",
+        margin: '12px',
+        height: 'calc(100vh - 24px)',
       }}
     >
       <StyledSidebarContainer
@@ -78,48 +164,44 @@ export const Sidebar = ({
         direction="column"
         className="sidebarContainer"
       >
-        <motion.div
-          key="collapsed"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.5 }}
-        >
-          <StyledLogoArea collapsed={collapsed}>
-            {collapsed ? <CampxIcon size={32} /> : <CampxFullLogoIcon />}
-          </StyledLogoArea>
-        </motion.div>
+        <StyledLogoArea collapsed={collapsed}>
+          {collapsed ? <CampxIcon size={32} /> : <CampxFullLogoIcon />}
+        </StyledLogoArea>
 
         <motion.div
           initial={{ x: menuPosition }}
           animate={{ x: 0 }}
           transition={{
             duration: 0.3,
-            ease: menuPosition ? "circOut" : "circIn",
+            ease: menuPosition ? 'circOut' : 'circIn',
           }}
           style={{
-            height: "100%",
+            height: '100%',
           }}
         >
           <StyledMenuBar>
-            {!collapsed && currentMenuTitle && (
+            {!collapsed && currentMenuState.title && (
               <StyledMenuHeaderButton
                 direction="row"
-                onClick={() => backClickHandler()}
+                onClick={() => previousMenuClickHandler()}
               >
                 <Icons.ArrowBackIcon size={20} />
 
-                <Typography variant="button1">{currentMenuTitle}</Typography>
+                <Typography variant="button1">
+                  {currentMenuState.title}
+                </Typography>
               </StyledMenuHeaderButton>
             )}
-            {currentMenu &&
-              currentMenu.length > 0 &&
-              currentMenu?.map((item: any, index: number) => (
+            {currentMenuState.menu &&
+              currentMenuState.menu.length > 0 &&
+              currentMenuState.menu?.map((item: any, index: number) => (
                 <SideBarMenuItem
+                  currentMenuPath={currentMenuState.path}
                   menuItem={item}
                   index={index}
                   key={index}
                   collapsed={collapsed}
-                  newMenuClickHandler={newMenuClickHandler}
+                  internalMenuClickHandler={internalMenuClickHandler}
                 />
               ))}
           </StyledMenuBar>
@@ -135,4 +217,17 @@ export const Sidebar = ({
   );
 };
 
-export default Sidebar;
+export interface SideMenuItemProps {
+  name: string;
+  path: string;
+  icon: ReactElement;
+  permissionKey?: string;
+  subMenu?: SubMenuItemProps[];
+  menu?: SideMenuItemProps[]; // internalMenu
+}
+
+export interface SubMenuItemProps {
+  name: string;
+  path: string;
+  permissionKey?: string;
+}

package/src/components/Navigation/Sidebar/SubMenuItem.tsx

@@ -0,0 +1,34 @@
+import { useMatch, useResolvedPath } from 'react-router-dom';
+import { SubMenuItemProps, Typography } from '../../export';
+import { createSidebarStyles } from './styles';
+
+export const SidebarSubMenuItem = ({
+  index,
+  collapsed,
+  subMenuItem,
+  subMenuButtonPath,
+}: {
+  index: number;
+  collapsed: boolean;
+  subMenuItem: SubMenuItemProps;
+  subMenuButtonPath: string;
+}) => {
+  const { name, path } = subMenuItem;
+
+  const newPath = `${subMenuButtonPath}${path}`;
+
+  let resolved = useResolvedPath(newPath);
+  let match = useMatch({ path: resolved.pathname, end: false });
+
+  const { StyledListItem, StyledLinkButton, StyledListItemButton } = createSidebarStyles(collapsed);
+
+  return (
+    <StyledListItem key={index} disablePadding className="listItem">
+      <StyledLinkButton to={newPath} match={match}>
+        <StyledListItemButton collapsed={collapsed}>
+          <Typography variant="button1">{name}</Typography>
+        </StyledListItemButton>
+      </StyledLinkButton>
+    </StyledListItem>
+  );
+};