@ebubekirylmaz/link-test 1.0.0

package/src/layouts/MainLayout/footer.jsx

@@ -0,0 +1,153 @@
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import Divider from "@mui/material/Divider";
+import Grid from "@mui/material/Unstable_Grid2";
+import Link from "@mui/material/Link";
+import Logo from "../../components/logo";
+import React from "react";
+import { RouterLink } from "../../routes/components";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { usePathname } from "../../routes/hooks";
+
+// ----------------------------------------------------------------------
+
+const LINKS = [
+  {
+    headline: "Minimal",
+    children: [
+      { name: "About us", href: "/" },
+      { name: "Contact us", href: "/" },
+      { name: "FAQs", href: "/" },
+    ],
+  },
+  {
+    headline: "Legal",
+    children: [
+      { name: "Terms and Condition", href: "#" },
+      { name: "Privacy Policy", href: "#" },
+    ],
+  },
+  {
+    headline: "Contact",
+    children: [{ name: "support@minimals.cc", href: "#" }],
+  },
+];
+
+// ----------------------------------------------------------------------
+
+export default function Footer() {
+  const pathname = usePathname();
+
+  const homePage = pathname === "/";
+
+  const simpleFooter = (
+    <Box
+      component="footer"
+      sx={{
+        py: 5,
+        textAlign: "center",
+        position: "relative",
+        bgcolor: "background.default",
+      }}
+    >
+      <Container>
+        <Logo sx={{ mb: 1, mx: "auto" }} />
+
+        <Typography variant="caption" component="div">
+          © All rights reserved
+          <br /> made by
+          <Link href="https://minimals.cc/"> minimals.cc </Link>
+        </Typography>
+      </Container>
+    </Box>
+  );
+
+  const mainFooter = (
+    <Box
+      component="footer"
+      sx={{
+        position: "relative",
+        bgcolor: "background.default",
+      }}
+    >
+      <Divider />
+
+      <Container
+        sx={{
+          pt: 10,
+          pb: 5,
+          textAlign: { xs: "center", md: "unset" },
+        }}
+      >
+        <Logo sx={{ mb: 3 }} />
+
+        <Grid
+          container
+          justifyContent={{
+            xs: "center",
+            md: "space-between",
+          }}
+        >
+          <Grid xs={8} md={3}>
+            <Typography
+              variant="body2"
+              sx={{
+                maxWidth: 270,
+                mx: { xs: "auto", md: "unset" },
+              }}
+            >
+              The starting point for your next project with Minimal UI Kit,
+              built on the newest version of Material-UI ©, ready to be
+              customized to your style.
+            </Typography>
+
+            <Stack
+              direction="row"
+              justifyContent={{ xs: "center", md: "flex-start" }}
+              sx={{
+                mt: 3,
+                mb: { xs: 5, md: 0 },
+              }}
+            ></Stack>
+          </Grid>
+
+          <Grid xs={12} md={6}>
+            <Stack spacing={5} direction={{ xs: "column", md: "row" }}>
+              {LINKS.map((list) => (
+                <Stack
+                  key={list.headline}
+                  spacing={2}
+                  alignItems={{ xs: "center", md: "flex-start" }}
+                  sx={{ width: 1 }}
+                >
+                  <Typography component="div" variant="overline">
+                    {list.headline}
+                  </Typography>
+
+                  {list.children.map((link) => (
+                    <Link
+                      key={link.name}
+                      component={RouterLink}
+                      href={link.href}
+                      color="inherit"
+                      variant="body2"
+                    >
+                      {link.name}
+                    </Link>
+                  ))}
+                </Stack>
+              ))}
+            </Stack>
+          </Grid>
+        </Grid>
+
+        <Typography variant="body2" sx={{ mt: 10 }}>
+          © 2021. All rights reserved
+        </Typography>
+      </Container>
+    </Box>
+  );
+
+  return homePage ? simpleFooter : mainFooter;
+}

package/src/layouts/MainLayout/header.jsx

@@ -0,0 +1,81 @@
+import AccountPopover from "../common/account-popover";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import { HEADER } from "../config-layout";
+import HeaderShadow from "../common/header-shadow";
+import Logo from "../../components/logo";
+import NavDesktop from "./nav/desktop";
+import NavMobile from "./nav/mobile";
+import NotificationsPopover from "../common/notifications-popover";
+import ProjectBar from "../common/ProjectBar";
+import React from "react";
+import SettingsButton from "../common/settings-button";
+import Stack from "@mui/material/Stack";
+import Toolbar from "@mui/material/Toolbar";
+import { bgBlur } from "../../theme/css";
+import config from "../../config/config";
+import { useOffSetTop } from "../../hooks/use-off-set-top";
+import { useResponsive } from "../../hooks/use-responsive";
+import { useTheme } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export default function Header() {
+  const { topMenu } = config().menu;
+  const projectBar = config().template?.projectBar;
+  const isLoginConfigured = config().project && config().template?.login;
+  const theme = useTheme();
+
+  const mdUp = useResponsive("up", "md");
+  const offsetTop = useOffSetTop(HEADER.H_DESKTOP);
+
+  return (
+    <AppBar>
+      <Toolbar
+        disableGutters
+        sx={{
+          height: {
+            xs: HEADER.H_MOBILE,
+            md: HEADER.H_DESKTOP,
+          },
+          transition: theme.transitions.create(["height"], {
+            easing: theme.transitions.easing.easeInOut,
+            duration: theme.transitions.duration.shorter,
+          }),
+          ...(offsetTop && {
+            ...bgBlur({
+              color: theme.palette.background.default,
+            }),
+            height: {
+              md: HEADER.H_DESKTOP_OFFSET,
+            },
+          }),
+        }}
+      >
+        <Container sx={{ height: 1, display: "flex", alignItems: "center" }}>
+          <Logo sx={{ marginRight: 10 }} />
+          {projectBar && <ProjectBar />}
+          <Box sx={{ flexGrow: 1 }} />
+
+          {mdUp && <NavDesktop data={topMenu} />}
+
+          <Stack
+            alignItems="center"
+            direction={{ xs: "row", md: "row-reverse" }}
+          >
+            <NotificationsPopover />
+
+            <SettingsButton />
+
+            {isLoginConfigured && <AccountPopover />}
+
+            {!mdUp && <NavMobile data={topMenu} />}
+          </Stack>
+        </Container>
+      </Toolbar>
+
+      {offsetTop && <HeaderShadow />}
+    </AppBar>
+  );
+}

package/src/layouts/MainLayout/index.js

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

package/src/layouts/MainLayout/nav/desktop/index.jsx

@@ -0,0 +1,20 @@
+import NavList from "./nav-list";
+import React from "react";
+import Stack from "@mui/material/Stack";
+
+// ----------------------------------------------------------------------
+
+export default function NavDesktop({ data }) {
+  return (
+    <Stack
+      component="nav"
+      direction="row"
+      spacing={5}
+      sx={{ mr: 2.5, height: 1 }}
+    >
+      {data.map((list) => (
+        <NavList key={list.title} data={list} />
+      ))}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,186 @@
+import Box from "@mui/material/Box";
+import CardActionArea from "@mui/material/CardActionArea";
+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 { motion } from "framer-motion";
+import { styled } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export const NavItem = forwardRef(
+  (
+    { title, path, open, active, hasChild, externalLink, subItem, ...other },
+    ref
+  ) => {
+    const renderContent = (
+      <StyledNavItem
+        disableRipple
+        disableTouchRipple
+        ref={ref}
+        open={open}
+        active={active}
+        subItem={subItem}
+        {...other}
+      >
+        {title}
+
+        {hasChild && (
+          <Iconify
+            width={16}
+            icon="eva:arrow-ios-downward-fill"
+            sx={{ ml: 1 }}
+          />
+        )}
+      </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" && prop !== "subItem",
+})(({ open, active, subItem, theme }) => {
+  const opened = open && !active;
+
+  const dotStyles = {
+    width: 6,
+    height: 6,
+    left: -12,
+    opacity: 0.64,
+    content: '""',
+    borderRadius: "50%",
+    position: "absolute",
+    backgroundColor: "currentColor",
+    ...(active && {
+      color: theme.palette.primary.main,
+    }),
+  };
+
+  return {
+    // Root item
+    ...(!subItem && {
+      ...theme.typography.body2,
+      padding: 0,
+      height: "100%",
+      fontWeight: theme.typography.fontWeightMedium,
+      transition: theme.transitions.create(["all"], {
+        duration: theme.transitions.duration.shorter,
+      }),
+      "&:hover": {
+        opacity: 0.64,
+        backgroundColor: "transparent",
+        "&:before": {
+          ...dotStyles,
+        },
+      },
+      ...(active && {
+        color: theme.palette.primary.main,
+        fontWeight: theme.typography.fontWeightSemiBold,
+        "&:before": {
+          ...dotStyles,
+        },
+      }),
+      ...(opened && {
+        opacity: 0.64,
+        "&:before": {
+          ...dotStyles,
+        },
+      }),
+    }),
+
+    // Sub item
+    ...(subItem && {
+      ...theme.typography.body2,
+      padding: 0,
+      fontSize: 13,
+      color: theme.palette.text.secondary,
+      fontWeight: theme.typography.fontWeightMedium,
+      transition: theme.transitions.create(["all"], {
+        duration: theme.transitions.duration.shorter,
+      }),
+      "&:hover": {
+        backgroundColor: "transparent",
+        color: theme.palette.text.primary,
+        "&:before": {
+          ...dotStyles,
+        },
+      },
+      ...(active && {
+        color: theme.palette.text.primary,
+        fontWeight: theme.typography.fontWeightSemiBold,
+        "&:before": {
+          ...dotStyles,
+        },
+      }),
+    }),
+  };
+});
+
+// ----------------------------------------------------------------------
+
+export function NavItemDashboard({ path, sx, ...other }) {
+  return (
+    <Link
+      component={RouterLink}
+      href={path}
+      sx={{ width: 1, height: 1 }}
+      {...other}
+    >
+      <CardActionArea
+        sx={{
+          height: 1,
+          minHeight: 320,
+          borderRadius: 1.5,
+          color: "text.disabled",
+          bgcolor: "background.neutral",
+          px: { md: 3, lg: 10 },
+          ...sx,
+        }}
+      >
+        <motion.div
+          whileTap="tap"
+          whileHover="hover"
+          variants={{
+            hover: { scale: 1.02 },
+            tap: { scale: 0.98 },
+          }}
+        >
+          <Box
+            component="img"
+            alt="illustration_dashboard"
+            src="/assets/illustrations/illustration_dashboard.png"
+          />
+        </motion.div>
+      </CardActionArea>
+    </Link>
+  );
+}

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

@@ -0,0 +1,145 @@
+import Fade from "@mui/material/Fade";
+import { HEADER } from "../../../config-layout";
+import ListSubheader from "@mui/material/ListSubheader";
+import Paper from "@mui/material/Paper";
+import Portal from "@mui/material/Portal";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import { paper } from "../../../../theme/css";
+import { useActiveLink } from "../../../../routes/hooks/use-active-link";
+import { usePathname } from "../../../../routes/hooks";
+import { useTheme } from "@mui/material/styles";
+
+import { NavItem, NavItemDashboard } from "./nav-item";
+import { useCallback, useEffect, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+export default function NavList({ data }) {
+  const theme = useTheme();
+
+  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
+        open={openMenu}
+        onMouseEnter={handleOpenMenu}
+        onMouseLeave={handleCloseMenu}
+        //
+        title={data.title}
+        path={data.path}
+        //
+        hasChild={!!data.children}
+        externalLink={data.path?.includes("http")}
+        //
+        active={active}
+      />
+
+      {!!data.children && openMenu && (
+        <Portal>
+          <Fade in={openMenu}>
+            <Paper
+              onMouseEnter={handleOpenMenu}
+              onMouseLeave={handleCloseMenu}
+              sx={{
+                ...paper({ theme }),
+                left: 0,
+                right: 0,
+                m: "auto",
+                display: "flex",
+                borderRadius: 2,
+                position: "fixed",
+                zIndex: theme.zIndex.modal,
+                p: theme.spacing(5, 1, 1, 3),
+                top: HEADER.H_DESKTOP_OFFSET,
+                maxWidth: theme.breakpoints.values.lg,
+                boxShadow: theme.customShadows.dropdown,
+              }}
+            >
+              {data.children.map((list) => (
+                <NavSubList
+                  key={list.subheader}
+                  subheader={list.subheader}
+                  data={list.items}
+                />
+              ))}
+            </Paper>
+          </Fade>
+        </Portal>
+      )}
+    </>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function NavSubList({ data, subheader, sx, ...other }) {
+  const pathname = usePathname();
+
+  const dashboard = subheader === "Dashboard";
+
+  return (
+    <Stack
+      spacing={2}
+      flexGrow={1}
+      alignItems="flex-start"
+      sx={{
+        pb: 2,
+        ...(dashboard && {
+          pb: 0,
+          maxWidth: { md: 1 / 3, lg: 540 },
+        }),
+        ...sx,
+      }}
+      {...other}
+    >
+      <ListSubheader
+        disableSticky
+        sx={{
+          p: 0,
+          typography: "overline",
+          fontSize: 11,
+          color: "text.primary",
+        }}
+      >
+        {subheader}
+      </ListSubheader>
+
+      {data.map((item) =>
+        dashboard ? (
+          <NavItemDashboard key={item.title} path={item.path} />
+        ) : (
+          <NavItem
+            key={item.title}
+            title={item.title}
+            path={item.path}
+            active={pathname === item.path || pathname === `${item.path}/`}
+            subItem
+          />
+        )
+      )}
+    </Stack>
+  );
+}

package/src/layouts/MainLayout/nav/mobile/index.jsx

@@ -0,0 +1,60 @@
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import Logo from "../../../../components/logo";
+import NavList from "./nav-list";
+import React from "react";
+import Scrollbar from "../../../../components/scrollbar";
+import SvgColor from "../../../../components/svg-color";
+import { usePathname } from "../../../../routes/hooks";
+
+import { useCallback, useEffect, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+export default function NavMobile({ data }) {
+  const pathname = usePathname();
+
+  const [openMenu, setOpenMenu] = useState(false);
+
+  useEffect(() => {
+    if (openMenu) {
+      handleCloseMenu();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  const handleOpenMenu = useCallback(() => {
+    setOpenMenu(true);
+  }, []);
+
+  const handleCloseMenu = useCallback(() => {
+    setOpenMenu(false);
+  }, []);
+
+  return (
+    <>
+      <IconButton onClick={handleOpenMenu} sx={{ ml: 1 }}>
+        <SvgColor src="/assets/icons/navbar/ic_menu_item.svg" />
+      </IconButton>
+
+      <Drawer
+        open={openMenu}
+        onClose={handleCloseMenu}
+        PaperProps={{
+          sx: {
+            pb: 5,
+            width: 260,
+          },
+        }}
+      >
+        <Scrollbar>
+          <Logo sx={{ mx: 2.5, my: 3 }} />
+
+          {data.map((list) => (
+            <NavList key={list.title} data={list} />
+          ))}
+        </Scrollbar>
+      </Drawer>
+    </>
+  );
+}