Refactor MenuItem component

atomicdata-dev · Oct 21, 2024 · 7754bec · 7754bec
1 parent 44ce858
commit 7754bec
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 50 deletions.
diff --git a/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.module.css b/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.module.css
@@ -14,7 +14,7 @@
   background: none;
   cursor: pointer;
   transition: background-color 100ms ease-in-out;
-  position: relative; /* For anchoring the submenu */
+  anchor-name: --menu-item-anchor;
 }
 
 .button:hover,
@@ -23,10 +23,8 @@
 }
 
 .submenu {
-  position: absolute; /* Anchoring relative to the button */
-  top: 100%; /* Anchors submenu to the bottom of the button */
-  left: 50%;
-  transform: translateX(-50%); /* Centers the submenu */
+  position-anchor: --menu-item-anchor;
+  position-area: bottom center;
   width: max(20ch, 100%);
   border: 1px solid var(--theme-color-bg-1);
   border-radius: var(--theme-border-radius);

diff --git a/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.tsx b/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.tsx
@@ -1,68 +1,32 @@
-import type { MenuItem } from "@/ontologies/website";
-import { unknownSubject, useResource } from "@tomic/react";
-import MenuItemLink from "./MenuItemLink";
-import styles from "./MenuItem.module.css";
-import { useEffect, useRef } from "react";
+import type { MenuItem } from '@/ontologies/website';
+import { unknownSubject, useResource } from '@tomic/react';
+import MenuItemLink from './MenuItemLink';
+import styles from './MenuItem.module.css';
+import { useEffect, useRef } from 'react';
 
 const MenuItem = ({ subject }: { subject: string }) => {
   const menuItem = useResource<MenuItem>(subject ?? unknownSubject);
 
-  const id = (Math.random().toString(36) + "00000000000000000").slice(2, 10);
+  const id = (Math.random().toString(36) + '00000000000000000').slice(2, 10);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
 
-  const closePopover = () => {
-    if (popoverRef.current) {
-      popoverRef.current.hidePopover();
-    }
-  };
-
-  const handleFocusOut = (
-    event: React.FocusEvent<HTMLDivElement | HTMLButtonElement>
-  ) => {
-    if (
-      !event.relatedTarget ||
-      !event.currentTarget.contains(event.relatedTarget as Node)
-    ) {
-      closePopover();
-    }
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        buttonRef.current &&
-        popoverRef.current &&
-        !buttonRef.current.contains(e.target as Node) &&
-        !popoverRef.current.contains(e.target as Node)
-      ) {
-        closePopover();
-      }
-    };
-
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, []);
-
   return menuItem.props.subItems && menuItem.props.subItems.length > 0 ? (
     <>
       <button
         className={styles.button}
         popovertarget={id}
-        popovertargetaction="toggle"
+        popovertargetaction='toggle'
       >
         {menuItem.title}
       </button>
 
       <div
         id={id}
-        className={styles.subMenu}
-        popover="manual"
+        className={styles.submenu}
+        popover='auto'
         ref={popoverRef}
         tabIndex={-1}
-        onBlur={handleFocusOut}
       >
         <ul className={styles.ul}>
           {menuItem.props.subItems?.map((subItem: string, index: number) => (