@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/mobile-navigation/styles/index.ts

@@ -0,0 +1,63 @@
+import Drawer from "@mui/material/Drawer";
+import styled from "@mui/material/styles/styled";
+import { NavLink } from "@/components/_components/nav-link/index";
+import { layoutConstant } from "@/components/_components/utils/constants";
+
+// STYLED COMPONENTS
+const Wrapper = styled("div")(({ theme }) => ({
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "none",
+  position: "fixed",
+  justifyContent: "space-around",
+  zIndex: theme.zIndex.drawer + 1,
+  height: layoutConstant.mobileNavHeight,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: "0px 1px 4px 3px rgba(0, 0, 0, 0.1)",
+  "@media only screen and (max-width: 900px)": {
+    display: "flex",
+    width: "100vw",
+  },
+}));
+
+const StyledNavLink = styled(NavLink)({
+  flex: "1 1 0",
+  display: "flex",
+  fontSize: "13px",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+});
+
+const StyledBox = styled("div")(({ theme }) => ({
+  flex: "1 1 0",
+  display: "flex",
+  fontSize: "13px",
+  cursor: "pointer",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+  transition: "color 150ms ease-in-out",
+  "&:hover": { color: `${theme.palette.primary.main} !important` },
+}));
+
+const StyledDrawer = styled(Drawer)(({ theme }) => ({
+  width: 250,
+  zIndex: 1501,
+  flexShrink: 0,
+  "& .MuiDrawer-paper": {
+    width: 250,
+    boxSizing: "border-box",
+    boxShadow: theme.shadows[2],
+  },
+}));
+
+const iconStyle = {
+  display: "flex",
+  marginBottom: "4px",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+export { Wrapper, StyledBox, StyledNavLink, StyledDrawer, iconStyle };

package/src/components/_components/nav-link/index.ts

@@ -0,0 +1,5 @@
+import NavLink from "./nav-link";
+import NavLink2 from "./nav-link-2";
+import NavLink3 from "./nav-link-3";
+
+export { NavLink, NavLink2, NavLink3 };

package/src/components/_components/nav-link/nav-link-2.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+// GLOBAL CUSTOM COMPONENT
+import { Small } from "@/components/_components/Typography";
+
+// ==============================================================
+interface NavLinkProps {
+  url: string;
+  title: string;
+  color?: string;
+  borderColor?: string;
+}
+// ==============================================================
+
+export default function NavLink2({
+  url,
+  color,
+  title = "SHOP NOW",
+  borderColor = "primary.600",
+}: NavLinkProps) {
+  return (
+    <Link href={url}>
+      <Small
+        fontWeight="700"
+        borderBottom={2}
+        color={color}
+        borderColor={borderColor}
+      >
+        {title}
+      </Small>
+    </Link>
+  );
+}

package/src/components/_components/nav-link/nav-link-3.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import Link from "next/link";
+// MUI ICON COMPONENT
+import ArrowForward from "@mui/icons-material/ArrowForward";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@/components/_components/Typography";
+
+//   ==========================================
+interface Props {
+  href: string;
+  text: string;
+  color?: string;
+  hoverColor?: string;
+}
+//   ==========================================
+
+export default function NavLink3({
+  href,
+  text,
+  color = "text.primary",
+  hoverColor = "primary.main",
+  ...props
+}: Props) {
+  return (
+    <Link href={href}>
+      <Span
+        color={color}
+        sx={{
+          color,
+          gap: 1,
+          lineHeight: 1,
+          fontWeight: 600,
+          alignItems: "center",
+          position: "relative",
+          paddingBottom: "4px",
+          display: "inline-flex",
+          ":after": {
+            left: 0,
+            bottom: 0,
+            width: "0%",
+            content: "''",
+            height: "2px",
+            transition: "0.3s",
+            position: "absolute",
+            backgroundColor: color,
+          },
+          ":hover": {
+            color: hoverColor,
+            "&::after": { width: "100%", backgroundColor: hoverColor },
+          },
+        }}
+        {...props}
+      >
+        {text}{" "}
+        <ArrowForward
+          sx={{
+            fontSize: 14,
+            flexShrink: 0,
+            transform: ({ direction }) =>
+              `rotate(${direction === "rtl" ? "180deg" : "0deg"})`,
+          }}
+        />
+      </Span>
+    </Link>
+  );
+}

package/src/components/_components/nav-link/nav-link.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { AnchorHTMLAttributes, CSSProperties } from "react";
+import styled from "@mui/material/styles/styled";
+import clsx from "clsx";
+
+// STYLED COMPONENT
+const StyledLink = styled(Link, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: number }>(({ theme, active }) => ({
+  position: "relative",
+  transition: "color 150ms ease-in-out",
+  color: active ? theme.palette.primary.main : "inherit",
+  "&:hover": { color: `${theme.palette.primary.main} !important` },
+}));
+
+// ==============================================================
+export interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  style?: CSSProperties;
+  className?: string;
+}
+// ==============================================================
+
+export default function NavLink({
+  href,
+  children,
+  style,
+  className,
+  ...props
+}: NavLinkProps) {
+  const pathname = usePathname();
+
+  // CHECK CURRENT ROUTE
+  const checkRouteMatch = () => {
+    if (href === "/") return pathname === href;
+    return pathname?.includes(href);
+  };
+
+  return (
+    <StyledLink
+      href={href}
+      style={style}
+      className={clsx(className)}
+      active={checkRouteMatch() ? 1 : 0}
+      {...props}
+    >
+      {children}
+    </StyledLink>
+  );
+}

package/src/components/_components/navbar/categories.tsx

@@ -0,0 +1,27 @@
+import { MdChevronRight as ChevronRight } from "react-icons/md";
+import { useTranslations } from "next-intl";
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@/components/_components/Typography";
+import CategoryMenu from "@/components/_components/categories/category-menu";
+// CUSTOM ICON COMPONENT
+import Category from "@/components/_components/icons/category";
+// STYLED COMPONENT
+import { CategoryMenuButton } from "./styles";
+
+export default function Categories() {
+  const t = useTranslations("Navigation");
+  return (
+    <CategoryMenu
+      render={(handler) => (
+        <CategoryMenuButton variant="text" onClick={(e) => handler(e)}>
+          <div className="prefix">
+            <Category fontSize="small" />
+            <Paragraph fontWeight={600}>{t("topLevelCategoryName")}</Paragraph>
+          </div>
+
+          <ChevronRight className="dropdown-icon" fontSize="large" />
+        </CategoryMenuButton>
+      )}
+    />
+  );
+}

package/src/components/_components/navbar/category-based-menu/category-based-menu.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+// GLOBAL CUSTOM COMPONENT
+import FlexRowCenter from "@/components/_components/flex-box/flex-row-center";
+// LOCAL CUSTOM COMPONENTS
+import Categories from "./components/categories";
+import ChildCategories from "./components/child-categories";
+// STYLED COMPONENTS
+import { Wrapper, StyledCard, MenusContainer } from "./styles";
+// DATA TYPES
+import { TransformedNavItem } from "../utils/transform-nav";
+
+// ===============================================================
+type Props = { menuList: TransformedNavItem[]; title: string };
+// ===============================================================
+
+export default function CategoryBasedMenu({ title, menuList }: Props) {
+  const [openList, setOpenList] = useState(menuList[0]?.title);
+
+  const categories = menuList.reduce<string[]>(
+    (prev, curr) => [...prev, curr.title],
+    [],
+  ); // Designate the data type
+  const subCategories = menuList.find((item) => item.title === openList);
+
+  return (
+    <Wrapper>
+      <FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
+        {title}{" "}
+        <KeyboardArrowDown sx={{ color: "grey.500", fontSize: "1.1rem" }} />
+      </FlexRowCenter>
+
+      <MenusContainer className="menu-list">
+        <StyledCard>
+          {/* MAIN CATEGORIES SECTION */}
+          {categories && (
+            <Categories
+              openList={openList}
+              categories={categories}
+              handleOpen={(item) => setOpenList(item)}
+            />
+          )}
+
+          {/* SUB / CHILD CATEGORIES SECTION */}
+          {subCategories && <ChildCategories categories={subCategories} />}
+        </StyledCard>
+      </MenusContainer>
+    </Wrapper>
+  );
+}

package/src/components/_components/navbar/category-based-menu/components/categories.tsx

@@ -0,0 +1,44 @@
+import ChevronRight from "@mui/icons-material/ChevronRight";
+// GLOBAL CUSTOM HOOK
+import useSettings from "@/components/_components/hooks/useSettings";
+// STYLED COMPONENTS
+import { CategoryList, CategoryListItem } from "../styles";
+
+// ==============================================================
+interface Props {
+  categories: string[];
+  openList: string;
+  handleOpen: (item: string) => void;
+}
+// ==============================================================
+
+export default function Categories({
+  categories,
+  openList,
+  handleOpen,
+}: Props) {
+  const { settings } = useSettings();
+
+  return (
+    <CategoryList>
+      {categories.map((item) => (
+        <CategoryListItem
+          key={item}
+          active={openList === item ? 1 : 0}
+          onMouseEnter={() => handleOpen(item)}
+        >
+          {item}
+
+          <ChevronRight
+            fontSize="small"
+            sx={{
+              transform: `rotate(${
+                settings.direction === "rtl" ? "180deg" : "0"
+              })`,
+            }}
+          />
+        </CategoryListItem>
+      ))}
+    </CategoryList>
+  );
+}

package/src/components/_components/navbar/category-based-menu/components/category-item.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import Avatar from "@mui/material/Avatar";
+// STYLED COMPONENT
+import { SubCategoryListItem } from "../styles";
+// DATA TYPES
+import { TransformedNavItem } from "../../utils/transform-nav";
+
+// ==============================================================
+type Props = { item: TransformedNavItem };
+// ==============================================================
+
+export default function CategoryItem({ item }: Props) {
+  const { title, href = "/", Icon, img } = item || {};
+
+  return (
+    <Link href={href}>
+      <SubCategoryListItem>
+        {img ? (
+          <Avatar
+            alt={title}
+            src={img}
+            sx={{ backgroundColor: "grey.100", borderRadius: 1 }}
+          />
+        ) : null}
+
+        {Icon ? <Icon sx={{ fontSize: 16 }} /> : null}
+        {title}
+      </SubCategoryListItem>
+    </Link>
+  );
+}

package/src/components/_components/navbar/category-based-menu/components/child-categories.tsx

@@ -0,0 +1,38 @@
+import Box from "@mui/material/Box";
+// LOCAL CUSTOM COMPONENTS
+import { H6 } from "@/components/_components/Typography";
+import Scrollbar from "@/components/_components/scrollbar/index";
+// LOCAL CUSTOM COMPONENT
+import CategoryItem from "./category-item";
+// STYLED COMPONENT
+import { SubCategoryList } from "../styles";
+// DATA TYPES
+import { TransformedNavItem } from "../../utils/transform-nav";
+
+// ==============================================================
+type Props = { categories: TransformedNavItem };
+// ==============================================================
+
+export default function ChildCategories({ categories }: Props) {
+  return (
+    <Scrollbar autoHide={false} sx={{ width: "100%" }}>
+      <Box px={6} py={2} height="100%">
+        {categories?.items.map((item, key) => (
+          <div key={key}>
+            {/* NAV / CATEGORY TITLE */}
+            <H6 fontWeight={700} my={3}>
+              {item?.title}
+            </H6>
+
+            {/* NAV LIST ITEM / CATEGORY LIST ITEM */}
+            <SubCategoryList>
+              {item?.items.map((sub, key) => (
+                <CategoryItem item={sub} key={key} />
+              ))}
+            </SubCategoryList>
+          </div>
+        ))}
+      </Box>
+    </Scrollbar>
+  );
+}

package/src/components/_components/navbar/category-based-menu/index.ts

@@ -0,0 +1 @@
+export { default } from "./category-based-menu";

package/src/components/_components/navbar/category-based-menu/styles.ts

@@ -0,0 +1,81 @@
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import styled from "@mui/material/styles/styled";
+// LOCAL CUSTOM COMPONENT
+import BazaarCard from "@/components/_components/BazaarCard";
+import getPaletteColor from "@/lib/get-palette-color";
+
+const Wrapper = styled("div")(({ theme }) => ({
+  cursor: "pointer",
+  transition: "color 150ms ease-in-out",
+  ":hover": {
+    color: theme.palette.primary.main,
+    "& .menu-list": { display: "block" },
+  },
+}));
+
+const MenusContainer = styled("div")({
+  left: 0,
+  zIndex: 2,
+  top: "68%",
+  width: "100%",
+  height: "100%",
+  display: "none",
+  minHeight: "500px",
+  maxHeight: "500px",
+  position: "absolute",
+});
+
+const StyledCard = styled(BazaarCard)({
+  marginTop: 12,
+  height: "100%",
+  display: "flex",
+  borderRadius: 0,
+});
+
+const CategoryList = styled(List)(({ theme }) => ({
+  padding: 0,
+  width: 300,
+  height: "100%",
+  borderRight: `1px solid ${theme.palette.grey[200]}`,
+}));
+
+const CategoryListItem = styled(ListItem, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: number }>(({ theme, active }) => ({
+  padding: "1rem 1.5rem",
+  transition: "all 0.3s",
+  justifyContent: "space-between",
+  ...(active && {
+    color: theme.palette.primary.main,
+    backgroundColor: getPaletteColor(theme, "primary", 100),
+  }),
+}));
+
+const SubCategoryList = styled(List)(({ theme }) => ({
+  padding: 0,
+  display: "grid",
+  gridTemplateColumns: "repeat(6, 1fr)",
+  [theme.breakpoints.down("xl")]: { gridTemplateColumns: "repeat(5, 1fr)" },
+  [theme.breakpoints.down("lg")]: { gridTemplateColumns: "repeat(4, 1fr)" },
+}));
+
+const SubCategoryListItem = styled(ListItem)(({ theme }) => ({
+  gap: 12,
+  fontSize: 13,
+  padding: "0",
+  alignItems: "center",
+  marginBottom: "1.5rem",
+  transition: "all 0.3s",
+  ":hover": { color: theme.palette.primary.main },
+}));
+
+export {
+  Wrapper,
+  StyledCard,
+  CategoryList,
+  MenusContainer,
+  SubCategoryList,
+  CategoryListItem,
+  SubCategoryListItem,
+};

package/src/components/_components/navbar/category-based-menu/types.ts

@@ -0,0 +1,18 @@
+import { SvgIconComponent } from "@mui/icons-material";
+
+export type NavLink = {
+  url: string;
+  img?: string;
+  title: string;
+  Icon?: SvgIconComponent;
+};
+
+export type MenuItem = {
+  title: string;
+  child: NavLink[];
+};
+
+export type MenuList = {
+  title: string;
+  child?: MenuItem[];
+};

package/src/components/_components/navbar/index.ts

@@ -0,0 +1 @@
+export { default as Navbar } from "./navbar";

package/src/components/_components/navbar/mega-menu/category-list.tsx

@@ -0,0 +1,29 @@
+import List from "@mui/material/List";
+// GLOBAL CUSTOM COMPONENTS
+import { H6 } from "@/components/_components/Typography";
+// STYLED COMPONENTS
+import { MenuListItem, StyledNavLink } from "./styles";
+// Types
+import { TransformedNavItem } from "../utils/transform-nav";
+
+// ==============================================================
+type Props = { category: TransformedNavItem };
+// ==============================================================
+
+export default function CategoryList({ category }: Props) {
+  const { title, items } = category || {};
+
+  return (
+    <List>
+      <H6 mb={0.5} pl={4}>
+        {title}
+      </H6>
+
+      {items.map((sub: TransformedNavItem, i) => (
+        <StyledNavLink href={sub.href} key={sub.title + i}>
+          <MenuListItem>{sub.title}</MenuListItem>
+        </StyledNavLink>
+      ))}
+    </List>
+  );
+}

package/src/components/_components/navbar/mega-menu/index.ts

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

package/src/components/_components/navbar/mega-menu/mega-menu.tsx

@@ -0,0 +1,71 @@
+import { RefObject } from "react";
+import Grid from "@mui/material/Grid2";
+import Card from "@mui/material/Card";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+// GLOBAL CUSTOM COMPONENTS
+import FlexRowCenter from "@/components/_components/flex-box/flex-row-center";
+// GLOBAL CUSTOM HOOKS
+import useOverflowDetect from "@/components/_components/hooks/useOverflowDetect";
+// LOCAL CUSTOM COMPONENT
+import CategoryList from "./category-list";
+// STYLED COMPONENTS
+import { MenusContainer, Wrapper } from "./styles";
+// DATA TYPES
+import { TransformedNavItem } from "../utils/transform-nav";
+
+// ===============================================================
+interface Props {
+  title: string;
+  menuList: Array<TransformedNavItem[]>;
+}
+// ===============================================================
+
+const Grid2Size = (length: number) => {
+  if (length === 1) return 12;
+  if (length === 2) return 6;
+  if (length === 3) return 4;
+  if (length === 4) return 3;
+  return 3;
+};
+
+export default function MegaMenu({ title, menuList }: Props) {
+  // get Grid2 size the basis of menu list
+  const Grid2 = Grid2Size(menuList?.length);
+
+  const STYLE = { py: 2, ":nth-of-type(odd)": { backgroundColor: "grey.100" } };
+
+  const { elementRef, isLeftOverflowing, isRightOverflowing, checkOverflow } =
+    useOverflowDetect();
+
+  return (
+    <Wrapper onMouseOver={checkOverflow}>
+      <FlexRowCenter fontWeight={600} alignItems="flex-end" gap={0.3}>
+        {title}
+        <KeyboardArrowDown className="icon" />
+      </FlexRowCenter>
+
+      <MenusContainer
+        ref={elementRef as RefObject<HTMLLIElement>}
+        className="menu-list"
+        left={isLeftOverflowing}
+        right={isRightOverflowing}
+      >
+        <Card
+          className="card"
+          elevation={3}
+          sx={{ mt: 1.5, overflow: "hidden" }}
+        >
+          <Grid container>
+            {menuList?.slice(0, 4).map((category, key) => (
+              <Grid size={Grid2} key={key} sx={STYLE}>
+                {category?.map((item, i) => (
+                  <CategoryList category={item} key={item.title + i} />
+                ))}
+              </Grid>
+            ))}
+          </Grid>
+        </Card>
+      </MenusContainer>
+    </Wrapper>
+  );
+}

package/src/components/_components/navbar/mega-menu/styles.ts

@@ -0,0 +1,43 @@
+import ListItem from "@mui/material/ListItem";
+import styled from "@mui/material/styles/styled";
+// GLOBAL CUSTOM COMPONENTS
+import { NavLink } from "@/components/_components/nav-link/index";
+
+// STYLED COMPONENTS
+export const Wrapper = styled("div")(({ theme }) => ({
+  cursor: "pointer",
+  position: "relative",
+  transition: "color 150ms ease-in-out",
+  ".icon": {
+    fontSize: "1.1rem",
+    color: theme.palette.grey[500],
+  },
+  ":hover": {
+    color: theme.palette.primary.main,
+    "& .menu-list": { display: "block" },
+  },
+}));
+
+type Props = { left: boolean; right: boolean };
+
+export const MenusContainer = styled(ListItem, {
+  shouldForwardProp: (prop) => prop !== "left" && prop !== "right",
+})<Props>(({ theme, left, right }) => ({
+  zIndex: 2,
+  top: "100%",
+  minWidth: 1000,
+  display: "none",
+  position: "absolute",
+  transform: "translate(-50%, 0%)",
+  [theme.breakpoints.down(1070)]: { minWidth: 800 },
+  ...(left && { transform: "translate(0%, 0%)" }),
+  ...(right && { transform: "translate(-80%, 0%)" }),
+  ...(left && right && { transform: "translate(-25%, 0%)" }),
+}));
+
+export const MenuListItem = styled(ListItem)(({ theme }) => ({
+  padding: ".5rem 2rem",
+  ":hover": { backgroundColor: theme.palette.action.hover },
+}));
+
+export const StyledNavLink = styled(NavLink)({ transition: "all 0.3s" });

package/src/components/_components/navbar/mobile-menu/index.ts

@@ -0,0 +1 @@
+export { default as MobileMenu } from "./mobile-menu";