@ebubekirylmaz/link-test 1.0.0

package/src/components/nav-section/horizontal/nav-item.jsx

@@ -0,0 +1,224 @@
+import Box from "@mui/material/Box";
+import Iconify from "../../Iconify";
+import Link from "@mui/material/Link";
+import ListItemButton from "@mui/material/ListItemButton";
+import React from "react";
+import { RouterLink } from "../../../routes/components";
+import Tooltip from "@mui/material/Tooltip";
+import { forwardRef } from "react";
+import { styled } from "@mui/material/styles";
+
+const NavItem = forwardRef(
+  (
+    {
+      title,
+      path,
+      icon,
+      info,
+      disabled,
+      caption,
+      roles,
+      //
+      open,
+      depth,
+      active,
+      hasChild,
+      externalLink,
+      currentRole = "admin",
+      ...other
+    },
+    ref
+  ) => {
+    const subItem = depth !== 1;
+
+    const renderContent = (
+      <StyledNavItem
+        ref={ref}
+        open={open}
+        depth={depth}
+        active={active}
+        disabled={disabled}
+        {...other}
+      >
+        {icon && (
+          <Box component="span" className="icon">
+            <Iconify width={16} icon={icon} />
+          </Box>
+        )}
+
+        {title && (
+          <Box component="span" className="label">
+            {title}
+          </Box>
+        )}
+
+        {caption && (
+          <Tooltip title={caption} arrow>
+            <Iconify width={16} icon="eva:info-outline" className="caption" />
+          </Tooltip>
+        )}
+
+        {info && (
+          <Box component="span" className="info">
+            {info}
+          </Box>
+        )}
+
+        {hasChild && (
+          <Iconify
+            width={16}
+            className="arrow"
+            icon={
+              subItem
+                ? "eva:arrow-ios-forward-fill"
+                : "eva:arrow-ios-downward-fill"
+            }
+          />
+        )}
+      </StyledNavItem>
+    );
+
+    if (roles && !roles.includes(`${currentRole}`)) {
+      return null;
+    }
+
+    if (externalLink)
+      return (
+        <Link
+          href={path}
+          target="_blank"
+          rel="noopener"
+          color="inherit"
+          underline="none"
+          sx={{
+            ...(disabled && {
+              cursor: "default",
+            }),
+          }}
+        >
+          {renderContent}
+        </Link>
+      );
+
+    return (
+      <Link
+        component={RouterLink}
+        href={path}
+        color="inherit"
+        underline="none"
+        sx={{
+          ...(disabled && {
+            cursor: "default",
+          }),
+        }}
+      >
+        {renderContent}
+      </Link>
+    );
+  }
+);
+
+export default NavItem;
+
+const StyledNavItem = styled(ListItemButton, {
+  shouldForwardProp: (prop) => prop !== "active",
+})(({ active, open, depth, theme }) => {
+  const subItem = depth !== 1;
+
+  const opened = open && !active;
+
+  const baseStyles = {
+    item: {
+      ...theme.typography.body2,
+      borderRadius: 6,
+      color: theme.palette.text.secondary,
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+    icon: {
+      width: 22,
+      height: 22,
+      flexShrink: 0,
+      marginRight: theme.spacing(1),
+    },
+    label: {
+      textTransform: "capitalize",
+    },
+    caption: {
+      marginLeft: theme.spacing(0.75),
+      color: theme.palette.text.disabled,
+    },
+    info: {
+      display: "inline-flex",
+      marginLeft: theme.spacing(0.75),
+    },
+    arrow: {
+      marginLeft: theme.spacing(0.75),
+    },
+  };
+
+  return {
+    ...(!subItem && {
+      ...baseStyles.item,
+      minHeight: 32,
+      flexShrink: 0,
+      padding: theme.spacing(0, 0.75),
+      "& .icon": {
+        ...baseStyles.icon,
+      },
+      "& .label": {
+        ...baseStyles.label,
+        whiteSpace: "nowrap",
+      },
+      "& .caption": {
+        ...baseStyles.caption,
+      },
+      "& .info": {
+        ...baseStyles.info,
+      },
+      "& .arrow": {
+        ...baseStyles.arrow,
+      },
+      ...(active && {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.action.selected,
+        fontWeight: theme.typography.fontWeightSemiBold,
+      }),
+      ...(opened && {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.action.hover,
+      }),
+    }),
+
+    ...(subItem && {
+      ...baseStyles.item,
+      minHeight: 34,
+      padding: theme.spacing(0, 1),
+      "& .icon": {
+        ...baseStyles.icon,
+      },
+      "& .label": {
+        ...baseStyles.label,
+        flexGrow: 1,
+      },
+      "& .caption": {
+        ...baseStyles.caption,
+      },
+      "& .info": {
+        ...baseStyles.info,
+      },
+      "& .arrow": {
+        ...baseStyles.arrow,
+        marginRight: theme.spacing(-0.5),
+      },
+      ...(active && {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.action.selected,
+        fontWeight: theme.typography.fontWeightSemiBold,
+      }),
+      ...(opened && {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.action.hover,
+      }),
+    }),
+  };
+});

package/src/components/nav-section/horizontal/nav-list.jsx

@@ -0,0 +1,113 @@
+import NavItem from "./nav-item";
+import Popover from "@mui/material/Popover";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import { useActiveLink } from "../../../routes/hooks";
+import { usePathname } from "../../../routes/hooks";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export default function NavList({ data, depth, slotProps }) {
+  const navRef = useRef(null);
+
+  const pathname = usePathname();
+
+  const active = useActiveLink(data.path, !!data.children);
+
+  const [openMenu, setOpenMenu] = useState(false);
+
+  useEffect(() => {
+    if (openMenu) {
+      handleCloseMenu();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  const handleOpenMenu = useCallback(() => {
+    if (data.children) {
+      setOpenMenu(true);
+    }
+  }, [data.children]);
+
+  const handleCloseMenu = useCallback(() => {
+    setOpenMenu(false);
+  }, []);
+  return (
+    <>
+      <NavItem
+        ref={navRef}
+        open={openMenu}
+        onMouseEnter={handleOpenMenu}
+        onMouseLeave={handleCloseMenu}
+        title={data.title}
+        path={data.path}
+        icon={data.icon}
+        info={data.info}
+        roles={data.roles}
+        caption={data.caption}
+        disabled={data.disabled}
+        depth={depth}
+        hasChild={!!data.children}
+        externalLink={data.path?.includes("http")}
+        currentRole={slotProps?.currentRole}
+        active={active}
+        className={active ? "active" : ""}
+        sx={depth === 1 ? slotProps?.rootItem : slotProps?.subItem}
+      />
+
+      {!!data.children && (
+        <Popover
+          disableScrollLock
+          open={openMenu}
+          anchorEl={navRef.current}
+          anchorOrigin={
+            depth === 1
+              ? { vertical: "bottom", horizontal: "left" }
+              : { vertical: "center", horizontal: "right" }
+          }
+          transformOrigin={
+            depth === 1
+              ? { vertical: "top", horizontal: "left" }
+              : { vertical: "center", horizontal: "left" }
+          }
+          slotProps={{
+            paper: {
+              onMouseEnter: handleOpenMenu,
+              onMouseLeave: handleCloseMenu,
+              sx: {
+                minWidth: 160,
+                ...(openMenu && {
+                  pointerEvents: "auto",
+                }),
+              },
+            },
+          }}
+          sx={{
+            pointerEvents: "none",
+          }}
+        >
+          <NavSubList
+            data={data.children}
+            depth={depth}
+            slotProps={slotProps}
+          />
+        </Popover>
+      )}
+    </>
+  );
+}
+
+function NavSubList({ data, depth, slotProps }) {
+  return (
+    <Stack spacing={0.5}>
+      {data.map((list) => (
+        <NavList
+          key={list.title}
+          data={list}
+          depth={depth + 1}
+          slotProps={slotProps}
+        />
+      ))}
+    </Stack>
+  );
+}

package/src/components/nav-section/horizontal/nav-section-horizontal.jsx

@@ -0,0 +1,41 @@
+import NavList from "./nav-list";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import { memo } from "react";
+
+function NavSectionHorizontal({ data, slotProps, sx, ...other }) {
+  return (
+    <Stack
+      component="nav"
+      id="nav-section-horizontal"
+      direction="row"
+      alignItems="center"
+      spacing={`${slotProps?.gap || 6}px`}
+      sx={{
+        mx: "auto",
+        ...sx,
+      }}
+      {...other}
+    >
+      {data.map((group, index) => (
+        <Group
+          key={group?.subheader || index}
+          items={group?.items}
+          slotProps={slotProps}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+export default memo(NavSectionHorizontal);
+
+function Group({ items, slotProps }) {
+  return (
+    <>
+      {items.map((list) => (
+        <NavList key={list.title} data={list} depth={1} slotProps={slotProps} />
+      ))}
+    </>
+  );
+}

package/src/components/nav-section/index.js

@@ -0,0 +1,3 @@
+export { default as NavSectionMini } from "./mini";
+export { default as NavSectionVertical } from "./vertical";
+export { default as NavSectionHorizontal } from "./horizontal";

package/src/components/nav-section/mini/index.js

@@ -0,0 +1 @@
+export { default } from "./nav-section-mini";

package/src/components/nav-section/mini/nav-item.jsx

@@ -0,0 +1,242 @@
+import Box from "@mui/material/Box";
+import Iconify from "../../Iconify";
+import Link from "@mui/material/Link";
+import ListItemButton from "@mui/material/ListItemButton";
+import React from "react";
+import { RouterLink } from "../../../routes/components";
+import Tooltip from "@mui/material/Tooltip";
+import { forwardRef } from "react";
+
+import { alpha, styled } from "@mui/material/styles";
+
+const NavItem = forwardRef(
+  (
+    {
+      title,
+      path,
+      icon,
+      info,
+      disabled,
+      caption,
+      roles,
+      //
+      open,
+      depth,
+      active,
+      hasChild,
+      externalLink,
+      currentRole = "admin",
+      ...other
+    },
+    ref
+  ) => {
+    const subItem = depth !== 1;
+    const renderContent = (
+      <StyledNavItem
+        disableGutters
+        ref={ref}
+        open={open}
+        depth={depth}
+        active={active}
+        disabled={disabled}
+        {...other}
+      >
+        {icon && (
+          <Box component="span" className="icon">
+            <Iconify width={16} icon={icon} />
+          </Box>
+        )}
+
+        {title && (
+          <Box component="span" className="label">
+            {title}
+          </Box>
+        )}
+
+        {caption && (
+          <Tooltip title={caption} arrow placement="right">
+            <Iconify width={16} icon="eva:info-outline" className="caption" />
+          </Tooltip>
+        )}
+
+        {info && subItem && (
+          <Box component="span" className="info">
+            {info}
+          </Box>
+        )}
+
+        {hasChild && (
+          <Iconify
+            width={16}
+            className="arrow"
+            icon="eva:arrow-ios-forward-fill"
+          />
+        )}
+      </StyledNavItem>
+    );
+
+    if (roles && !roles.includes(`${currentRole}`)) {
+      return null;
+    }
+
+    if (externalLink)
+      return (
+        <Link
+          href={path}
+          target="_blank"
+          rel="noopener"
+          color="inherit"
+          underline="none"
+          sx={{
+            width: 1,
+            ...(disabled && {
+              cursor: "default",
+            }),
+          }}
+        >
+          {renderContent}
+        </Link>
+      );
+
+    return (
+      <Link
+        component={RouterLink}
+        href={path}
+        color="inherit"
+        underline="none"
+        sx={{
+          width: 1,
+          ...(disabled && {
+            cursor: "default",
+          }),
+        }}
+      >
+        {renderContent}
+      </Link>
+    );
+  }
+);
+
+export default NavItem;
+
+const StyledNavItem = styled(ListItemButton, {
+  shouldForwardProp: (prop) => prop !== "active",
+})(({ active, open, depth, theme }) => {
+  const subItem = depth !== 1;
+
+  const opened = open && !active;
+
+  const lightMode = theme.palette.mode === "light";
+
+  const noWrapStyles = {
+    width: "100%",
+    maxWidth: "100%",
+    display: "block",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  };
+
+  const baseStyles = {
+    item: {
+      borderRadius: 6,
+      color: theme.palette.text.secondary,
+    },
+    icon: {
+      width: 22,
+      height: 22,
+      flexShrink: 0,
+    },
+    label: {
+      textTransform: "capitalize",
+    },
+    caption: {
+      color: theme.palette.text.disabled,
+    },
+  };
+
+  return {
+    ...(!subItem && {
+      ...baseStyles.item,
+      fontSize: 10,
+      minHeight: 56,
+      lineHeight: "16px",
+      textAlign: "center",
+      flexDirection: "column",
+      justifyContent: "center",
+      padding: theme.spacing(0.5),
+      margin: theme.spacing(0, 0.5),
+      fontWeight: theme.typography.fontWeightSemiBold,
+      "& .icon": {
+        ...baseStyles.icon,
+      },
+      "& .label": {
+        ...noWrapStyles,
+        ...baseStyles.label,
+        marginTop: theme.spacing(0.5),
+      },
+      "& .caption": {
+        ...baseStyles.caption,
+        top: 11,
+        left: 6,
+        position: "absolute",
+      },
+      "& .arrow": {
+        top: 11,
+        right: 6,
+        position: "absolute",
+      },
+      ...(active && {
+        fontWeight: theme.typography.fontWeightBold,
+        backgroundColor: alpha(theme.palette.primary.main, 0.08),
+        color: lightMode
+          ? theme.palette.primary.main
+          : theme.palette.primary.light,
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.primary.main, 0.16),
+        },
+      }),
+      ...(opened && {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.action.hover,
+      }),
+    }),
+
+    ...(subItem && {
+      ...baseStyles.item,
+      ...theme.typography.body2,
+      minHeight: 34,
+      padding: theme.spacing(0, 1),
+      fontWeight: theme.typography.fontWeightMedium,
+      "& .icon": {
+        ...baseStyles.icon,
+        marginRight: theme.spacing(1),
+      },
+      "& .label": {
+        ...baseStyles.label,
+        flexGrow: 1,
+      },
+      "& .caption": {
+        ...baseStyles.caption,
+        marginLeft: theme.spacing(0.75),
+      },
+      "& .info": {
+        display: "inline-flex",
+        marginLeft: theme.spacing(0.75),
+      },
+      "& .arrow": {
+        marginLeft: theme.spacing(0.75),
+        marginRight: theme.spacing(-0.5),
+      },
+      ...(active && {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.action.selected,
+        fontWeight: theme.typography.fontWeightSemiBold,
+      }),
+      ...(opened && {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.action.hover,
+      }),
+    }),
+  };
+});