@akinon/projectzero 2.0.0-beta.19 → 2.0.0-beta.20

package/app-template/src/views/header/mobile-hamburger-button.tsx

@@ -11,24 +11,21 @@ export default function MobileHamburgerButton() {
   const dispatch = useAppDispatch();
 
   return (
-    <div className="flex row-start-2 sm:hidden ">
+    <div className="flex sm:hidden">
       <PwaBackButton />
       <Button
         className={clsx([
-          'w-12',
-          'h-12',
-          'bg-secondary',
-          'text-white',
+          'h-auto',
+          'bg-transparent',
           'flex',
           'items-center',
           'justify-center',
           'px-0',
-          'border-none',
-          'hover:bg-secondary-hover'
+          'border-none'
         ])}
         onClick={() => dispatch(toggleMobileMenu())}
       >
-        <Icon name="hamburger" size={18} className="fill-white" />
+        <Icon name="hamburger" size={18} className="text-black" />
       </Button>
     </div>
   );

package/app-template/src/views/header/mobile-menu.tsx

@@ -90,10 +90,22 @@ export default function MobileMenu(props: MobileMenuProps) {
                       onClick={(e) => {
                         if (item.children.length > 0) {
                           e.preventDefault();
+                          e.stopPropagation();
                           setSelectedSubMenu(item);
+
+                          window?.parent?.postMessage(
+                            {
+                              type: 'MENU_TOGGLE',
+                              isMenuAction: true
+                            },
+                            '*'
+                          );
                         }
                       }}
                       className="flex items-center justify-between"
+                      data-is-menu-toggle={
+                        item.children.length > 0 ? 'true' : undefined
+                      }
                     >
                       <span>{item.label}</span>
                       <Icon name="chevron-end" size={14} />

package/app-template/src/views/header/navbar-menu-context.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+
+export const NAVBAR_MENU_PLACEHOLDER_ID = 'header';
+export const NAVBAR_MENU_SECTION_ID = 'header-nav';
+export const NAVBAR_MENU_WIDGET_SLUG = 'header-nav-settings-2';
+
+export const NAVBAR_MENU_BLOCK = {
+  id: 'header-nav-menu-item',
+  type: 'text',
+  label: 'Menu Items'
+} as const;
+
+const BLOCK_META = [NAVBAR_MENU_BLOCK];
+
+interface ThemeBlock {
+  id: string;
+  type: string;
+  label: string;
+  styles?: Record<string, unknown>;
+  properties?: Record<string, unknown>;
+  value?: unknown;
+}
+
+interface ThemeSection {
+  id: string;
+  blocks: ThemeBlock[];
+}
+
+interface ThemePlaceholder {
+  slug: string;
+  sections: ThemeSection[];
+}
+
+interface NavbarMenuContextValue {
+  isDesigner: boolean;
+  selectedBlockId: string | null;
+  getBlockStyles: (blockId: string) => Record<string, unknown> | undefined;
+  getBlockProperties: (blockId: string) => Record<string, unknown> | undefined;
+}
+
+const NavbarMenuContext = createContext<NavbarMenuContextValue>({
+  isDesigner: false,
+  selectedBlockId: null,
+  getBlockStyles: () => undefined,
+  getBlockProperties: () => undefined
+});
+
+export const NavbarMenuProvider = ({ children }: PropsWithChildren) => {
+  const designerState = useExternalDesigner({
+    placeholderId: NAVBAR_MENU_PLACEHOLDER_ID
+  });
+
+  const isDesignerRef = useRef(false);
+  const [isDesignerChecked, setIsDesignerChecked] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    isDesignerRef.current = window.self !== window.top;
+    setIsDesignerChecked(true);
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
+    new Map()
+  );
+  const hasReceivedThemeStyles = useRef(false);
+  const hasRegisteredNativeWidget = useRef(false);
+  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(new Map());
+
+  const widgetData = useNativeWidgetData({
+    widgetSlug: NAVBAR_MENU_WIDGET_SLUG,
+    sectionId: NAVBAR_MENU_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const getBlockWithStyles = useCallback(
+    (blockDef: typeof NAVBAR_MENU_BLOCK) => {
+      const existingBlock = themeBlocksRef.current.get(blockDef.id);
+      return {
+        id: blockDef.id,
+        type: blockDef.type,
+        label: blockDef.label,
+        properties: existingBlock?.properties || {},
+        styles: existingBlock?.styles || {}
+      };
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (hasRegisteredNativeWidget.current) return;
+
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) return;
+
+    const nativeWidgetConfig = {
+      placeholderId: NAVBAR_MENU_PLACEHOLDER_ID,
+      section: {
+        id: NAVBAR_MENU_SECTION_ID,
+        type: 'native',
+        label: 'Navigation Menu',
+        blocks: [getBlockWithStyles(NAVBAR_MENU_BLOCK)]
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    hasRegisteredNativeWidget.current = true;
+  }, [getBlockWithStyles]);
+
+  useEffect(() => {
+    if (!isDesignerChecked || isDesigner || widgetData.isLoading) return;
+    if (hasReceivedThemeStyles.current) return;
+
+    const blockMap = new Map<string, ThemeBlock>();
+    widgetData.blocks.forEach((block) => {
+      blockMap.set(block.id, {
+        id: block.id,
+        type: block.type || 'text',
+        label: block.label || block.id,
+        styles: block.styles,
+        properties: block.properties,
+        value: block.value
+      });
+    });
+
+    if (blockMap.size > 0) {
+      setThemeBlocks(blockMap);
+      themeBlocksRef.current = blockMap;
+    }
+  }, [isDesignerChecked, isDesigner, widgetData.isLoading, widgetData.blocks]);
+
+  const indexBlocks = useCallback(
+    (blocks: ThemeBlock[], map: Map<string, ThemeBlock>) => {
+      blocks.forEach((block) => {
+        map.set(block.id, block);
+      });
+    },
+    []
+  );
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders?.find(
+          (p: ThemePlaceholder) => p.slug === NAVBAR_MENU_PLACEHOLDER_ID
+        );
+
+        const navSection = placeholder?.sections?.find(
+          (s: ThemeSection) => s.id === NAVBAR_MENU_SECTION_ID
+        );
+
+        if (navSection?.blocks) {
+          const blockMap = new Map<string, ThemeBlock>();
+          indexBlocks(navSection.blocks, blockMap);
+
+          if (blockMap.size > 0) {
+            hasReceivedThemeStyles.current = true;
+            setThemeBlocks(blockMap);
+            themeBlocksRef.current = blockMap;
+          }
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [indexBlocks]);
+
+  const getBlockStyles = useCallback(
+    (blockId: string) => themeBlocks.get(blockId)?.styles,
+    [themeBlocks]
+  );
+
+  const getBlockProperties = useCallback(
+    (blockId: string) => themeBlocks.get(blockId)?.properties,
+    [themeBlocks]
+  );
+
+  return (
+    <NavbarMenuContext.Provider
+      value={{
+        ...designerState,
+        getBlockStyles,
+        getBlockProperties
+      }}
+    >
+      {children}
+    </NavbarMenuContext.Provider>
+  );
+};
+
+export const useNavbarMenuDesigner = () => useContext(NavbarMenuContext);

package/app-template/src/views/header/navbar.tsx

@@ -1,115 +1,181 @@
 'use client';
 
+import { useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { openSearch, setOpenedMenu } from '@akinon/next/redux/reducers/header';
+import { setOpenedMenu } from '@akinon/next/redux/reducers/header';
 import clsx from 'clsx';
 import { MenuItemType } from '@akinon/next/types';
 
 import { Icon, Link } from '@theme/components';
 import Search from './search';
-import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
+import {
+  useNavbarMenuSettings,
+  NavbarMenuSettings
+} from './use-navbar-menu';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import {
+  NavbarMenuProvider,
+  useNavbarMenuDesigner,
+  NAVBAR_MENU_PLACEHOLDER_ID,
+  NAVBAR_MENU_SECTION_ID,
+  NAVBAR_MENU_BLOCK
+} from './navbar-menu-context';
 
 interface NavbarProps {
   menu: MenuItemType[];
+  initialNavSettings?: NavbarMenuSettings;
 }
 
-export default function Navbar(props: NavbarProps) {
-  const { menu } = props;
+interface NavbarContentProps {
+  menu: MenuItemType[];
+  initialNavSettings?: NavbarMenuSettings;
+}
+
+function NavbarContent({ menu, initialNavSettings }: NavbarContentProps) {
   const dispatch = useAppDispatch();
   const { isSearchOpen, openedMenu } = useAppSelector((state) => state.header);
 
-  const { t } = useLocalization();
+  const navSettings = useNavbarMenuSettings(initialNavSettings);
+  const { isDesigner, selectedBlockId } = useNavbarMenuDesigner();
+  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
+
+  const { handleClick } = useDesignerFeatures({
+    blockId: NAVBAR_MENU_BLOCK.id,
+    placeholderId: NAVBAR_MENU_PLACEHOLDER_ID,
+    sectionId: NAVBAR_MENU_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: NAVBAR_MENU_BLOCK.id,
+      type: NAVBAR_MENU_BLOCK.type,
+      label: NAVBAR_MENU_BLOCK.label
+    }
+  });
+
+  const isSelected = selectedBlockId === NAVBAR_MENU_BLOCK.id;
+
+  const getMenuItemStyle = (isHovered: boolean): React.CSSProperties => {
+    const baseStyle: React.CSSProperties = {
+      fontSize: navSettings.fontSize,
+      color: navSettings.color,
+      fontWeight: navSettings.fontWeight as React.CSSProperties['fontWeight'],
+      textTransform: navSettings.textTransform as React.CSSProperties['textTransform'],
+      letterSpacing: navSettings.letterSpacing,
+      transition: 'color 0.2s ease'
+    };
+
+    if (isHovered && navSettings.hoverColor) {
+      return { ...baseStyle, color: navSettings.hoverColor };
+    }
+
+    return baseStyle;
+  };
 
   return (
     <>
-      <nav className="relative flex-wrap items-center justify-center hidden header-grid-area-nav sm:flex justify-items-center">
-        <ul className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4 mt-8 justify-items-center">
-          {menu.map(
-            (item, index) =>
-              item.label != null && (
-                <li
-                  key={index}
-                  className="flex items-center h-full group"
-                  onMouseEnter={() => {
-                    dispatch(setOpenedMenu(item.pk));
-                  }}
-                  onMouseLeave={() => {
-                    dispatch(setOpenedMenu(null));
-                  }}
+      <nav
+        onClick={isDesigner ? handleClick : undefined}
+        className={clsx(
+          isDesigner && 'cursor-pointer',
+          isSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+        )}
+      >
+        <ul className="hidden flex-wrap items-center justify-center gap-x-8 gap-y-4 justify-items-center sm:flex">
+          {menu.map((item, index) => {
+            if (item.label == null) {
+              return null;
+            }
+
+            const hasChildren = Boolean(item.children?.length);
+            const isItemHovered = hoveredItemIndex === index;
+
+            return (
+              <li
+                key={index}
+                className="flex items-center h-full group py-7"
+                onMouseEnter={() => {
+                  dispatch(setOpenedMenu(item.pk));
+                  setHoveredItemIndex(index);
+                }}
+                onMouseLeave={() => {
+                  dispatch(setOpenedMenu(null));
+                  setHoveredItemIndex(null);
+                }}
+              >
+                <Link
+                  href={item.url}
+                  className="flex items-center"
+                  style={getMenuItemStyle(isItemHovered)}
+                  data-testid="navbar-category"
                 >
-                  <Link
-                    href={item.url}
-                    className="flex items-center p-2.5 text-sm uppercase transition hover:text-secondary"
-                    data-testid="navbar-category"
-                  >
-                    {item.label}
-                  </Link>
-
-                  {/*
-                     Performance Note:
-                    The submenu content in this Navbar component is rendered based on hover-triggered state changes.
-                    This approach is adopted for performance optimization reasons. It ensures that:
-                    1. Submenu data is only loaded and rendered when necessary, reducing initial load times and resource usage.
-                    2. Unnecessary renders are avoided, enhancing the responsiveness and efficiency of the navigation bar.
-                    Please be cautious about altering this logic, as changes could negatively impact the performance and user experience of the Navbar.
-                  */}
-
-                  {openedMenu === item.pk && item.children.length > 0 && (
-                    <div
+                  <span>{item.label}</span>
+                  {hasChildren && (
+                    <Icon
+                      name="chevron-down"
+                      size={20}
                       className={clsx(
-                        [
-                          'container',
-                          'absolute',
-                          'bottom-0',
-                          'left-0',
-                          'z-30',
-                          'flex',
-                          'justify-between',
-                          'invisible',
-                          'opacity-0',
-                          'bg-gray',
-                          'border-x-2',
-                          'border-gray',
-                          'pt-20',
-                          'pb-16',
-                          'transform',
-                          'translate-y-full',
-                          'transition'
-                        ],
-                        [
-                          'before:left-0',
-                          'before:-translate-x-full',
-                          'before:content-[""]',
-                          'before:w-1/2',
-                          'before:h-full',
-                          'before:block',
-                          'before:absolute',
-                          'before:top-0',
-                          'before:transform',
-                          'before:bg-gray'
-                        ],
-                        [
-                          'after:right-0',
-                          'after:translate-x-full',
-                          'after:content-[""]',
-                          'after:w-1/2',
-                          'after:h-full',
-                          'after:block',
-                          'after:absolute',
-                          'after:top-0',
-                          'after:transform',
-                          'after:bg-gray'
-                        ],
+                        'ml-2 transition-transform duration-200 ease-in-out group-hover:rotate-180',
                         {
-                          '!visible !opacity-100 delay-500':
-                            openedMenu === item.pk
+                          'rotate-180': openedMenu === item.pk
                         }
                       )}
-                    >
+                    />
+                  )}
+                </Link>
+
+                {openedMenu === item.pk && hasChildren && (
+                  <div
+                    className={clsx(
+                      [
+                        'absolute',
+                        'bottom-0',
+                        'left-0',
+                        'z-30',
+                        'w-full',
+                        'invisible',
+                        'opacity-0',
+                        'bg-gray',
+                        'border-x-2',
+                        'border-gray',
+                        'pt-20',
+                        'pb-16',
+                        'transform',
+                        'translate-y-full',
+                        'transition'
+                      ],
+                      [
+                        'before:left-0',
+                        'before:-translate-x-full',
+                        'before:content-[""]',
+                        'before:w-1/2',
+                        'before:h-full',
+                        'before:block',
+                        'before:absolute',
+                        'before:top-0',
+                        'before:transform',
+                        'before:bg-gray'
+                      ],
+                      [
+                        'after:right-0',
+                        'after:translate-x-full',
+                        'after:content-[""]',
+                        'after:w-1/2',
+                        'after:h-full',
+                        'after:block',
+                        'after:absolute',
+                        'after:top-0',
+                        'after:transform',
+                        'after:bg-gray'
+                      ],
+                      {
+                        '!visible !opacity-100 delay-500': openedMenu === item.pk
+                      }
+                    )}
+                  >
+                    <div className="container mx-auto flex justify-between">
                       <div className="flex space-x-8 lg:space-x-0">
-                        {item.children.map((child, index) => (
-                          <div key={index}>
+                        {item.children?.map((child, childIndex) => (
+                          <div key={childIndex}>
                             <Link
                               onClick={() => {
                                 dispatch(setOpenedMenu(null));
@@ -119,10 +185,10 @@ export default function Navbar(props: NavbarProps) {
                             >
                               {child.label}
                             </Link>
-                            {child.children && (
+                            {child.children && child.children.length > 0 && (
                               <ul>
-                                {child.children.map((grandChild, index) => (
-                                  <li key={index}>
+                                {child.children?.map((grandChild, grandChildIndex) => (
+                                  <li key={grandChildIndex}>
                                     <Link
                                       onClick={() => {
                                         dispatch(setOpenedMenu(null));
@@ -139,25 +205,24 @@ export default function Navbar(props: NavbarProps) {
                           </div>
                         ))}
                       </div>
-                      {item.extra_context.attributes.images && (
+                      {item.extra_context?.attributes?.images && (
                         <div className="flex">
                           {item.extra_context.attributes.images.map(
-                            (image, index) =>
-                              image.kwargs.value.image && (
-                                <Link href={image.value.url} key={index}>
-                                  {/* TODO: There is no image. It should be checked. May need fix. */}
+                            (image, imageIndex) =>
+                              image.kwargs?.value?.image && (
+                                <Link href={image.value?.url} key={imageIndex}>
                                   <Image
                                     src={image.kwargs.value.image?.url}
-                                    alt={image.value.title}
-                                    title={image.value.title}
+                                    alt={image.value?.title}
+                                    title={image.value?.title}
                                     width={265}
                                     height={323}
                                   />
                                   <span className="block mt-4">
-                                    {image.value.title}
+                                    {image.value?.title}
                                   </span>
                                   <span className="inline-block mt-2 text-xs uppercase border-b border-gray-500">
-                                    {image.value.link_text}
+                                    {image.value?.link_text}
                                   </span>
                                 </Link>
                               )
@@ -165,22 +230,24 @@ export default function Navbar(props: NavbarProps) {
                         </div>
                       )}
                     </div>
-                  )}
-                </li>
-              )
-          )}
-          <li>
-            <button
-              onClick={() => dispatch(openSearch())}
-              className="flex items-center gap-2 p-2 text-sm uppercase transition hover:text-secondary cursor-pointer"
-              data-testid="header-nav-search"
-            >
-              <Icon name="search" size={24} /> {t('common.navbar.search')}
-            </button>
-          </li>
+                  </div>
+                )}
+              </li>
+            );
+          })}
         </ul>
       </nav>
       {isSearchOpen && <Search />}
     </>
   );
 }
+
+export default function Navbar({ menu, initialNavSettings }: NavbarProps) {
+  return (
+    <NavbarMenuProvider>
+      <NavbarContent menu={menu} initialNavSettings={initialNavSettings} />
+    </NavbarMenuProvider>
+  );
+}
+
+export type { NavbarMenuSettings };