@evenicanpm/storefront-core 1.0.0-alpha

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

@@ -0,0 +1,70 @@
+"use client";
+
+import { Fragment, useContext } from "react";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import { Divider } from "@mui/material";
+// ICON COMPONENTS
+import { MdMenu as Menu } from "react-icons/md";
+import { MdClear as Clear } from "react-icons/md";
+// GLOBAL CUSTOM COMPONENT
+import Scrollbar from "@/components/_components/scrollbar/index";
+// RENDER MENU LEVEL FUNCTION
+import { renderLevels } from "./render-levels";
+// Nav Related
+import { NavContext } from "@/components/NavProvider/index";
+import {
+  transformCategoryNav,
+  transformCmsNav,
+} from "@/components/_components/navbar/utils/transform-nav";
+
+export default function MobileMenu() {
+  const { categories, cmsNav, isMobileSideNavOpen, toggleMobileSideNav } =
+    useContext(NavContext);
+  const categoriesNavItems = transformCategoryNav(categories ?? []);
+  const cmsNavItems = transformCmsNav(cmsNav ?? []);
+
+  return (
+    <Fragment>
+      <IconButton
+        onClick={toggleMobileSideNav}
+        sx={{ flexShrink: 0, color: "grey.600" }}
+      >
+        <Menu />
+      </IconButton>
+
+      <Drawer
+        anchor="left"
+        open={isMobileSideNavOpen}
+        onClose={toggleMobileSideNav}
+        sx={{ zIndex: 15001 }}
+      >
+        <Box width="100vw" height="100%" position="relative">
+          <Scrollbar autoHide={false} sx={{ height: "100vh" }}>
+            <Box
+              px={5}
+              py={8}
+              maxWidth={500}
+              margin="auto"
+              position="relative"
+              height="100%"
+            >
+              <IconButton
+                onClick={toggleMobileSideNav}
+                sx={{ position: "absolute", right: 30, top: 15 }}
+              >
+                <Clear />
+              </IconButton>
+
+              {/* Multi level menu render */}
+              {renderLevels(categoriesNavItems, toggleMobileSideNav)}
+              <Divider sx={{ my: 2 }} />
+              {renderLevels(cmsNavItems, toggleMobileSideNav)}
+            </Box>
+          </Scrollbar>
+        </Box>
+      </Drawer>
+    </Fragment>
+  );
+}

package/src/components/_components/navbar/mobile-menu/render-levels.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, vi } from "vitest";
+import { renderLevels } from "./render-levels";
+import { render, screen } from "@testing-library/react";
+import { transformCmsNav } from "../utils/transform-nav";
+import { CmsNavItem } from "@/cms/interfaces/navigation";
+
+describe("Render Nested Mobile Nav", () => {
+  const cmsNav = transformCmsNav(mockCmsData as unknown as CmsNavItem[]);
+  const handleClose = vi.fn();
+  it("should render the menu ", () => {
+    render(renderLevels(cmsNav, handleClose));
+    expect(screen.getByText("NESTED")).toBeInTheDocument();
+  });
+
+  it("should expand dropdown when clicked", () => {
+    render(renderLevels(cmsNav, handleClose));
+    screen.getByText("My Page").click();
+    expect(screen.getByText("NESTED")).toBeInTheDocument();
+  });
+
+  it("should navigate to page when link is clicked", () => {
+    render(renderLevels(cmsNav, handleClose));
+
+    const link = screen.getByText("NESTED");
+    expect(link).toHaveAttribute("href", "https://google.com");
+
+    link.click();
+    expect(handleClose).toHaveBeenCalled();
+
+    //Can't test actual navigation unless we use router.push() instead of Link and then mock it
+    // Should be part of E2E tests
+  });
+});
+
+const mockCmsData = [
+  {
+    id: 3,
+    title: "My Page",
+    menuAttached: false,
+    order: 1,
+    path: "/pages/my-page",
+    type: "INTERNAL",
+    uiRouterKey: "my-page",
+    slug: "pages-my-page",
+    external: false,
+    related: {
+      id: 1,
+      title: "My Page",
+      slug: "my-page",
+      createdAt: "2025-01-20T17:27:16.685Z",
+      updatedAt: "2025-01-20T17:27:19.608Z",
+      publishedAt: "2025-01-20T17:27:19.603Z",
+      __contentType: "api::page.page",
+      navigationItemId: 3,
+      __templateName: "Generic",
+    },
+    items: [
+      {
+        id: 4,
+        title: "NESTED",
+        menuAttached: false,
+        order: 1,
+        path: "https://google.com",
+        type: "EXTERNAL",
+        uiRouterKey: "nested",
+        slug: "",
+        external: true,
+      },
+    ],
+  },
+];

package/src/components/_components/navbar/mobile-menu/render-levels.tsx

@@ -0,0 +1,62 @@
+import Box from "@mui/material/Box";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import { MdExpandMore as ExpandMore } from "react-icons/md";
+// GLOBAL CUSTOM COMPONENTS
+import { H6 } from "@/components/_components/Typography";
+import { NavLink } from "@/components/_components/nav-link/index";
+
+import { TransformedNavItem } from "@/components/_components/navbar/utils/transform-nav";
+
+const ACCORDION_STYLES = {
+  "&:not(:last-child)": { borderBottom: 0 },
+  "&:before": { display: "none" },
+};
+
+const ACCORDION_SUMMARY_STYLES = {
+  padding: 0,
+  minHeight: 48,
+  boxShadow: "none",
+  "& .Mui-expanded": { color: "primary.main", margin: 0 },
+  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+    margin: 0,
+    "& .MuiSvgIcon-root": { color: "primary.main" },
+  },
+};
+
+export const renderLevels = (
+  data: TransformedNavItem[],
+  handleClose: () => void,
+) => {
+  return data.map((nav: TransformedNavItem, index: number) => {
+    const { href, title, items } = nav;
+    if (items && items.length) {
+      return (
+        <Accordion
+          square
+          key={index}
+          elevation={0}
+          disableGutters
+          sx={ACCORDION_STYLES}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMore style={{ fontSize: "1.5rem" }} />}
+            sx={ACCORDION_SUMMARY_STYLES}
+          >
+            <H6>{title}</H6>
+          </AccordionSummary>
+
+          <Box mx={2}>{renderLevels(items, handleClose)}</Box>
+        </Accordion>
+      );
+    }
+
+    return (
+      <Box key={index} py={1}>
+        <NavLink href={href} onClick={handleClose}>
+          {title}
+        </NavLink>
+      </Box>
+    );
+  });
+};

package/src/components/_components/navbar/nav-list/cms-nav.test.tsx

@@ -0,0 +1,84 @@
+/*import React from "react";
+import { expect, describe, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { NavContext } from "@/components/NavProvider";
+import NavCms from "./index";
+
+describe("NavCms", () => {
+  it("Renders the page links and dropdown menu", () => {
+    render(
+      <NavContext.Provider value={mockData}>
+        <NavCms />
+      </NavContext.Provider>,
+    );
+
+    expect(screen.getByText("About Us")).toBeInTheDocument();
+    expect(screen.getByText("Pages")).toBeInTheDocument();
+    expect(screen.getByText("My Page")).toBeInTheDocument();
+  });
+});
+
+const mockData = {
+  categories: [],
+  cmsNav: [
+    {
+      id: 1,
+      title: "About Us",
+      menuAttached: false,
+      order: 1,
+      path: "https://youtube.com",
+      type: "EXTERNAL",
+      uiRouterKey: "about-us",
+      slug: {},
+      external: true,
+    },
+    {
+      id: 2,
+      title: "Pages",
+      menuAttached: true,
+      order: 2,
+      path: "/pages",
+      type: "WRAPPER",
+      uiRouterKey: "pages",
+      slug: "pages-1",
+      external: false,
+      items: [
+        {
+          id: 3,
+          title: "My Page",
+          menuAttached: false,
+          order: 1,
+          path: "/pages/my-page",
+          type: "INTERNAL",
+          uiRouterKey: "my-page",
+          slug: "pages-my-page",
+          external: false,
+          related: {
+            id: 1,
+            title: "My Page",
+            slug: "my-page",
+            createdAt: "2025-01-20T17:27:16.685Z",
+            updatedAt: "2025-01-20T17:27:19.608Z",
+            publishedAt: "2025-01-20T17:27:19.603Z",
+            __contentType: "api::page.page",
+            navigationItemId: 3,
+            __templateName: "Generic",
+          },
+          items: [
+            {
+              id: 4,
+              title: "NESTED",
+              menuAttached: false,
+              order: 1,
+              path: "https://google.com",
+              type: "EXTERNAL",
+              uiRouterKey: "nested",
+              slug: {},
+              external: true,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};*/

package/src/components/_components/navbar/nav-list/index.ts

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

package/src/components/_components/navbar/nav-list/nav-item-child.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { PropsWithChildren, RefObject } from "react";
+import { usePathname } from "next/navigation";
+import MenuItem from "@mui/material/MenuItem";
+// MUI ICON COMPONENTS
+import ArrowLeft from "@mui/icons-material/ArrowLeft";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+// GLOBAL CUSTOM HOOKS
+import useOverflowDetect from "@/components/_components/hooks/useOverflowDetect";
+import useSettings from "@/components/_components/hooks/useSettings";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@/components/_components/Typography";
+import BazaarCard from "@/components/_components/BazaarCard";
+// STYLED COMPONENTS
+import { ParentNav, ParentNavItem } from "../styles";
+
+import { TransformedNavItem } from "@/components/_components/navbar/utils/transform-nav";
+
+// ==============================================================
+interface Props extends PropsWithChildren {
+  nav: TransformedNavItem;
+}
+// ==============================================================
+
+export default function NavItemChild({ nav, children }: Props) {
+  const pathname = usePathname();
+  const { settings } = useSettings();
+  const { checkOverflow, elementRef, isLeftOverflowing, isRightOverflowing } =
+    useOverflowDetect();
+
+  const isActive = nav.items.flat().find((item) => {
+    const { href } = item;
+    if (!href || !pathname) return false;
+    return href === pathname;
+  });
+
+  return (
+    <ParentNav
+      minWidth={200}
+      active={isActive ? 1 : 0}
+      onMouseEnter={checkOverflow}
+    >
+      <MenuItem color="grey.700">
+        <Span flex="1 1 0">{nav?.title}</Span>
+
+        {settings.direction === "ltr" ? (
+          <ArrowRight fontSize="small" />
+        ) : (
+          <ArrowLeft fontSize="small" />
+        )}
+      </MenuItem>
+
+      <ParentNavItem
+        ref={elementRef as RefObject<HTMLDivElement>}
+        left={isLeftOverflowing}
+        right={isRightOverflowing}
+        className="parent-nav-item"
+      >
+        <BazaarCard elevation={3} sx={{ py: "0.5rem", minWidth: 180 }}>
+          {children}
+        </BazaarCard>
+      </ParentNavItem>
+    </ParentNav>
+  );
+}

package/src/components/_components/navbar/nav-list/nav-list.tsx

@@ -0,0 +1,119 @@
+import { useContext } from "react";
+import MenuItem from "@mui/material/MenuItem";
+// MUI ICON COMPONENTS
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+// GLOBAL CUSTOM COMPONENTS
+import { NavLink } from "@/components/_components/nav-link/index";
+import { FlexBox } from "@/components/_components/flex-box/index";
+import BazaarCard from "@/components/_components/BazaarCard";
+// LOCAL CUSTOM COMPONENTS
+import MegaMenu from "../mega-menu/index";
+import NavItemChild from "./nav-item-child";
+import CategoryBasedMenu from "../category-based-menu/index";
+// STYLED COMPONENTS
+import { StyledNavLink, NAV_LINK_STYLES, ChildNavListWrapper } from "../styles";
+// NAV RELATED
+import { NavContext } from "@/components/NavProvider/index";
+import {
+  transformCmsNav,
+  TransformedNavItem,
+} from "@/components/_components/navbar/utils/transform-nav";
+
+export default function NavigationList() {
+  const renderNestedNav = (list: TransformedNavItem[], isRoot = false) => {
+    return list.map((nav: TransformedNavItem) => {
+      const { href, title, items } = nav;
+
+      if (isRoot) {
+        // We can show mega menu or full screen mega menu based on client requirements
+        // Just set menuType as required in transform nav data (/navbar/utils/transform-nav.ts) and see the magic.
+        // By default we show normal menu
+
+        // Show mega menu - column based menu with single level children
+        if (nav.menuType === "mega-menu") {
+          return (
+            <MegaMenu
+              key={title}
+              title={title}
+              menuList={
+                nav.items.map((item) => [item]) as TransformedNavItem[][]
+              }
+            />
+          );
+        }
+
+        // Show fullscreen mega menu with multi level children - good to use for categories
+        if (nav.menuType === "full-screen-mega-menu") {
+          return (
+            <CategoryBasedMenu
+              key={title}
+              title={title}
+              menuList={nav.items as TransformedNavItem[]}
+            />
+          );
+        }
+
+        const hasChildren = !!(items && items.length);
+
+        if (href && !hasChildren) {
+          return (
+            <StyledNavLink href={href} key={title}>
+              {title}
+            </StyledNavLink>
+          );
+        }
+
+        if (hasChildren) {
+          return (
+            <FlexBox
+              key={title}
+              alignItems="center"
+              position="relative"
+              flexDirection="column"
+              sx={{
+                "&:hover": { "& > .child-nav-item": { display: "block" } },
+              }}
+            >
+              <FlexBox alignItems="flex-end" gap={0.3} sx={NAV_LINK_STYLES}>
+                {title}{" "}
+                <KeyboardArrowDown
+                  sx={{ color: "grey.500", fontSize: "1.1rem" }}
+                />
+              </FlexBox>
+
+              <ChildNavListWrapper className="child-nav-item">
+                <BazaarCard
+                  elevation={3}
+                  sx={{ mt: 2.5, py: 1, minWidth: 100 }}
+                >
+                  {renderNestedNav(items as TransformedNavItem[])}
+                </BazaarCard>
+              </ChildNavListWrapper>
+            </FlexBox>
+          );
+        }
+      } else {
+        const hasChildren = !!(items && items.length);
+        if (href && !hasChildren) {
+          return (
+            <NavLink href={href} key={title}>
+              <MenuItem>{title}</MenuItem>
+            </NavLink>
+          );
+        }
+
+        if (hasChildren) {
+          return (
+            <NavItemChild nav={nav} key={title}>
+              {renderNestedNav(items as TransformedNavItem[])}
+            </NavItemChild>
+          );
+        }
+      }
+    });
+  };
+
+  const cmsList = transformCmsNav(useContext(NavContext).cmsNav ?? []);
+
+  return <FlexBox gap={4}>{renderNestedNav(cmsList, true)}</FlexBox>;
+}

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

@@ -0,0 +1,43 @@
+"use client";
+// LOCAL CUSTOM COMPONENTS
+import Categories from "./categories";
+import NavigationList from "./nav-list/index";
+// STYLED COMPONENTS
+import { NavBarWrapper, InnerContainer } from "./styles";
+// DATA TYPES
+
+// ==========================================================
+interface Props {
+  border?: number;
+  elevation?: number;
+  hideCategories?: boolean;
+}
+// ==========================================================
+
+export default function Navbar({
+  border = 0,
+  elevation = 2,
+  hideCategories = false,
+}: Props) {
+  return (
+    <NavBarWrapper
+      hoverEffect={false}
+      elevation={elevation}
+      border={border || 0}
+    >
+      {hideCategories ? (
+        <InnerContainer sx={{ justifyContent: "center" }}>
+          <NavigationList />
+        </InnerContainer>
+      ) : (
+        <InnerContainer>
+          {/* CATEGORY MEGA MENU */}
+          <Categories />
+
+          {/* HORIZONTAL MENU */}
+          <NavigationList />
+        </InnerContainer>
+      )}
+    </NavBarWrapper>
+  );
+}

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

@@ -0,0 +1,90 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import styled from "@mui/material/styles/styled";
+import Container from "@mui/material/Container";
+// GLOBAL CUSTOM COMPONENTS
+import { NavLink } from "@/components/_components/nav-link/index";
+import BazaarCard from "@/components/_components/BazaarCard";
+
+// COMMON STYLED OBJECT
+export const NAV_LINK_STYLES = {
+  fontWeight: 600,
+  cursor: "pointer",
+  transition: "color 150ms ease-in-out",
+  "&:hover": { color: "primary.main" },
+  "&:last-child": { marginRight: 0 },
+};
+
+export const StyledNavLink = styled(NavLink)({ ...NAV_LINK_STYLES });
+
+export const ParentNav = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: number }>(({ theme, active }) => ({
+  position: "relative",
+  "&:hover": {
+    color: theme.palette.primary.main,
+    "& > .parent-nav-item": { display: "block" },
+  },
+  ...(active && { color: theme.palette.primary.main }),
+}));
+
+type Args = { left: boolean; right: boolean };
+
+export const ParentNavItem = styled("div", {
+  shouldForwardProp: (prop) => prop !== "left" && prop !== "right",
+})<Args>(({ theme, left, right }) => ({
+  top: 0,
+  zIndex: 5,
+  left: "100%",
+  paddingLeft: 8,
+  display: "none",
+  position: "absolute",
+  ...(right && left && { right: "100%", left: "auto", paddingRight: 8 }),
+  [theme.breakpoints.down(1640)]: {
+    right: "100%",
+    left: "auto",
+    paddingRight: 8,
+  },
+}));
+
+export const NavBarWrapper = styled(BazaarCard, {
+  shouldForwardProp: (prop) => prop !== "border",
+})<{ border: number }>(({ theme, border }) => ({
+  height: "60px",
+  display: "block",
+  borderRadius: "0px",
+  position: "relative",
+  boxShadow: "none",
+  ...(border && { borderBottom: `1px solid ${theme.palette.grey[200]}` }),
+  [theme.breakpoints.down(1150)]: { display: "none" },
+}));
+
+export const InnerContainer = styled(Container)({
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+});
+
+export const CategoryMenuButton = styled(Button)(({ theme }) => ({
+  width: 220,
+  borderRadius: 4,
+  backgroundColor: theme.palette.grey[200],
+  ...(theme.direction === "rtl" && { ".dropdown-icon": { rotate: "180deg" } }),
+  ".prefix": {
+    gap: 8,
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    color: theme.palette.grey[800],
+  },
+}));
+
+export const ChildNavListWrapper = styled("div")({
+  zIndex: 5,
+  left: "50%",
+  top: "100%",
+  display: "none",
+  position: "absolute",
+  transform: "translate(-50%, 0%)",
+});