@ebubekirylmaz/link-test 1.0.0

package/src/layouts/DashboardLayout/nav-horizontal.jsx

@@ -0,0 +1,62 @@
+import AppBar from "@mui/material/AppBar";
+import { HEADER } from "../config-layout";
+import HeaderShadow from "../common/header-shadow";
+import { NavSectionHorizontal } from "../../components/nav-section";
+import React from "react";
+import Scrollbar from "../../components/scrollbar";
+import Toolbar from "@mui/material/Toolbar";
+import { bgBlur } from "../../theme/css";
+import config from "../../config/config";
+import { memo } from "react";
+import { useTheme } from "@mui/material/styles";
+import { useUser } from "../../hooks/use-user";
+
+// ----------------------------------------------------------------------
+
+function NavHorizontal() {
+  const theme = useTheme();
+
+  const { user } = useUser();
+
+  const { sideMenu } = config().menu;
+
+  return (
+    <AppBar
+      data-cy="dashboard-layout-nav-horizontal"
+      component="div"
+      sx={{
+        top: HEADER.H_DESKTOP_OFFSET,
+      }}
+    >
+      <Toolbar
+        sx={{
+          ...bgBlur({
+            color: theme.palette.background.default,
+          }),
+        }}
+      >
+        <Scrollbar
+          sx={{
+            "& .simplebar-content": {
+              display: "flex",
+            },
+          }}
+        >
+          <NavSectionHorizontal
+            data={sideMenu}
+            slotProps={{
+              currentRole: user?.role,
+            }}
+            sx={{
+              ...theme.mixins.toolbar,
+            }}
+          />
+        </Scrollbar>
+      </Toolbar>
+
+      <HeaderShadow />
+    </AppBar>
+  );
+}
+
+export default memo(NavHorizontal);

package/src/layouts/DashboardLayout/nav-mini.jsx

@@ -0,0 +1,99 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Iconify from "../../components/Iconify";
+import Logo from "../../components/logo";
+import { NAV } from "../config-layout";
+import { NavSectionMini } from "../../components/nav-section";
+import NavToggleButton from "../common/nav-toggle-button";
+import SettingsDialog from "../../widgets/SettingsDialog";
+import Stack from "@mui/material/Stack";
+import config from "../../config/config";
+import { hideScroll } from "../../theme/css";
+import { useResponsive } from "../../hooks/use-responsive";
+import { useUser } from "../../hooks/use-user";
+
+import React, { useState } from "react";
+
+export default function NavMini({ only }) {
+  const { user } = useUser();
+  const { sideMenu, actionButtons } = config().menu;
+  const [openSettings, setOpenSettings] = useState(false);
+  const lgUp = useResponsive("up", "lg");
+  const handleCloseSettings = () => {
+    setOpenSettings(false);
+  };
+
+  return (
+    <Box
+      data-cy="nav-mini"
+      sx={{
+        flexShrink: { lg: 0 },
+        width: { lg: NAV.W_MINI },
+      }}
+    >
+      {!only && (
+        <NavToggleButton
+          sx={{
+            top: 22,
+            left: NAV.W_MINI - 12,
+          }}
+        />
+      )}
+
+      <Stack
+        sx={{
+          pb: 2,
+          height: 1,
+          position: "fixed",
+          width: NAV.W_MINI,
+          borderRight: (theme) => `dashed 1px ${theme.palette.divider}`,
+          ...hideScroll.x,
+        }}
+      >
+        <Logo sx={{ mx: "auto", my: 2 }} />
+        <NavSectionMini
+          data={sideMenu}
+          slotProps={{
+            currentRole: user?.role,
+          }}
+        />
+        <Box sx={{ flexGrow: 1 }} />
+        <Stack
+          direction={"column"}
+          alignItems={"center"}
+          justifyItems={"center"}
+          sx={{
+            marginBottom: 0,
+            position: lgUp ? "static" : "fixed",
+            bottom: lgUp ? "auto" : 66,
+            width: "100%",
+          }}
+          gap={2}
+        >
+          {actionButtons &&
+            actionButtons.map((Action, index) => (
+              <Box key={index} component={Action}></Box>
+            ))}
+          <Button
+            onClick={() => setOpenSettings(true)}
+            sx={{
+              position: lgUp ? "static" : "fixed",
+              bottom: lgUp ? "auto" : 16,
+              width: "100%",
+            }}
+          >
+            <Iconify
+              icon={"ic:baseline-settings"}
+              sx={{
+                width: 32,
+                height: 32,
+                color: "text.secondary",
+              }}
+            />
+          </Button>
+        </Stack>
+        <SettingsDialog open={openSettings} handleClose={handleCloseSettings} />
+      </Stack>
+    </Box>
+  );
+}

package/src/layouts/DashboardLayout/nav-vertical.jsx

@@ -0,0 +1,201 @@
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import Iconify from "../../components/Iconify";
+import { Link } from "react-router-dom";
+import Logo from "../../components/logo";
+import { NAV } from "../config-layout";
+import { NavSectionVertical } from "../../components/nav-section";
+import NavToggleButton from "../common/nav-toggle-button";
+import React from "react";
+import Scrollbar from "../../components/scrollbar";
+import SettingsDialog from "../../widgets/SettingsDialog";
+import Stack from "@mui/material/Stack";
+import config from "../../config/config";
+import styles from "../../components/logo/styles";
+import { useEvent } from "@nucleoidai/react-event";
+import { usePathname } from "../../routes/hooks/use-pathname";
+import { useResponsive } from "../../hooks/use-responsive";
+import { useUser } from "../../hooks/use-user";
+
+import { Button, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+export default function NavVertical({ openNav, onCloseNav }) {
+  const { user } = useUser();
+  const pathname = usePathname();
+  const [openSettings, setOpenSettings] = useState(false);
+  const [hideSubheader] = useEvent("PAGE_CHANGED", { subheader: "" });
+  const { sideMenu, actionButtons } = config().menu;
+  const lgUp = useResponsive("up", "lg");
+  const { beta, name } = config();
+
+  useEffect(() => {
+    const index = sideMenu.findIndex(
+      (item) => item.subheader === hideSubheader.subheader
+    );
+
+    if (index !== -1) {
+      sideMenu.splice(index, 1);
+    }
+  }, [hideSubheader]);
+
+  useEffect(() => {
+    if (openNav) {
+      onCloseNav();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  const handleCloseSettings = () => {
+    setOpenSettings(false);
+  };
+
+  const renderContent = (
+    <Scrollbar
+      sx={{
+        height: 1,
+        "& .simplebar-content": {
+          height: 1,
+          display: "flex",
+          flexDirection: "column",
+        },
+      }}
+    >
+      {beta ? (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            ml: 1,
+            mt: 3,
+          }}
+        >
+          <Logo sx={{ ml: 4, mb: 1 }} />
+          <Link to="/" style={{ textDecoration: "none", color: "white" }}>
+            <Typography
+              sx={{
+                ml: 1,
+              }}
+            >
+              {name}
+            </Typography>
+          </Link>
+          <Typography
+            sx={{
+              ...styles.neon,
+              position: "relative",
+              bottom: -10,
+              ml: 1,
+              fontSize: 12,
+            }}
+          >
+            Beta
+          </Typography>
+        </Box>
+      ) : (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            ml: 1,
+            mt: 3,
+          }}
+        >
+          <Logo sx={{ ml: 4, mb: 1 }} />
+          <Typography
+            sx={{
+              ml: 1,
+            }}
+          >
+            {name}
+          </Typography>
+        </Box>
+      )}
+      <NavSectionVertical
+        data={sideMenu}
+        slotProps={{
+          currentRole: user?.role,
+        }}
+      />
+      <Box sx={{ flexGrow: 1 }} />
+      <Stack
+        direction={"column"}
+        alignItems={"center"}
+        justifyItems={"center"}
+        sx={{
+          marginBottom: lgUp ? 3 : 0,
+          position: lgUp ? "static" : "fixed",
+          bottom: lgUp ? "auto" : 66,
+          width: "100%",
+        }}
+        gap={2}
+      >
+        {actionButtons &&
+          actionButtons?.map((Action, index) => (
+            <Box key={index} component={Action}></Box>
+          ))}
+      </Stack>
+
+      <Button
+        data-cy="end-item"
+        fullWidth={true}
+        onClick={() => setOpenSettings(true)}
+        sx={{
+          position: lgUp ? "static" : "fixed",
+          bottom: lgUp ? "auto" : 16,
+          width: "100%",
+        }}
+      >
+        <Iconify
+          icon={"ic:baseline-settings"}
+          sx={{
+            width: 32,
+            height: 32,
+            color: "text.secondary",
+            mx: "auto",
+          }}
+        />
+      </Button>
+      <SettingsDialog open={openSettings} handleClose={handleCloseSettings} />
+    </Scrollbar>
+  );
+  return (
+    <Box
+      data-cy="nav-vertical"
+      sx={{
+        flexShrink: { lg: 0 },
+        width: { lg: NAV.W_VERTICAL },
+      }}
+    >
+      <NavToggleButton />
+
+      {lgUp ? (
+        <Stack
+          sx={{
+            height: 1,
+            position: "fixed",
+            width: NAV.W_VERTICAL,
+            borderRight: (theme) => `dashed 1px ${theme.palette.divider}`,
+          }}
+        >
+          {renderContent}
+        </Stack>
+      ) : (
+        <Drawer
+          open={openNav}
+          onClose={onCloseNav}
+          PaperProps={{
+            sx: {
+              width: NAV.W_VERTICAL,
+            },
+          }}
+        >
+          {renderContent}
+        </Drawer>
+      )}
+    </Box>
+  );
+}

package/src/layouts/FullScreenLayout/FullScreenLayout.jsx

@@ -0,0 +1,101 @@
+import Box from "@mui/material/Box";
+import NavHorizontal from "./nav-horizontal";
+import NavMini from "../DashboardLayout/nav-mini";
+import NavVertical from "./nav-vertical";
+import { Outlet } from "react-router";
+import Stack from "@mui/material/Stack";
+import config from "../../config/config";
+import { useEvent } from "@nucleoidai/react-event";
+import { useResponsive } from "../../hooks/use-responsive";
+
+import React, { useEffect, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+export default function FullScreenLayout() {
+  const { fullScreenLayout } = config().menu;
+
+  const renderNavMini = <NavMini only={true} />;
+  const renderHorizontal = <NavHorizontal />;
+
+  const lgUp = useResponsive("up", "lg");
+
+  const [nav, setNav] = useState(false);
+
+  const [openNav] = useEvent("PLATFORM_NAV_OPENED", { layout: null });
+  const [closeNav] = useEvent("PLATFORM_NAV_CLOSED", { layout: null });
+
+  console.log(openNav, closeNav);
+
+  useEffect(() => {
+    if (openNav.layout === "fullScreen") {
+      setNav(true);
+    }
+  }, [openNav]);
+
+  useEffect(() => {
+    if (closeNav.layout === "fullScreen") {
+      setNav(false);
+    }
+  }, [closeNav]);
+
+  const renderNavVertical = (
+    <NavVertical openNav={nav} onCloseNav={() => setNav(false)} />
+  );
+
+  const render = () => {
+    switch (fullScreenLayout) {
+      case "right":
+        return (
+          <>
+            <Outlet />
+            {renderNavMini}
+          </>
+        );
+      case "left":
+        return (
+          <>
+            {renderNavMini}
+            <Outlet />
+          </>
+        );
+      case "top":
+        return (
+          <>
+            {renderHorizontal}
+            <Stack width={"100%"} sx={{ mt: 7 }}>
+              <Outlet />
+            </Stack>
+          </>
+        );
+      default:
+        return (
+          <>
+            {renderNavMini}
+            <Outlet />
+          </>
+        );
+    }
+  };
+
+  return (
+    <>
+      <Box
+        sx={{
+          minHeight: 1,
+          display: "flex",
+          flexDirection: { xs: "column", lg: "row" },
+        }}
+      >
+        {lgUp ? (
+          render()
+        ) : (
+          <>
+            {renderNavVertical}
+            <Outlet />
+          </>
+        )}
+      </Box>
+    </>
+  );
+}

package/src/layouts/FullScreenLayout/index.js

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

package/src/layouts/FullScreenLayout/nav-horizontal.jsx

@@ -0,0 +1,50 @@
+import AppBar from "@mui/material/AppBar";
+import HeaderShadow from "../common/header-shadow";
+import { NavSectionHorizontal } from "../../components/nav-section";
+import React from "react";
+import Toolbar from "@mui/material/Toolbar";
+import { bgBlur } from "../../theme/css";
+import config from "../../config/config";
+import { memo } from "react";
+import { useTheme } from "@mui/material/styles";
+import { useUser } from "../../hooks/use-user";
+
+// ----------------------------------------------------------------------
+
+function NavHorizontal() {
+  const theme = useTheme();
+
+  const { user } = useUser();
+
+  const { sideMenu, actionButtons } = config().menu;
+  return (
+    <AppBar component="div" data-cy="nav-horizontal">
+      <Toolbar
+        sx={{
+          ...bgBlur({
+            color: theme.palette.background.default,
+          }),
+        }}
+      >
+        <NavSectionHorizontal
+          data={sideMenu}
+          slotProps={{
+            currentRole: user?.role,
+          }}
+          sx={{
+            ...theme.mixins.toolbar,
+          }}
+        />
+
+        {actionButtons &&
+          actionButtons.map((Action, index) => (
+            <Box key={index} component={Action}></Box>
+          ))}
+      </Toolbar>
+
+      <HeaderShadow />
+    </AppBar>
+  );
+}
+
+export default memo(NavHorizontal);

package/src/layouts/FullScreenLayout/nav-vertical.jsx

@@ -0,0 +1,136 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Drawer from "@mui/material/Drawer";
+import Iconify from "../../components/Iconify";
+import Logo from "../../components/logo";
+import { NAV } from "../config-layout";
+import { NavSectionVertical } from "../../components/nav-section";
+import NavToggleButton from "../common/nav-toggle-button";
+import Scrollbar from "../../components/scrollbar";
+import SettingsDialog from "../../widgets/SettingsDialog";
+import Stack from "@mui/material/Stack";
+import config from "../../config/config";
+import { useEffect } from "react";
+import { usePathname } from "../../routes/hooks/use-pathname";
+import { useResponsive } from "../../hooks/use-responsive";
+import { useUser } from "../../hooks/use-user";
+
+import React, { useState } from "react";
+
+// ----------------------------------------------------------------------
+
+export default function NavVertical({ openNav, onCloseNav }) {
+  const { user } = useUser();
+
+  const pathname = usePathname();
+
+  const lgUp = useResponsive("up", "lg");
+
+  const { sideMenu, actionButtons } = config().menu;
+
+  const [openSettings, setOpenSettings] = useState(false);
+
+  const handleCloseSettings = () => {
+    setOpenSettings(false);
+  };
+
+  useEffect(() => {
+    if (openNav) {
+      onCloseNav();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  const renderContent = (
+    <Scrollbar
+      sx={{
+        height: 1,
+        "& .simplebar-content": {
+          height: 1,
+          display: "flex",
+          flexDirection: "column",
+        },
+      }}
+    >
+      <Logo sx={{ mt: 3, ml: 4, mb: 1 }} />
+      <NavSectionVertical
+        data={sideMenu}
+        slotProps={{
+          currentRole: user?.role,
+        }}
+      />
+      <Box sx={{ flexGrow: 1 }} />
+      <Stack
+        direction={"column"}
+        alignItems={"center"}
+        justifyItems={"center"}
+        sx={{
+          marginBottom: lgUp ? 3 : 0,
+          position: lgUp ? "static" : "fixed",
+          bottom: lgUp ? "auto" : 66,
+          width: "100%",
+        }}
+        gap={2}
+      >
+        {actionButtons &&
+          actionButtons.map((Action, index) => (
+            <Box key={index} component={Action}></Box>
+          ))}
+        <Button
+          onClick={() => setOpenSettings(true)}
+          sx={{
+            position: lgUp ? "static" : "fixed",
+            bottom: lgUp ? "auto" : 16,
+            width: "100%",
+          }}
+        >
+          <Iconify
+            icon={"ic:baseline-settings"}
+            sx={{
+              width: 32,
+              height: 32,
+              color: "text.secondary",
+            }}
+          />
+        </Button>
+      </Stack>
+    </Scrollbar>
+  );
+
+  return (
+    <Box
+      sx={{
+        flexShrink: { lg: 0 },
+        width: { lg: NAV.W_VERTICAL },
+      }}
+    >
+      <NavToggleButton />
+
+      {lgUp ? (
+        <Stack
+          sx={{
+            height: 1,
+            position: "fixed",
+            width: NAV.W_VERTICAL,
+            borderRight: (theme) => `dashed 1px ${theme.palette.divider}`,
+          }}
+        >
+          {renderContent}
+        </Stack>
+      ) : (
+        <Drawer
+          open={openNav}
+          onClose={onCloseNav}
+          PaperProps={{
+            sx: {
+              width: NAV.W_VERTICAL,
+            },
+          }}
+        >
+          {renderContent}
+        </Drawer>
+      )}
+      <SettingsDialog open={openSettings} handleClose={handleCloseSettings} />
+    </Box>
+  );
+}

package/src/layouts/MainLayout/MainLayout.jsx

@@ -0,0 +1,21 @@
+import Box from "@mui/material/Box";
+import Header from "./header";
+import { Outlet } from "react-router";
+import React from "react";
+
+export default function MainLayout() {
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", height: 1 }}>
+      <Header />
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          pt: { xs: 8, md: 10 },
+        }}
+      >
+        <Outlet />
+      </Box>
+    </Box>
+  );
+}