@ebubekirylmaz/link-test 1.0.0

package/src/layouts/MainLayout/nav/mobile/nav-item.jsx

@@ -0,0 +1,90 @@
+import Box from "@mui/material/Box";
+import Iconify from "../../../../components/Iconify";
+import Link from "@mui/material/Link";
+import ListItemButton from "@mui/material/ListItemButton";
+import React from "react";
+import { RouterLink } from "../../../../routes/components";
+import { forwardRef } from "react";
+
+import { alpha, styled } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export const NavItem = forwardRef(
+  (
+    { title, path, icon, open, active, hasChild, externalLink, ...other },
+    ref
+  ) => {
+    const renderContent = (
+      <StyledNavItem ref={ref} open={open} active={active} {...other}>
+        <Box component="span" sx={{ mr: 2, display: "inline-flex" }}>
+          <Iconify width={16} icon={icon}></Iconify>
+        </Box>
+
+        <Box component="span" sx={{ flexGrow: 1 }}>
+          {title}
+        </Box>
+
+        {hasChild && (
+          <Iconify
+            width={16}
+            icon={
+              open
+                ? "eva:arrow-ios-downward-fill"
+                : "eva:arrow-ios-forward-fill"
+            }
+          />
+        )}
+      </StyledNavItem>
+    );
+
+    if (hasChild) {
+      return renderContent;
+    }
+
+    if (externalLink)
+      return (
+        <Link
+          href={path}
+          target="_blank"
+          rel="noopener"
+          color="inherit"
+          underline="none"
+        >
+          {renderContent}
+        </Link>
+      );
+
+    return (
+      <Link component={RouterLink} href={path} color="inherit" underline="none">
+        {renderContent}
+      </Link>
+    );
+  }
+);
+
+// ----------------------------------------------------------------------
+
+const StyledNavItem = styled(ListItemButton, {
+  shouldForwardProp: (prop) => prop !== "active",
+})(({ open, active, theme }) => {
+  const opened = open && !active;
+
+  return {
+    ...theme.typography.body2,
+    color: theme.palette.text.secondary,
+    fontWeight: theme.typography.fontWeightMedium,
+    height: 48,
+    ...(active && {
+      color: theme.palette.primary.main,
+      fontWeight: theme.typography.fontWeightSemiBold,
+      backgroundColor: alpha(theme.palette.primary.main, 0.08),
+      "&:hover": {
+        backgroundColor: alpha(theme.palette.primary.main, 0.16),
+      },
+    }),
+    ...(opened && {
+      backgroundColor: theme.palette.action.hover,
+    }),
+  };
+});

package/src/layouts/MainLayout/nav/mobile/nav-list.jsx

@@ -0,0 +1,72 @@
+import Collapse from "@mui/material/Collapse";
+import { NavItem } from "./nav-item";
+import { NavSectionVertical } from "../../../../components/nav-section";
+import React from "react";
+import { listItemButtonClasses } from "@mui/material/ListItemButton";
+import { stackClasses } from "@mui/material/Stack";
+import { useActiveLink } from "../../../../routes/hooks/use-active-link";
+
+import { useCallback, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+export default function NavList({ data }) {
+  const active = useActiveLink(data.path, !!data.children);
+
+  const [openMenu, setOpenMenu] = useState(false);
+
+  const handleToggleMenu = useCallback(() => {
+    if (data.children) {
+      setOpenMenu((prev) => !prev);
+    }
+  }, [data.children]);
+
+  return (
+    <>
+      <NavItem
+        open={openMenu}
+        onClick={handleToggleMenu}
+        //
+        title={data.title}
+        path={data.path}
+        icon={data.icon}
+        //
+        hasChild={!!data.children}
+        externalLink={data.path?.includes("http")}
+        //
+        active={active}
+      />
+
+      {!!data.children && (
+        <Collapse in={openMenu} unmountOnExit>
+          <NavSectionVertical
+            data={data.children}
+            slotProps={{
+              rootItem: {
+                minHeight: 36,
+              },
+            }}
+            sx={{
+              [`& .${stackClasses.root}`]: {
+                "&:last-of-type": {
+                  [`& .${listItemButtonClasses.root}`]: {
+                    height: 160,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                    bgcolor: "background.neutral",
+                    backgroundRepeat: "no-repeat",
+                    backgroundImage:
+                      "url(/assets/illustrations/illustration_dashboard.png)",
+                    "& .label": {
+                      display: "none",
+                    },
+                  },
+                },
+              },
+            }}
+          />
+        </Collapse>
+      )}
+    </>
+  );
+}

package/src/layouts/Page.jsx

@@ -0,0 +1,16 @@
+import { Helmet } from "react-helmet-async";
+import React from "react";
+
+function Page({ children, title }) {
+  return (
+    <>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>{title}</title>
+      </Helmet>
+      {children}
+    </>
+  );
+}
+
+export default Page;

package/src/layouts/SimpleLayout/SimpleLayout.jsx

@@ -0,0 +1,8 @@
+import { Outlet } from "react-router";
+import React from "react";
+
+export default function SimpleLayout() {
+  return (
+      <Outlet />
+  );
+}

package/src/layouts/SimpleLayout/index.js

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

package/src/layouts/TwoSideLayout/TwoSideLayout.jsx

@@ -0,0 +1,31 @@
+import Container from "@mui/material/Container";
+import Grid from "@mui/material/Unstable_Grid2";
+import React from "react";
+import Typography from "@mui/material/Typography";
+// ----------------------------------------------------------------------
+
+export default function TwoSideLayout({ rows, title }) {
+  const rowData = rows;
+
+  return (
+    <Container maxWidth="xl">
+      <Typography variant="h4" sx={{ mb: 5 }}>
+        {title}
+      </Typography>
+
+      {Object.values(rowData).map((array, index) => {
+        const eleman_sayisi = array.length;
+        const grid_sayisi = 12 / eleman_sayisi;
+        return (
+          <Grid container spacing={3} key={index}>
+            {array.map((component, i) => (
+              <Grid item xs={12} sm={6} md={grid_sayisi} key={i}>
+                {component}
+              </Grid>
+            ))}
+          </Grid>
+        );
+      })}
+    </Container>
+  );
+}

package/src/layouts/TwoSideLayout/index.js

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

package/src/layouts/auth/classic.jsx

@@ -0,0 +1,95 @@
+import Box from "@mui/material/Box";
+import Logo from "../../components/logo";
+import { Outlet } from "react-router";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { bgGradient } from "../../theme/css";
+import { useResponsive } from "../../hooks/use-responsive";
+
+import { alpha, useTheme } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export default function AuthClassicLayout({ image, title }) {
+  const theme = useTheme();
+
+  const mdUp = useResponsive("up", "md");
+
+  const renderLogo = (
+    <Logo
+      sx={{
+        zIndex: 9,
+        position: "absolute",
+        m: { xs: 2, md: 5 },
+      }}
+    />
+  );
+
+  const renderContent = (
+    <Stack
+      sx={{
+        width: 1,
+        mx: "auto",
+        justifyContent: "center",
+        maxWidth: 480,
+        px: { xs: 2, md: 8 },
+        pt: { xs: 15, md: 20 },
+        pb: { xs: 15, md: 0 },
+      }}
+    >
+      <Outlet />
+    </Stack>
+  );
+
+  const renderSection = (
+    <Stack
+      flexGrow={1}
+      spacing={10}
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        ...bgGradient({
+          color: alpha(
+            theme.palette.background.default,
+            theme.palette.mode === "light" ? 0.88 : 0.94
+          ),
+          imgUrl: "https://minimals.cc/assets/background/overlay_2.jpg",
+        }),
+      }}
+    >
+      <Typography variant="h3" sx={{ maxWidth: 480, textAlign: "center" }}>
+        {title || "Hi, Welcome back"}
+      </Typography>
+
+      <Box
+        component="img"
+        alt="auth"
+        src={image || "/assets/illustrations/illustration_dashboard.png"}
+        sx={{
+          maxWidth: {
+            xs: 480,
+            lg: 560,
+            xl: 720,
+          },
+        }}
+      />
+    </Stack>
+  );
+
+  return (
+    <Stack
+      component="main"
+      direction="row"
+      sx={{
+        minHeight: "100vh",
+      }}
+    >
+      {renderLogo}
+
+      {mdUp && renderSection}
+
+      {renderContent}
+    </Stack>
+  );
+}

package/src/layouts/auth/modern-compact.jsx

@@ -0,0 +1,51 @@
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Header from "../common/header-sim";
+import { Outlet } from "react-router";
+import React from "react";
+
+// ----------------------------------------------------------------------
+
+export default function AuthModernCompactLayout() {
+  return (
+    <>
+      <Header />
+
+      <Box
+        component="main"
+        sx={{
+          py: 12,
+          display: "flex",
+          minHeight: "100vh",
+          textAlign: "center",
+          px: { xs: 2, md: 0 },
+          position: "relative",
+          alignItems: "center",
+          justifyContent: "center",
+          "&:before": {
+            width: 1,
+            height: 1,
+            zIndex: -1,
+            content: "''",
+            opacity: 0.24,
+            position: "absolute",
+            backgroundSize: "cover",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center center",
+            backgroundImage: "url(/assets/background/overlay_4.jpg)",
+          },
+        }}
+      >
+        <Card
+          sx={{
+            py: 5,
+            px: 3,
+            maxWidth: 420,
+          }}
+        >
+          <Outlet />
+        </Card>
+      </Box>
+    </>
+  );
+}

package/src/layouts/auth/modern.jsx

@@ -0,0 +1,94 @@
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Logo from "../../components/logo";
+import { Outlet } from "react-router";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import { useResponsive } from "../../hooks/use-responsive";
+
+// ----------------------------------------------------------------------
+
+export default function AuthModernLayout({ image }) {
+  const mdUp = useResponsive("up", "md");
+
+  const renderContent = (
+    <Stack
+      sx={{
+        width: 1,
+        mx: "auto",
+        maxWidth: 480,
+        px: { xs: 2, md: 8 },
+        height: "100vh",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Logo
+        maxSize={200}
+        sx={{
+          mt: { xs: 2, md: 8 },
+          mb: { xs: 10, md: 8 },
+        }}
+      />
+
+      <Card
+        sx={{
+          py: { xs: 5, md: 0 },
+          px: { xs: 3, md: 0 },
+          boxShadow: { md: "none" },
+          overflow: { md: "unset" },
+          bgcolor: { md: "background.default" },
+        }}
+      >
+        <Outlet />
+      </Card>
+    </Stack>
+  );
+
+  const renderSection = (
+    <Stack flexGrow={1} sx={{ position: "relative" }}>
+      <Box
+        component="img"
+        alt="auth"
+        src={image || "/assets/background/overlay_3.jpg"}
+        sx={{
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          objectFit: "cover",
+          position: "absolute",
+          width: "calc(60% - 32px)",
+          height: "calc(60% - 32px)",
+        }}
+      />
+    </Stack>
+  );
+
+  return (
+    <Stack
+      component="main"
+      direction="row"
+      sx={{
+        minHeight: "100vh",
+        position: "relative",
+        "&:before": {
+          width: 1,
+          height: 1,
+          zIndex: -1,
+          content: "''",
+          position: "absolute",
+          backgroundSize: "cover",
+          opacity: { xs: 0.24, md: 0 },
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center center",
+          backgroundImage:
+            "url(https://minimals.cc/assets/background/overlay_4.jpg)",
+        },
+      }}
+    >
+      {renderContent}
+
+      {mdUp && renderSection}
+    </Stack>
+  );
+}