@ebubekirylmaz/link-test 1.0.0

package/src/layouts/common/header-simple.jsx

@@ -0,0 +1,76 @@
+import AccountPopover from "../common/account-popover";
+import AppBar from "@mui/material/AppBar";
+import { HEADER } from "../config-layout";
+import HeaderShadow from "./header-shadow";
+import Logo from "../../components/logo";
+import NavDesktop from "../MainLayout/nav/desktop";
+import NotificationsPopover from "../common/notifications-popover";
+import ProjectBar from "../common/ProjectBar";
+import React from "react";
+import SettingsButton from "./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 HeaderSimple({
+  handleItemSelect,
+  selectedItem,
+  setSelectedItem,
+}) {
+  const { menu } = config();
+  const theme = useTheme();
+  const { topMenu } = menu;
+  const mdUp = useResponsive("up", "md");
+  const offsetTop = useOffSetTop(HEADER.H_DESKTOP);
+
+  return (
+    <AppBar data-cy="header">
+      <Toolbar
+        sx={{
+          justifyContent: "space-between",
+          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,
+            },
+          }),
+        }}
+      >
+        <Stack direction="row" alignItems="center" spacing={5}>
+          <Logo />
+          <ProjectBar
+            handleItemSelect={handleItemSelect}
+            selectedItem={selectedItem}
+            setSelectedItem={setSelectedItem}
+          />
+        </Stack>
+        <Stack direction="row" alignItems="center" spacing={1}>
+          {mdUp && <NavDesktop data={topMenu} />}
+          <NotificationsPopover />
+
+          <SettingsButton />
+
+          <AccountPopover />
+        </Stack>
+      </Toolbar>
+
+      {offsetTop && <HeaderShadow />}
+    </AppBar>
+  );
+}

package/src/layouts/common/nav-toggle-button.jsx

@@ -0,0 +1,57 @@
+import IconButton from "@mui/material/IconButton";
+import Iconify from "../../components/Iconify";
+import { NAV } from "../config-layout";
+import React from "react";
+import { bgBlur } from "../../theme/css";
+import { useResponsive } from "../../hooks/use-responsive";
+import { useSettingsContext } from "../../components/settings";
+import { useTheme } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export default function NavToggleButton({ sx, ...other }) {
+  const theme = useTheme();
+
+  const settings = useSettingsContext();
+
+  const lgUp = useResponsive("up", "lg");
+
+  if (!lgUp) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      size="small"
+      onClick={() =>
+        settings.onUpdate(
+          "themeLayout",
+          settings.themeLayout === "vertical" ? "mini" : "vertical"
+        )
+      }
+      sx={{
+        p: 0.5,
+        top: 32,
+        position: "fixed",
+        left: NAV.W_VERTICAL - 12,
+        zIndex: 0,
+        border: `dashed 1px ${theme.palette.divider}`,
+        ...bgBlur({ opacity: 0.48, color: theme.palette.background.default }),
+        "&:hover": {
+          bgcolor: "background.default",
+        },
+        ...sx,
+      }}
+      {...other}
+    >
+      <Iconify
+        width={16}
+        icon={
+          settings.themeLayout === "vertical"
+            ? "eva:arrow-ios-back-fill"
+            : "eva:arrow-ios-forward-fill"
+        }
+      />
+    </IconButton>
+  );
+}

package/src/layouts/common/notifications-popover/index.jsx

@@ -0,0 +1,177 @@
+import Badge from "@mui/material/Badge";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import Iconify from "../../../components/Iconify";
+import Label from "../../../components/label";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { motion } from "framer-motion";
+import { useBoolean } from "../../../hooks/use-boolean";
+import { useResponsive } from "../../../hooks/use-responsive";
+import { varHover } from "../../../components/animate";
+
+import { useCallback, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+const TABS = [
+  {
+    value: "all",
+    label: "All",
+    count: 0,
+  },
+  {
+    value: "unread",
+    label: "Unread",
+    count: 0,
+  },
+  {
+    value: "archived",
+    label: "Archived",
+    count: 0,
+  },
+];
+
+// ----------------------------------------------------------------------
+
+export default function NotificationsPopover() {
+  const drawer = useBoolean();
+
+  const smUp = useResponsive("up", "sm");
+
+  const [currentTab, setCurrentTab] = useState("all");
+
+  const handleChangeTab = useCallback((event, newValue) => {
+    setCurrentTab(newValue);
+  }, []);
+
+  const [notifications, setNotifications] = useState([]);
+
+  const totalUnRead = notifications.filter(
+    (item) => item.isUnRead === true
+  ).length;
+
+  const handleMarkAllAsRead = () => {
+    setNotifications(
+      notifications.map((notification) => ({
+        ...notification,
+        isUnRead: false,
+      }))
+    );
+  };
+
+  const renderHead = (
+    <Stack
+      direction="row"
+      alignItems="center"
+      sx={{ py: 2, pl: 2.5, pr: 1, minHeight: 68 }}
+    >
+      <Typography variant="h6" sx={{ flexGrow: 1 }}>
+        Notifications
+      </Typography>
+
+      {!!totalUnRead && (
+        <Tooltip title="Mark all as read">
+          <IconButton color="primary" onClick={handleMarkAllAsRead}>
+            <Iconify icon="eva:done-all-fill" />
+          </IconButton>
+        </Tooltip>
+      )}
+
+      {!smUp && (
+        <IconButton onClick={drawer.onFalse}>
+          <Iconify icon="mingcute:close-line" />
+        </IconButton>
+      )}
+    </Stack>
+  );
+
+  const renderTabs = (
+    <Tabs value={currentTab} onChange={handleChangeTab}>
+      {TABS.map((tab) => (
+        <Tab
+          key={tab.value}
+          iconPosition="end"
+          value={tab.value}
+          label={tab.label}
+          icon={
+            <Label
+              variant={
+                ((tab.value === "all" || tab.value === currentTab) &&
+                  "filled") ||
+                "soft"
+              }
+              color={
+                (tab.value === "unread" && "info") ||
+                (tab.value === "archived" && "success") ||
+                "default"
+              }
+            >
+              {tab.count}
+            </Label>
+          }
+          sx={{
+            "&:not(:last-of-type)": {
+              mr: 3,
+            },
+          }}
+        />
+      ))}
+    </Tabs>
+  );
+
+  return (
+    <>
+      <IconButton
+        component={motion.button}
+        whileTap="tap"
+        whileHover="hover"
+        variants={varHover(1.05)}
+        color={drawer.value ? "primary" : "default"}
+        onClick={drawer.onTrue}
+      >
+        <Badge badgeContent={totalUnRead} color="error">
+          <Iconify icon="solar:bell-bing-bold-duotone" width={24} />
+        </Badge>
+      </IconButton>
+
+      <Drawer
+        open={drawer.value}
+        onClose={drawer.onFalse}
+        anchor="right"
+        slotProps={{
+          backdrop: { invisible: true },
+        }}
+        PaperProps={{
+          sx: { width: 1, maxWidth: 420 },
+        }}
+      >
+        {renderHead}
+
+        <Divider />
+
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+          sx={{ pl: 2.5, pr: 1 }}
+        >
+          {renderTabs}
+          <IconButton onClick={handleMarkAllAsRead}>
+            <Iconify icon="solar:settings-bold-duotone" />
+          </IconButton>
+        </Stack>
+
+        <Divider />
+
+        <Box sx={{ p: 1 }}></Box>
+      </Drawer>
+    </>
+  );
+}

package/src/layouts/common/notifications-popover/notification-item.jsx

@@ -0,0 +1,252 @@
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FileThumbnail from "../../../components/file-thumbnail";
+import Label from "../../../components/label";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { fToNow } from "../../../utils/format-time";
+
+// ----------------------------------------------------------------------
+
+export default function NotificationItem({ notification }) {
+  const renderAvatar = (
+    <ListItemAvatar>
+      {notification.avatarUrl ? (
+        <Avatar
+          src={notification.avatarUrl}
+          sx={{ bgcolor: "background.neutral" }}
+        />
+      ) : (
+        <Stack
+          alignItems="center"
+          justifyContent="center"
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: "50%",
+            bgcolor: "background.neutral",
+          }}
+        >
+          <Box
+            component="img"
+            src={`/assets/icons/notification/${
+              (notification.type === "order" && "ic_order") ||
+              (notification.type === "chat" && "ic_chat") ||
+              (notification.type === "mail" && "ic_mail") ||
+              (notification.type === "delivery" && "ic_delivery")
+            }.svg`}
+            sx={{ width: 24, height: 24 }}
+          />
+        </Stack>
+      )}
+    </ListItemAvatar>
+  );
+
+  const renderText = (
+    <ListItemText
+      disableTypography
+      primary={reader(notification.title)}
+      secondary={
+        <Stack
+          direction="row"
+          alignItems="center"
+          sx={{ typography: "caption", color: "text.disabled" }}
+          divider={
+            <Box
+              sx={{
+                width: 2,
+                height: 2,
+                bgcolor: "currentColor",
+                mx: 0.5,
+                borderRadius: "50%",
+              }}
+            />
+          }
+        >
+          {fToNow(notification.createdAt)}
+          {notification.category}
+        </Stack>
+      }
+    />
+  );
+
+  const renderUnReadBadge = notification.isUnRead && (
+    <Box
+      sx={{
+        top: 26,
+        width: 8,
+        height: 8,
+        right: 20,
+        borderRadius: "50%",
+        bgcolor: "info.main",
+        position: "absolute",
+      }}
+    />
+  );
+
+  const friendAction = (
+    <Stack spacing={1} direction="row" sx={{ mt: 1.5 }}>
+      <Button size="small" variant="contained">
+        Accept
+      </Button>
+      <Button size="small" variant="outlined">
+        Decline
+      </Button>
+    </Stack>
+  );
+
+  const projectAction = (
+    <Stack alignItems="flex-start">
+      <Box
+        sx={{
+          p: 1.5,
+          my: 1.5,
+          borderRadius: 1.5,
+          color: "text.secondary",
+          bgcolor: "background.neutral",
+        }}
+      >
+        {reader(
+          `<p><strong>@Jaydon Frankie</strong> feedback by asking questions or just leave a note of appreciation.</p>`
+        )}
+      </Box>
+
+      <Button size="small" variant="contained">
+        Reply
+      </Button>
+    </Stack>
+  );
+
+  const fileAction = (
+    <Stack
+      spacing={1}
+      direction="row"
+      sx={{
+        pl: 1,
+        p: 1.5,
+        mt: 1.5,
+        borderRadius: 1.5,
+        bgcolor: "background.neutral",
+      }}
+    >
+      <FileThumbnail
+        file="http://localhost:8080/httpsdesign-suriname-2015.mp3"
+        sx={{ width: 40, height: 40 }}
+      />
+
+      <Stack
+        spacing={1}
+        direction={{ xs: "column", sm: "row" }}
+        flexGrow={1}
+        sx={{ minWidth: 0 }}
+      >
+        <ListItemText
+          disableTypography
+          primary={
+            <Typography
+              variant="subtitle2"
+              component="div"
+              sx={{ color: "text.secondary" }}
+              noWrap
+            >
+              design-suriname-2015.mp3
+            </Typography>
+          }
+          secondary={
+            <Stack
+              direction="row"
+              alignItems="center"
+              sx={{ typography: "caption", color: "text.disabled" }}
+              divider={
+                <Box
+                  sx={{
+                    mx: 0.5,
+                    width: 2,
+                    height: 2,
+                    borderRadius: "50%",
+                    bgcolor: "currentColor",
+                  }}
+                />
+              }
+            >
+              <span>2.3 GB</span>
+              <span>30 min ago</span>
+            </Stack>
+          }
+        />
+
+        <Button size="small" variant="outlined">
+          Download
+        </Button>
+      </Stack>
+    </Stack>
+  );
+
+  const tagsAction = (
+    <Stack direction="row" spacing={0.75} flexWrap="wrap" sx={{ mt: 1.5 }}>
+      <Label variant="outlined" color="info">
+        Design
+      </Label>
+      <Label variant="outlined" color="warning">
+        Dashboard
+      </Label>
+      <Label variant="outlined">Design system</Label>
+    </Stack>
+  );
+
+  const paymentAction = (
+    <Stack direction="row" spacing={1} sx={{ mt: 1.5 }}>
+      <Button size="small" variant="contained">
+        Pay
+      </Button>
+      <Button size="small" variant="outlined">
+        Decline
+      </Button>
+    </Stack>
+  );
+
+  return (
+    <ListItemButton
+      disableRipple
+      sx={{
+        p: 2.5,
+        alignItems: "flex-start",
+        borderBottom: (theme) => `dashed 1px ${theme.palette.divider}`,
+      }}
+    >
+      {renderUnReadBadge}
+
+      {renderAvatar}
+
+      <Stack sx={{ flexGrow: 1 }}>
+        {renderText}
+        {notification.type === "friend" && friendAction}
+        {notification.type === "project" && projectAction}
+        {notification.type === "file" && fileAction}
+        {notification.type === "tags" && tagsAction}
+        {notification.type === "payment" && paymentAction}
+      </Stack>
+    </ListItemButton>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function reader(data) {
+  return (
+    <Box
+      dangerouslySetInnerHTML={{ __html: data }}
+      sx={{
+        mb: 0.5,
+        "& p": { typography: "body2", m: 0 },
+        "& a": { color: "inherit", textDecoration: "none" },
+        "& strong": { typography: "subtitle2" },
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,48 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Iconify from "../../components/Iconify";
+import React from "react";
+import SettingsDialog from "../../widgets/SettingsDialog";
+import { motion } from "framer-motion";
+import { varHover } from "../../components/animate";
+
+// ----------------------------------------------------------------------
+
+export default function SettingsButton({ sx }) {
+  const [settingsOpen, setSettingsOpen] = React.useState(false);
+
+  return (
+    <>
+      <Box
+        component={motion.div}
+        animate={{
+          rotate: [0, settingsOpen ? 0 : 360],
+        }}
+        transition={{
+          duration: 12,
+          ease: "linear",
+          repeat: Infinity,
+        }}
+      >
+        <IconButton
+          component={motion.button}
+          whileTap="tap"
+          whileHover="hover"
+          variants={varHover(1.05)}
+          aria-label="settings"
+          onClick={() => setSettingsOpen(true)}
+          sx={{
+            width: 40,
+            height: 40,
+          }}
+        >
+          <Iconify icon="solar:settings-bold-duotone" width={24} />
+        </IconButton>
+      </Box>
+      <SettingsDialog
+        open={settingsOpen}
+        handleClose={() => setSettingsOpen(false)}
+      />
+    </>
+  );
+}

package/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/src/layouts/index.js

@@ -0,0 +1,7 @@
+"use client";
+export { default as CompactLayout } from "./CompactLayout";
+export { default as DashboardLayout } from "./DashboardLayout";
+export { default as MainLayout } from "./MainLayout";
+export { default as SimpleLayout } from "./SimpleLayout";
+export { default as TwoSideLayout } from "./TwoSideLayout";
+export { default as FullScreenLayout } from "./FullScreenLayout";