@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/layouts/main/header.jsx

@@ -1,112 +0,0 @@
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import AppBar from '@mui/material/AppBar';
-import Button from '@mui/material/Button';
-import Toolbar from '@mui/material/Toolbar';
-import { useTheme } from '@mui/material/styles';
-import Container from '@mui/material/Container';
-import Badge, { badgeClasses } from '@mui/material/Badge';
-
-import { paths } from 'src/routes/paths';
-
-import { useOffSetTop } from 'src/hooks/use-off-set-top';
-import { useResponsive } from 'src/hooks/use-responsive';
-
-import { bgBlur } from 'src/theme/css';
-
-import Logo from 'src/components/logo';
-import Label from 'src/components/label';
-
-import NavMobile from './nav/mobile';
-import NavDesktop from './nav/desktop';
-import { HEADER } from '../config-layout';
-import { navConfig } from './config-navigation';
-import LoginButton from '../common/login-button';
-import HeaderShadow from '../common/header-shadow';
-import SettingsButton from '../common/settings-button';
-
-// ----------------------------------------------------------------------
-
-export default function Header() {
-  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' }}>
-          <Badge
-            sx={{
-              [`& .${badgeClasses.badge}`]: {
-                top: 8,
-                right: -16,
-              },
-            }}
-            badgeContent={
-              <Link
-                href={paths.changelog}
-                target="_blank"
-                rel="noopener"
-                underline="none"
-                sx={{ ml: 1 }}
-              >
-                <Label color="info" sx={{ textTransform: 'unset', height: 22, px: 0.5 }}>
-                  v5.6.0
-                </Label>
-              </Link>
-            }
-          >
-            <Logo />
-          </Badge>
-
-          <Box sx={{ flexGrow: 1 }} />
-
-          {mdUp && <NavDesktop data={navConfig} />}
-
-          <Stack alignItems="center" direction={{ xs: 'row', md: 'row-reverse' }}>
-            <Button variant="contained" target="_blank" rel="noopener" href={paths.minimalUI}>
-              Purchase Now
-            </Button>
-
-            {mdUp && <LoginButton />}
-
-            <SettingsButton
-              sx={{
-                ml: { xs: 1, md: 0 },
-                mr: { md: 2 },
-              }}
-            />
-
-            {!mdUp && <NavMobile data={navConfig} />}
-          </Stack>
-        </Container>
-      </Toolbar>
-
-      {offsetTop && <HeaderShadow />}
-    </AppBar>
-  );
-}

package/minimal/src/layouts/main/index.jsx

@@ -1,40 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-
-import { usePathname } from 'src/routes/hooks';
-
-import Footer from './footer';
-import Header from './header';
-
-// ----------------------------------------------------------------------
-
-export default function MainLayout({ children }) {
-  const pathname = usePathname();
-
-  const homePage = pathname === '/';
-
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: 1 }}>
-      <Header />
-
-      <Box
-        component="main"
-        sx={{
-          flexGrow: 1,
-          ...(!homePage && {
-            pt: { xs: 8, md: 10 },
-          }),
-        }}
-      >
-        {children}
-      </Box>
-
-      <Footer />
-    </Box>
-  );
-}
-
-MainLayout.propTypes = {
-  children: PropTypes.node,
-};

package/minimal/src/layouts/main/nav/desktop/index.jsx

@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Stack from '@mui/material/Stack';
-
-import NavList from './nav-list';
-
-// ----------------------------------------------------------------------
-
-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>
-  );
-}
-
-NavDesktop.propTypes = {
-  data: PropTypes.array,
-};

package/minimal/src/layouts/main/nav/desktop/nav-item.jsx

@@ -1,184 +0,0 @@
-import { m } from 'framer-motion';
-import PropTypes from 'prop-types';
-import { forwardRef } from 'react';
-
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import { styled } from '@mui/material/styles';
-import CardActionArea from '@mui/material/CardActionArea';
-import ListItemButton from '@mui/material/ListItemButton';
-
-import { RouterLink } from 'src/routes/components';
-
-import Iconify from 'src/components/iconify';
-
-// ----------------------------------------------------------------------
-
-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>
-    );
-  }
-);
-
-NavItem.propTypes = {
-  title: PropTypes.string,
-  path: PropTypes.string,
-  open: PropTypes.bool,
-  active: PropTypes.bool,
-  subItem: PropTypes.bool,
-  hasChild: PropTypes.bool,
-  externalLink: PropTypes.bool,
-};
-
-// ----------------------------------------------------------------------
-
-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,
-        }}
-      >
-        <m.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"
-          />
-        </m.div>
-      </CardActionArea>
-    </Link>
-  );
-}
-
-NavItemDashboard.propTypes = {
-  path: PropTypes.string,
-  sx: PropTypes.object,
-};

package/minimal/src/layouts/main/nav/desktop/nav-list.jsx

@@ -1,158 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState, useEffect, useCallback } from 'react';
-
-import Fade from '@mui/material/Fade';
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import Portal from '@mui/material/Portal';
-import { useTheme } from '@mui/material/styles';
-import ListSubheader from '@mui/material/ListSubheader';
-
-import { usePathname } from 'src/routes/hooks';
-import { useActiveLink } from 'src/routes/hooks/use-active-link';
-
-import { paper } from 'src/theme/css';
-
-import { HEADER } from '../../../config-layout';
-import { NavItem, NavItemDashboard } from './nav-item';
-
-// ----------------------------------------------------------------------
-
-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>
-      )}
-    </>
-  );
-}
-
-NavList.propTypes = {
-  data: PropTypes.shape({
-    path: PropTypes.string,
-    title: PropTypes.string,
-    children: PropTypes.array,
-  }),
-};
-
-// ----------------------------------------------------------------------
-
-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>
-  );
-}
-
-NavSubList.propTypes = {
-  data: PropTypes.array,
-  subheader: PropTypes.string,
-  sx: PropTypes.object,
-};

package/minimal/src/layouts/main/nav/mobile/index.jsx

@@ -1,67 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState, useEffect, useCallback } from 'react';
-
-import Drawer from '@mui/material/Drawer';
-import IconButton from '@mui/material/IconButton';
-
-import { usePathname } from 'src/routes/hooks';
-
-import Logo from 'src/components/logo';
-import SvgColor from 'src/components/svg-color';
-import Scrollbar from 'src/components/scrollbar';
-
-import NavList from './nav-list';
-
-// ----------------------------------------------------------------------
-
-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>
-    </>
-  );
-}
-
-NavMobile.propTypes = {
-  data: PropTypes.array,
-};

package/minimal/src/layouts/main/nav/mobile/nav-item.jsx

@@ -1,90 +0,0 @@
-import PropTypes from 'prop-types';
-import { forwardRef } from 'react';
-
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import { alpha, styled } from '@mui/material/styles';
-import ListItemButton from '@mui/material/ListItemButton';
-
-import { RouterLink } from 'src/routes/components';
-
-import Iconify from 'src/components/iconify';
-
-// ----------------------------------------------------------------------
-
-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' }}>
-          {icon}
-        </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>
-    );
-  }
-);
-
-NavItem.propTypes = {
-  title: PropTypes.string,
-  path: PropTypes.string,
-  icon: PropTypes.element,
-  open: PropTypes.bool,
-  active: PropTypes.bool,
-  subItem: PropTypes.bool,
-  hasChild: PropTypes.bool,
-  externalLink: PropTypes.bool,
-};
-
-// ----------------------------------------------------------------------
-
-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,
-    }),
-  };
-});