@levo-so/blocks 0.1.101 → 0.1.103

package/src/blocks/navbar/navbar-2.tsx

@@ -1,381 +0,0 @@
-"use client";
-
-import { cn } from "@levo-so/react";
-import type { ILevoBlockBaseProps } from "@levo-so/studio";
-import {
-  Box,
-  Button,
-  Container,
-  GlobalSearch,
-  Icon,
-  Image,
-  PopoverContent,
-  PopoverRoot,
-  PopoverTrigger,
-  Section,
-  Typography,
-} from "@levo-so/studio";
-import { ChevronDown, Menu, X } from "lucide-react";
-import React, { useEffect, useState } from "react";
-
-import type { INavbar1Content } from "./navbar-1.schema";
-
-const DropdownNavigationItem: React.FC<{
-  navItem: any;
-  index: number;
-  prefixKey: string;
-}> = ({ navItem, index, prefixKey }) => {
-  const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] = useState<boolean>(false);
-
-  const subItems = navItem?.["sub-items"] as Array<any>;
-
-  return (
-    <PopoverRoot
-      open={isDropdownPopoverOpen}
-      onOpenChange={(open) => setIsDropdownPopoverOpen(open)}
-    >
-      <PopoverTrigger
-        elementKey={`${prefixKey}.${index}.nav-item-dropdown-trigger`}
-        onMouseEnter={() => setIsDropdownPopoverOpen(true)}
-        data-levo_group_item
-      >
-        <Typography elementKey={`${prefixKey}.${index}.nav-item-dropdown-trigger-title`} />
-        <ChevronDown
-          aria-hidden="true"
-          style={{
-            position: "relative",
-            top: "1px",
-            height: "14px",
-            width: "14px",
-            transitionProperty:
-              "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-            transitionDuration: "300ms",
-            rotate: isDropdownPopoverOpen ? "180deg" : "0deg",
-            color: "var(--color-text-1)",
-          }}
-        />
-      </PopoverTrigger>
-      <PopoverContent
-        elementKey={`${prefixKey}.${index}.sub-items_levoGroup`}
-        data-levo_group
-        onMouseLeave={() => setIsDropdownPopoverOpen(false)}
-        inPortal={false}
-      >
-        {subItems && Array?.isArray(subItems)
-          ? subItems?.map((subItem: any, idx: number) => (
-              <Box
-                elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-link`}
-                key={`subItem_${index}_${idx}`}
-                data-levo_group_item
-                className={cn("group hover:bg-opacity-50", "")}
-              >
-                {subItem?.["sub-item-icon"] && (
-                  <Box
-                    elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon-container`}
-                    className="group-hover:bg-slate-200 group-hover:bg-opacity-80"
-                  >
-                    <Icon
-                      elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon`}
-                    />
-                  </Box>
-                )}
-                <Box
-                  elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-text-container`}
-                >
-                  <Typography
-                    elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-title`}
-                  />
-                  <Typography
-                    elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-description`}
-                  />
-                </Box>
-              </Box>
-            ))
-          : null}
-      </PopoverContent>
-    </PopoverRoot>
-  );
-};
-
-const DesktopNavItem: React.FC<{
-  navItem: any;
-  index: number;
-  prefixKey: string;
-}> = ({ index, navItem, prefixKey }) => {
-  const navSubItems = navItem?.["sub-items"] ?? [];
-  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
-
-  return (
-    <>
-      {isNavItemDropdown && (
-        <DropdownNavigationItem navItem={navItem} index={index} prefixKey={prefixKey} />
-      )}
-      {!isNavItemDropdown && (
-        <Typography data-levo_group_item elementKey={`${prefixKey}.${index}.nav-item-title`} />
-      )}
-    </>
-  );
-};
-
-const DesktopNavigationMenu: React.FC<{
-  navItems: any;
-  prefixKey: string;
-}> = ({ navItems, prefixKey }) => {
-  return (
-    <Box elementKey={`${prefixKey}_levoGroup`} data-levo_group>
-      {navItems?.map((item: any, index: number) => {
-        return (
-          <DesktopNavItem
-            navItem={item}
-            index={index}
-            key={`${prefixKey}.${index}`}
-            prefixKey={prefixKey}
-          />
-        );
-      })}
-    </Box>
-  );
-};
-
-const DropdownNavigationItemMobile: React.FC<{
-  navItem: any;
-  index: number;
-  setIsOpen: (value: boolean) => void;
-}> = ({ navItem, index, setIsOpen }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-
-  const subItems = navItem?.["sub-items"] as Array<any>;
-
-  return (
-    <Box elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-container`}>
-      <Box
-        elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger`}
-        onClick={() => setIsDropdownOpen((prev) => !prev)}
-      >
-        <Typography elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`} />
-        <ChevronDown
-          aria-hidden="true"
-          style={{
-            position: "relative",
-            top: "2px",
-            height: "16px",
-            width: "16px",
-            transitionProperty:
-              "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-            transitionDuration: "300ms",
-            rotate: isDropdownOpen ? "180deg" : "0deg",
-            color: "var(--color-text-1)",
-          }}
-        />
-      </Box>
-      {isDropdownOpen && (
-        <Box elementKey={`mobile-nav-menu.${index}.sub-items_levoGroup`} data-levo_group>
-          {subItems && Array?.isArray(subItems)
-            ? subItems?.map((subItem: any, idx: number) => {
-                return (
-                  <Box
-                    key={`subItem_${index}`}
-                    elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-link`}
-                    className={cn("group hover:bg-slate-100 hover:bg-opacity-50")}
-                    data-levo_group_item
-                  >
-                    {subItem?.["sub-item-icon"] && (
-                      <Box
-                        elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-icon-container`}
-                        className="bg-opacity-60 group-hover:bg-slate-200 group-hover:bg-opacity-80"
-                      >
-                        <Icon
-                          elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-icon`}
-                        />
-                      </Box>
-                    )}
-                    <Box
-                      elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-text-container`}
-                    >
-                      {subItem?.["sub-item-title"] && (
-                        <Box
-                          elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title-container`}
-                          onClick={() => setIsOpen(false)}
-                        >
-                          <Typography
-                            elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title`}
-                          />
-                        </Box>
-                      )}
-                      <Typography
-                        elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-description`}
-                      />
-                    </Box>
-                  </Box>
-                );
-              })
-            : null}
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-const MobileNavItem: React.FC<{
-  navItem: any;
-  index: number;
-  setIsOpen: (value: boolean) => void;
-}> = ({ navItem, index, setIsOpen }) => {
-  const navSubItems = navItem?.["sub-items"] ?? [];
-  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
-
-  return (
-    <React.Fragment>
-      {isNavItemDropdown && (
-        <DropdownNavigationItemMobile navItem={navItem} setIsOpen={setIsOpen} index={index} />
-      )}
-      {!isNavItemDropdown && (
-        <Box
-          data-levo_group_item
-          elementKey={`mobile-nav-menu.${index}.nav-item-title-container`}
-          onClick={() => setIsOpen(false)}
-        >
-          <Typography elementKey={`mobile-nav-menu.${index}.nav-item-title`} />
-        </Box>
-      )}
-    </React.Fragment>
-  );
-};
-
-const MobileNavigationSheet: React.FC<{
-  navItems: any;
-  content: any;
-  isOpen: boolean;
-  setIsOpen: (value: boolean) => void;
-}> = ({ navItems, content, isOpen, setIsOpen }) => {
-  return (
-    <React.Fragment>
-      <Box elementKey="mobile-nav-container">
-        <Box elementKey="mobile-search-container">
-          <GlobalSearch variant="icon" />
-        </Box>
-        <Button
-          elementKey="mobile-nav-menu-button"
-          aria-label="Open navigation"
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          {isOpen ? <X size={24} /> : <Menu size={24} />}
-        </Button>
-      </Box>
-      {isOpen && (
-        <Box elementKey="mobile-nav-menu-wrapper">
-          <Box elementKey="mobile-nav-menu_levoGroup" data-levo_group>
-            {Array.isArray(navItems)
-              ? navItems?.map((item, index) => {
-                  return (
-                    <MobileNavItem
-                      navItem={item}
-                      key={`${item?.["nav-item-title"]}_${index}`}
-                      setIsOpen={setIsOpen}
-                      index={index}
-                    />
-                  );
-                })
-              : null}
-          </Box>
-          {content?.["mobile-cta-group"]?.length > 0 && (
-            <Box elementKey="mobile-cta-group_levoGroup" data-levo_group>
-              {content?.["mobile-cta-group"]?.map((_: any, index: number) => (
-                <Button
-                  key={`mobile-cta-group.${index}.cta`}
-                  elementKey={`mobile-cta-group.${index}.cta`}
-                  data-levo_group_item
-                />
-              ))}
-            </Box>
-          )}
-        </Box>
-      )}
-    </React.Fragment>
-  );
-};
-
-const Navbar2: React.FC<ILevoBlockBaseProps<INavbar1Content>> = ({ content }) => {
-  const [isScrolled, setIsScrolled] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (window.scrollY === 0 && isScrolled) {
-        setIsScrolled(false);
-      } else if (window.scrollY >= 40 && !isScrolled) {
-        setIsScrolled(true);
-      }
-    };
-
-    document.addEventListener("scroll", handleScroll);
-
-    return () => {
-      document.removeEventListener("scroll", handleScroll);
-    };
-  }, [isScrolled]);
-
-  const leftDesktopNavLinks = content?.["left-desktop-nav-menu"];
-  const rightDesktopNavLinks = content?.["right-desktop-nav-menu"];
-  const mobileNavLinks = content?.["mobile-nav-menu"];
-
-  return (
-    <>
-      {isOpen && (
-        <Box
-          elementKey="mobile-background-overlay"
-          onClick={() => setIsOpen(false)}
-          className="fixed top-0 right-0 bottom-0 left-0 z-20 bg-black/20"
-        />
-      )}
-      <Section elementKey="layout" className={cn(isScrolled ? "top-2" : "top-8")}>
-        <Container elementKey="nav-container">
-          {leftDesktopNavLinks &&
-            Array?.isArray(leftDesktopNavLinks) &&
-            leftDesktopNavLinks?.length > 0 && (
-              <DesktopNavigationMenu
-                navItems={leftDesktopNavLinks}
-                prefixKey="left-desktop-nav-menu"
-              />
-            )}
-          <Image elementKey="nav-logo" alt="Logo" />
-          <Box elementKey="right-container">
-            {rightDesktopNavLinks &&
-              Array?.isArray(rightDesktopNavLinks) &&
-              rightDesktopNavLinks?.length > 0 && (
-                <DesktopNavigationMenu
-                  navItems={rightDesktopNavLinks}
-                  prefixKey="right-desktop-nav-menu"
-                />
-              )}
-            {content?.["desktop-cta-group"]?.length > 0 && (
-              <Box elementKey="desktop-cta-group_levoGroup" data-levo_group>
-                <Box elementKey="desktop-search-container">
-                  <GlobalSearch variant="icon" />
-                </Box>
-                {content?.["desktop-cta-group"]?.map((_: any, index: number) => (
-                  <Button
-                    key={`desktop-cta-group.${index}.cta`}
-                    elementKey={`desktop-cta-group.${index}.cta`}
-                    data-levo_group_item
-                  />
-                ))}
-              </Box>
-            )}
-          </Box>
-
-          <MobileNavigationSheet
-            navItems={mobileNavLinks || []}
-            content={content}
-            isOpen={isOpen}
-            setIsOpen={setIsOpen}
-          />
-        </Container>
-      </Section>
-    </>
-  );
-};
-
-export default Navbar2;