@ebubekirylmaz/link-test 1.0.0

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

@@ -0,0 +1,107 @@
+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={{ vertical: "center", horizontal: "right" }}
+          transformOrigin={{ vertical: "center", horizontal: "left" }}
+          slotProps={{
+            paper: {
+              onMouseEnter: handleOpenMenu,
+              onMouseLeave: handleCloseMenu,
+              sx: {
+                mt: 0.5,
+                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/mini/nav-section-mini.jsx

@@ -0,0 +1,35 @@
+import NavList from "./nav-list";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import { memo } from "react";
+
+function NavSectionMini({ data, slotProps, ...other }) {
+  return (
+    <Stack
+      component="nav"
+      id="nav-section-mini"
+      spacing={`${slotProps?.gap || 4}px`}
+      {...other}
+    >
+      {data.map((group, index) => (
+        <Group
+          key={group.subheader || index}
+          items={group.items}
+          slotProps={slotProps}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+export default memo(NavSectionMini);
+
+function Group({ items, slotProps }) {
+  return (
+    <>
+      {items.map((list) => (
+        <NavList key={list.title} data={list} depth={1} slotProps={slotProps} />
+      ))}
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,294 @@
+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,
+      external,
+      //
+      open,
+      depth,
+      active,
+      hasChild,
+      externalLink,
+      currentRole = "admin",
+      ...other
+    },
+    ref
+  ) => {
+    const subItem = depth !== 1;
+
+    const renderContent = (
+      <StyledNavItem
+        ref={ref}
+        disableGutters
+        open={open}
+        depth={depth}
+        active={active}
+        disabled={disabled}
+        {...other}
+      >
+        {!subItem && icon && (
+          <Box component="span" className="icon">
+            <Iconify width={24} icon={icon} />
+          </Box>
+        )}
+
+        {subItem && icon ? (
+          <Box component="span" className="icon">
+            <Iconify width={24} icon={icon} />
+          </Box>
+        ) : (
+          <Box component="span" className="sub-icon" />
+        )}
+
+        {title && (
+          <Box
+            component="span"
+            sx={{
+              flex: "1 1 auto",
+              minWidth: 0,
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <Box component="span" className="label">
+              {title}
+            </Box>
+            {external && (
+              <Iconify
+                icon="mdi:external-link"
+                width={22}
+                style={{ marginLeft: 4 }}
+              />
+            )}
+            {caption && (
+              <Tooltip title={caption} placement="top-start">
+                <Box component="span" className="caption">
+                  {caption}
+                </Box>
+              </Tooltip>
+            )}
+          </Box>
+        )}
+
+        {info && (
+          <Box component="span" className="info">
+            {info}
+          </Box>
+        )}
+
+        {hasChild && (
+          <Iconify
+            width={16}
+            className="arrow"
+            icon={
+              open
+                ? "eva:arrow-ios-downward-fill"
+                : "eva:arrow-ios-forward-fill"
+            }
+          />
+        )}
+      </StyledNavItem>
+    );
+
+    if (roles && !roles.includes(`${currentRole}`)) {
+      return null;
+    }
+
+    if (hasChild) {
+      return renderContent;
+    }
+
+    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 deepSubItem = Number(depth) > 2;
+
+  const noWrapStyles = {
+    width: "100%",
+    maxWidth: "100%",
+    display: "block",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  };
+
+  const baseStyles = {
+    item: {
+      marginBottom: 4,
+      borderRadius: 8,
+      color: theme.palette.text.secondary,
+      padding: theme.spacing(0.5, 1, 0.5, 1.5),
+    },
+    icon: {
+      width: 24,
+      height: 24,
+      flexShrink: 0,
+      marginRight: theme.spacing(2),
+    },
+    label: {
+      ...noWrapStyles,
+      ...theme.typography.body2,
+      textTransform: "capitalize",
+      fontWeight:
+        theme.typography[active ? "fontWeightSemiBold" : "fontWeightMedium"],
+    },
+    caption: {
+      ...noWrapStyles,
+      ...theme.typography.caption,
+      color: theme.palette.text.disabled,
+    },
+    info: {
+      display: "inline-flex",
+      marginLeft: theme.spacing(0.75),
+    },
+    arrow: {
+      flexShrink: 0,
+      marginLeft: theme.spacing(0.75),
+    },
+  };
+
+  return {
+    ...(!subItem && {
+      ...baseStyles.item,
+      minHeight: 44,
+      "& .icon": {
+        ...baseStyles.icon,
+      },
+      "& .sub-icon": {
+        display: "none",
+      },
+      "& .label": {
+        ...baseStyles.label,
+      },
+      "& .caption": {
+        ...baseStyles.caption,
+      },
+      "& .info": {
+        ...baseStyles.info,
+      },
+      "& .arrow": {
+        ...baseStyles.arrow,
+      },
+      ...(active && {
+        color:
+          theme.palette.mode === "light"
+            ? theme.palette.primary.main
+            : theme.palette.primary.light,
+        backgroundColor: alpha(theme.palette.primary.main, 0.08),
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.primary.main, 0.16),
+        },
+      }),
+      ...(opened && {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.action.hover,
+      }),
+    }),
+
+    ...(subItem && {
+      ...baseStyles.item,
+      minHeight: 36,
+      "& .icon": {
+        ...baseStyles.icon,
+      },
+      "& .sub-icon": {
+        ...baseStyles.icon,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        "&:before": {
+          content: '""',
+          width: 4,
+          height: 4,
+          borderRadius: "50%",
+          backgroundColor: theme.palette.text.disabled,
+          transition: theme.transitions.create(["transform"], {
+            duration: theme.transitions.duration.shorter,
+          }),
+          ...(active && {
+            transform: "scale(2)",
+            backgroundColor: theme.palette.primary.main,
+          }),
+        },
+      },
+      "& .label": {
+        ...baseStyles.label,
+      },
+      "& .caption": {
+        ...baseStyles.caption,
+      },
+      "& .info": {
+        ...baseStyles.info,
+      },
+      "& .arrow": {
+        ...baseStyles.arrow,
+      },
+      ...(active && {
+        color: theme.palette.text.primary,
+      }),
+    }),
+
+    ...(deepSubItem && {
+      paddingLeft: `${theme.spacing(Number(depth))} !important`,
+    }),
+  };
+});

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

@@ -0,0 +1,66 @@
+import Collapse from "@mui/material/Collapse";
+import NavItem from "./nav-item";
+import React from "react";
+import { useActiveLink } from "../../../routes/hooks";
+import { usePathname } from "../../../routes/hooks";
+
+import { useCallback, useEffect, useState } from "react";
+
+export default function NavList({ data, depth }) {
+  const pathname = usePathname();
+  const active = useActiveLink(data.path, !!data.children);
+  const [openMenu, setOpenMenu] = useState(active);
+  useEffect(() => {
+    if (!active) {
+      handleCloseMenu();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  const handleToggleMenu = useCallback(() => {
+    if (data?.children) {
+      setOpenMenu((prev) => !prev);
+    }
+  }, [data?.children]);
+
+  const handleCloseMenu = useCallback(() => {
+    setOpenMenu(false);
+  }, []);
+  return (
+    <>
+      <NavItem
+        open={openMenu}
+        onClick={handleToggleMenu}
+        title={data?.title}
+        path={data?.path}
+        icon={data?.icon}
+        info={data?.info}
+        roles={data?.roles}
+        caption={data?.caption}
+        disabled={data?.disabled}
+        external={data?.external}
+        depth={depth}
+        hasChild={!!data?.children}
+        externalLink={data?.path?.includes("http")}
+        active={active}
+        className={active ? "active" : ""}
+      />
+
+      {!!data.children && (
+        <Collapse in={openMenu} unmountOnExit>
+          <NavSubList data={data.children} depth={depth} />
+        </Collapse>
+      )}
+    </>
+  );
+}
+
+function NavSubList({ data, depth }) {
+  return (
+    <>
+      {data?.map((list) => (
+        <NavList key={list?.title} data={list} depth={depth + 1} />
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,74 @@
+import Collapse from "@mui/material/Collapse";
+import ListSubheader from "@mui/material/ListSubheader";
+import NavList from "./nav-list";
+import React from "react";
+import Stack from "@mui/material/Stack";
+
+import { memo, useCallback, useState } from "react";
+
+function NavSectionVertical({ data, slotProps, ...other }) {
+  return (
+    <>
+      <Stack component="nav" id="nav-section-vertical" {...other}>
+        {data.map((group, index) => (
+          <Group
+            key={group.subheader || index}
+            subheader={group.subheader}
+            items={group.items}
+            slotProps={slotProps}
+          />
+        ))}
+      </Stack>
+    </>
+  );
+}
+
+export default memo(NavSectionVertical);
+
+function Group({ subheader, items, slotProps }) {
+  const [open, setOpen] = useState(true);
+
+  const handleToggle = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  const renderContent = items?.map((list) => (
+    <NavList key={list.title} data={list} depth={1} slotProps={slotProps} />
+  ));
+
+  return (
+    <Stack sx={{ px: 2 }}>
+      {subheader ? (
+        <>
+          <ListSubheader
+            disableGutters
+            disableSticky
+            onClick={handleToggle}
+            sx={{
+              fontSize: 11,
+              cursor: "pointer",
+              typography: "overline",
+              display: "inline-flex",
+              color: "text.disabled",
+              mb: `${slotProps?.gap || 4}px`,
+              p: (theme) => theme.spacing(2, 1, 1, 1.5),
+              transition: (theme) =>
+                theme.transitions.create(["color"], {
+                  duration: theme.transitions.duration.shortest,
+                }),
+              "&:hover": {
+                color: "text.primary",
+              },
+              ...slotProps?.subheader,
+            }}
+          >
+            {subheader}
+          </ListSubheader>
+
+          <Collapse in={open}>{renderContent}</Collapse>
+        </>
+      ) : (
+        renderContent
+      )}
+    </Stack>
+  );
+}

package/src/components/scrollbar/index.js

@@ -0,0 +1 @@
+export { default } from "./scrollbar";

package/src/components/scrollbar/scrollbar.jsx

@@ -0,0 +1,39 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { forwardRef } from "react";
+
+import { StyledRootScrollbar, StyledScrollbar } from "./styles";
+
+const Scrollbar = forwardRef(({ children, sx, ...other }, ref) => {
+  const userAgent =
+    typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
+  const mobile =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      userAgent
+    );
+
+  if (mobile) {
+    return (
+      <Box ref={ref} sx={{ overflow: "auto", ...sx }} {...other}>
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <StyledRootScrollbar>
+      <StyledScrollbar
+        scrollableNodeProps={{
+          ref,
+        }}
+        clickOnTrack={false}
+        sx={sx}
+        {...other}
+      >
+        {children}
+      </StyledScrollbar>
+    </StyledRootScrollbar>
+  );
+});
+
+export default Scrollbar;

package/src/components/scrollbar/styles.js

@@ -0,0 +1,27 @@
+import SimpleBar from "simplebar-react";
+
+import { alpha, styled } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export const StyledRootScrollbar = styled("div")(() => ({
+  flexGrow: 1,
+  height: "100%",
+  overflow: "hidden",
+}));
+
+export const StyledScrollbar = styled(SimpleBar)(({ theme }) => ({
+  maxHeight: "100%",
+
+  "& .simplebar-scrollbar": {
+    "&:before": {
+      backgroundColor: alpha(theme.palette.grey[600], 0.48),
+    },
+    "&.simplebar-visible:before": {
+      opacity: 1,
+    },
+  },
+  "& .simplebar-mask": {
+    zIndex: "inherit",
+  },
+}));

package/src/components/search-not-found/index.js

@@ -0,0 +1 @@
+export { default } from "./search-not-found";

package/src/components/search-not-found/search-not-found.jsx

@@ -0,0 +1,29 @@
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+
+export default function SearchNotFound({ query, sx, ...other }) {
+  return query ? (
+    <Paper
+      sx={{
+        bgcolor: "unset",
+        textAlign: "center",
+        ...sx,
+      }}
+      {...other}
+    >
+      <Typography variant="h6" gutterBottom>
+        Not Found
+      </Typography>
+
+      <Typography variant="body2">
+        No results found for &nbsp;
+        <strong>&quot;{query}&quot;</strong>.
+        <br /> Try checking for typos or using complete words.
+      </Typography>
+    </Paper>
+  ) : (
+    <Typography variant="body2" sx={sx}>
+      Please enter keywords
+    </Typography>
+  );
+}

package/src/components/settings/context/index.js

@@ -0,0 +1,2 @@
+export { SettingsProvider } from "./settings-provider";
+export { useSettingsContext } from "./settings-context";

package/src/components/settings/context/settings-context.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+
+// ----------------------------------------------------------------------
+
+export const SettingsContext = createContext({});
+
+export const useSettingsContext = () => {
+  const context = useContext(SettingsContext);
+
+  if (!context)
+    throw new Error("useSettingsContext must be use inside SettingsProvider");
+
+  return context;
+};