@canmingir/link 1.1.0

package/minimal/src/layouts/common/searchbar/utils.js

@@ -0,0 +1,86 @@
+import { flattenArray } from 'src/utils/flatten-array';
+
+// ----------------------------------------------------------------------
+
+export function getAllItems({ data }) {
+  const reduceItems = data.map((list) => handleLoop(list.items, list.subheader)).flat();
+
+  const items = flattenArray(reduceItems).map((option) => {
+    const group = splitPath(reduceItems, option.path);
+
+    return {
+      group: group && group.length > 1 ? group[0] : option.subheader,
+      title: option.title,
+      path: option.path,
+    };
+  });
+
+  return items;
+}
+
+// ----------------------------------------------------------------------
+
+export function applyFilter({ inputData, query }) {
+  if (query) {
+    inputData = inputData.filter(
+      (item) =>
+        item.title.toLowerCase().indexOf(query.toLowerCase()) !== -1 ||
+        item.path.toLowerCase().indexOf(query.toLowerCase()) !== -1
+    );
+  }
+
+  return inputData;
+}
+
+// ----------------------------------------------------------------------
+
+export function splitPath(array, key) {
+  let stack = array.map((item) => ({
+    path: [item.title],
+    currItem: item,
+  }));
+
+  while (stack.length) {
+    const { path, currItem } = stack.pop();
+
+    if (currItem.path === key) {
+      return path;
+    }
+
+    if (currItem.children?.length) {
+      stack = stack.concat(
+        currItem.children.map((item) => ({
+          path: path.concat(item.title),
+          currItem: item,
+        }))
+      );
+    }
+  }
+  return null;
+}
+
+// ----------------------------------------------------------------------
+
+export function handleLoop(array, subheader) {
+  return array?.map((list) => ({
+    subheader,
+    ...list,
+    ...(list.children && {
+      children: handleLoop(list.children, subheader),
+    }),
+  }));
+}
+
+// ----------------------------------------------------------------------
+
+export function groupedData(array) {
+  const group = array.reduce((groups, item) => {
+    groups[item.group] = groups[item.group] || [];
+
+    groups[item.group].push(item);
+
+    return groups;
+  }, {});
+
+  return group;
+}

package/minimal/src/layouts/common/settings-button.jsx

@@ -0,0 +1,62 @@
+import { m } from 'framer-motion';
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Badge, { badgeClasses } from '@mui/material/Badge';
+
+import Iconify from 'src/components/iconify';
+import { varHover } from 'src/components/animate';
+import { useSettingsContext } from 'src/components/settings';
+
+// ----------------------------------------------------------------------
+
+export default function SettingsButton({ sx }) {
+  const settings = useSettingsContext();
+
+  return (
+    <Badge
+      color="error"
+      variant="dot"
+      invisible={!settings.canReset}
+      sx={{
+        [`& .${badgeClasses.badge}`]: {
+          top: 8,
+          right: 8,
+        },
+        ...sx,
+      }}
+    >
+      <Box
+        component={m.div}
+        animate={{
+          rotate: [0, settings.open ? 0 : 360],
+        }}
+        transition={{
+          duration: 12,
+          ease: 'linear',
+          repeat: Infinity,
+        }}
+      >
+        <IconButton
+          component={m.button}
+          whileTap="tap"
+          whileHover="hover"
+          variants={varHover(1.05)}
+          aria-label="settings"
+          onClick={settings.onToggle}
+          sx={{
+            width: 40,
+            height: 40,
+          }}
+        >
+          <Iconify icon="solar:settings-bold-duotone" width={24} />
+        </IconButton>
+      </Box>
+    </Badge>
+  );
+}
+
+SettingsButton.propTypes = {
+  sx: PropTypes.object,
+};

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

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+
+import Stack from '@mui/material/Stack';
+import Container from '@mui/material/Container';
+
+import Header from '../common/header-simple';
+
+// ----------------------------------------------------------------------
+
+export default function CompactLayout({ children }) {
+  return (
+    <>
+      <Header />
+
+      <Container component="main">
+        <Stack
+          sx={{
+            py: 12,
+            m: 'auto',
+            maxWidth: 400,
+            minHeight: '100vh',
+            textAlign: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {children}
+        </Stack>
+      </Container>
+    </>
+  );
+}
+
+CompactLayout.propTypes = {
+  children: PropTypes.node,
+};

package/minimal/src/layouts/config-layout.js

@@ -0,0 +1,12 @@
+// ----------------------------------------------------------------------
+
+export const HEADER = {
+  H_MOBILE: 64,
+  H_DESKTOP: 80,
+  H_DESKTOP_OFFSET: 80 - 16,
+};
+
+export const NAV = {
+  W_VERTICAL: 280,
+  W_MINI: 88,
+};

package/minimal/src/layouts/dashboard/config-navigation.jsx

@@ -0,0 +1,324 @@
+import { useMemo } from 'react';
+
+import { paths } from 'src/routes/paths';
+
+import { useTranslate } from 'src/locales';
+
+import Label from 'src/components/label';
+import Iconify from 'src/components/iconify';
+import SvgColor from 'src/components/svg-color';
+
+// ----------------------------------------------------------------------
+
+const icon = (name) => (
+  <SvgColor src={`/assets/icons/navbar/${name}.svg`} sx={{ width: 1, height: 1 }} />
+  // OR
+  // <Iconify icon="fluent:mail-24-filled" />
+  // https://icon-sets.iconify.design/solar/
+  // https://www.streamlinehq.com/icons
+);
+
+const ICONS = {
+  job: icon('ic_job'),
+  blog: icon('ic_blog'),
+  chat: icon('ic_chat'),
+  mail: icon('ic_mail'),
+  user: icon('ic_user'),
+  file: icon('ic_file'),
+  lock: icon('ic_lock'),
+  tour: icon('ic_tour'),
+  order: icon('ic_order'),
+  label: icon('ic_label'),
+  blank: icon('ic_blank'),
+  kanban: icon('ic_kanban'),
+  folder: icon('ic_folder'),
+  banking: icon('ic_banking'),
+  booking: icon('ic_booking'),
+  invoice: icon('ic_invoice'),
+  product: icon('ic_product'),
+  calendar: icon('ic_calendar'),
+  disabled: icon('ic_disabled'),
+  external: icon('ic_external'),
+  menuItem: icon('ic_menu_item'),
+  ecommerce: icon('ic_ecommerce'),
+  analytics: icon('ic_analytics'),
+  dashboard: icon('ic_dashboard'),
+};
+
+// ----------------------------------------------------------------------
+
+export function useNavData() {
+  const { t } = useTranslate();
+
+  const data = useMemo(
+    () => [
+      // OVERVIEW
+      // ----------------------------------------------------------------------
+      {
+        subheader: t('overview'),
+        items: [
+          {
+            title: t('app'),
+            path: paths.dashboard.root,
+            icon: ICONS.dashboard,
+          },
+          {
+            title: t('ecommerce'),
+            path: paths.dashboard.general.ecommerce,
+            icon: ICONS.ecommerce,
+          },
+          {
+            title: t('analytics'),
+            path: paths.dashboard.general.analytics,
+            icon: ICONS.analytics,
+          },
+          {
+            title: t('banking'),
+            path: paths.dashboard.general.banking,
+            icon: ICONS.banking,
+          },
+          {
+            title: t('booking'),
+            path: paths.dashboard.general.booking,
+            icon: ICONS.booking,
+          },
+          {
+            title: t('file'),
+            path: paths.dashboard.general.file,
+            icon: ICONS.file,
+          },
+        ],
+      },
+
+      // MANAGEMENT
+      // ----------------------------------------------------------------------
+      {
+        subheader: t('management'),
+        items: [
+          // USER
+          {
+            title: t('user'),
+            path: paths.dashboard.user.root,
+            icon: ICONS.user,
+            children: [
+              { title: t('profile'), path: paths.dashboard.user.root },
+              { title: t('cards'), path: paths.dashboard.user.cards },
+              { title: t('list'), path: paths.dashboard.user.list },
+              { title: t('create'), path: paths.dashboard.user.new },
+              { title: t('edit'), path: paths.dashboard.user.demo.edit },
+              { title: t('account'), path: paths.dashboard.user.account },
+            ],
+          },
+
+          // PRODUCT
+          {
+            title: t('product'),
+            path: paths.dashboard.product.root,
+            icon: ICONS.product,
+            children: [
+              { title: t('list'), path: paths.dashboard.product.root },
+              {
+                title: t('details'),
+                path: paths.dashboard.product.demo.details,
+              },
+              { title: t('create'), path: paths.dashboard.product.new },
+              { title: t('edit'), path: paths.dashboard.product.demo.edit },
+            ],
+          },
+
+          // ORDER
+          {
+            title: t('order'),
+            path: paths.dashboard.order.root,
+            icon: ICONS.order,
+            children: [
+              { title: t('list'), path: paths.dashboard.order.root },
+              { title: t('details'), path: paths.dashboard.order.demo.details },
+            ],
+          },
+
+          // INVOICE
+          {
+            title: t('invoice'),
+            path: paths.dashboard.invoice.root,
+            icon: ICONS.invoice,
+            children: [
+              { title: t('list'), path: paths.dashboard.invoice.root },
+              {
+                title: t('details'),
+                path: paths.dashboard.invoice.demo.details,
+              },
+              { title: t('create'), path: paths.dashboard.invoice.new },
+              { title: t('edit'), path: paths.dashboard.invoice.demo.edit },
+            ],
+          },
+
+          // BLOG
+          {
+            title: t('blog'),
+            path: paths.dashboard.post.root,
+            icon: ICONS.blog,
+            children: [
+              { title: t('list'), path: paths.dashboard.post.root },
+              { title: t('details'), path: paths.dashboard.post.demo.details },
+              { title: t('create'), path: paths.dashboard.post.new },
+              { title: t('edit'), path: paths.dashboard.post.demo.edit },
+            ],
+          },
+
+          // JOB
+          {
+            title: t('job'),
+            path: paths.dashboard.job.root,
+            icon: ICONS.job,
+            children: [
+              { title: t('list'), path: paths.dashboard.job.root },
+              { title: t('details'), path: paths.dashboard.job.demo.details },
+              { title: t('create'), path: paths.dashboard.job.new },
+              { title: t('edit'), path: paths.dashboard.job.demo.edit },
+            ],
+          },
+
+          // TOUR
+          {
+            title: t('tour'),
+            path: paths.dashboard.tour.root,
+            icon: ICONS.tour,
+            children: [
+              { title: t('list'), path: paths.dashboard.tour.root },
+              { title: t('details'), path: paths.dashboard.tour.demo.details },
+              { title: t('create'), path: paths.dashboard.tour.new },
+              { title: t('edit'), path: paths.dashboard.tour.demo.edit },
+            ],
+          },
+
+          // FILE MANAGER
+          {
+            title: t('file_manager'),
+            path: paths.dashboard.fileManager,
+            icon: ICONS.folder,
+          },
+
+          // MAIL
+          {
+            title: t('mail'),
+            path: paths.dashboard.mail,
+            icon: ICONS.mail,
+            info: <Label color="error">+32</Label>,
+          },
+
+          // CHAT
+          {
+            title: t('chat'),
+            path: paths.dashboard.chat,
+            icon: ICONS.chat,
+          },
+
+          // CALENDAR
+          {
+            title: t('calendar'),
+            path: paths.dashboard.calendar,
+            icon: ICONS.calendar,
+          },
+
+          // KANBAN
+          {
+            title: t('kanban'),
+            path: paths.dashboard.kanban,
+            icon: ICONS.kanban,
+          },
+        ],
+      },
+
+      // DEMO MENU STATES
+      {
+        subheader: t(t('other_cases')),
+        items: [
+          {
+            // default roles : All roles can see this entry.
+            // roles: ['user'] Only users can see this item.
+            // roles: ['admin'] Only admin can see this item.
+            // roles: ['admin', 'manager'] Only admin/manager can see this item.
+            // Reference from 'src/guards/RoleBasedGuard'.
+            title: t('item_by_roles'),
+            path: paths.dashboard.permission,
+            icon: ICONS.lock,
+            roles: ['admin', 'manager'],
+            caption: t('only_admin_can_see_this_item'),
+          },
+          {
+            title: t('menu_level'),
+            path: '#/dashboard/menu_level',
+            icon: ICONS.menuItem,
+            children: [
+              {
+                title: t('menu_level_1a'),
+                path: '#/dashboard/menu_level/menu_level_1a',
+              },
+              {
+                title: t('menu_level_1b'),
+                path: '#/dashboard/menu_level/menu_level_1b',
+                children: [
+                  {
+                    title: t('menu_level_2a'),
+                    path: '#/dashboard/menu_level/menu_level_1b/menu_level_2a',
+                  },
+                  {
+                    title: t('menu_level_2b'),
+                    path: '#/dashboard/menu_level/menu_level_1b/menu_level_2b',
+                    children: [
+                      {
+                        title: t('menu_level_3a'),
+                        path: '#/dashboard/menu_level/menu_level_1b/menu_level_2b/menu_level_3a',
+                      },
+                      {
+                        title: t('menu_level_3b'),
+                        path: '#/dashboard/menu_level/menu_level_1b/menu_level_2b/menu_level_3b',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            title: t('item_disabled'),
+            path: '#disabled',
+            icon: ICONS.disabled,
+            disabled: true,
+          },
+          {
+            title: t('item_label'),
+            path: '#label',
+            icon: ICONS.label,
+            info: (
+              <Label color="info" startIcon={<Iconify icon="solar:bell-bing-bold-duotone" />}>
+                NEW
+              </Label>
+            ),
+          },
+          {
+            title: t('item_caption'),
+            path: '#caption',
+            icon: ICONS.menuItem,
+            caption:
+              'Quisque malesuada placerat nisl. In hac habitasse platea dictumst. Cras id dui. Pellentesque commodo eros a enim. Morbi mollis tellus ac sapien.',
+          },
+          {
+            title: t('item_external_link'),
+            path: 'https://www.google.com/',
+            icon: ICONS.external,
+          },
+          {
+            title: t('blank'),
+            path: paths.dashboard.blank,
+            icon: ICONS.blank,
+          },
+        ],
+      },
+    ],
+    [t]
+  );
+
+  return data;
+}

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

@@ -0,0 +1,118 @@
+import PropTypes from 'prop-types';
+
+import Stack from '@mui/material/Stack';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import { useTheme } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+
+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 SvgColor from 'src/components/svg-color';
+import { useSettingsContext } from 'src/components/settings';
+
+import Searchbar from '../common/searchbar';
+import { NAV, HEADER } from '../config-layout';
+import SettingsButton from '../common/settings-button';
+import AccountPopover from '../common/account-popover';
+import ContactsPopover from '../common/contacts-popover';
+import LanguagePopover from '../common/language-popover';
+import NotificationsPopover from '../common/notifications-popover';
+
+// ----------------------------------------------------------------------
+
+export default function Header({ onOpenNav }) {
+  const theme = useTheme();
+
+  const settings = useSettingsContext();
+
+  const isNavHorizontal = settings.themeLayout === 'horizontal';
+
+  const isNavMini = settings.themeLayout === 'mini';
+
+  const lgUp = useResponsive('up', 'lg');
+
+  const offset = useOffSetTop(HEADER.H_DESKTOP);
+
+  const offsetTop = offset && !isNavHorizontal;
+
+  const renderContent = (
+    <>
+      {lgUp && isNavHorizontal && <Logo sx={{ mr: 2.5 }} />}
+
+      {!lgUp && (
+        <IconButton onClick={onOpenNav}>
+          <SvgColor src="/assets/icons/navbar/ic_menu_item.svg" />
+        </IconButton>
+      )}
+
+      <Searchbar />
+
+      <Stack
+        flexGrow={1}
+        direction="row"
+        alignItems="center"
+        justifyContent="flex-end"
+        spacing={{ xs: 0.5, sm: 1 }}
+      >
+        <LanguagePopover />
+
+        <NotificationsPopover />
+
+        <ContactsPopover />
+
+        <SettingsButton />
+
+        <AccountPopover />
+      </Stack>
+    </>
+  );
+
+  return (
+    <AppBar
+      sx={{
+        height: HEADER.H_MOBILE,
+        zIndex: theme.zIndex.appBar + 1,
+        ...bgBlur({
+          color: theme.palette.background.default,
+        }),
+        transition: theme.transitions.create(['height'], {
+          duration: theme.transitions.duration.shorter,
+        }),
+        ...(lgUp && {
+          width: `calc(100% - ${NAV.W_VERTICAL + 1}px)`,
+          height: HEADER.H_DESKTOP,
+          ...(offsetTop && {
+            height: HEADER.H_DESKTOP_OFFSET,
+          }),
+          ...(isNavHorizontal && {
+            width: 1,
+            bgcolor: 'background.default',
+            height: HEADER.H_DESKTOP_OFFSET,
+            borderBottom: `dashed 1px ${theme.palette.divider}`,
+          }),
+          ...(isNavMini && {
+            width: `calc(100% - ${NAV.W_MINI + 1}px)`,
+          }),
+        }),
+      }}
+    >
+      <Toolbar
+        sx={{
+          height: 1,
+          px: { lg: 5 },
+        }}
+      >
+        {renderContent}
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+Header.propTypes = {
+  onOpenNav: PropTypes.func,
+};