feat: change interaction of menubar

cidhuang · May 21, 2024 · 245ac67 · 245ac67
1 parent 557a80d
commit 245ac67
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 7 deletions.
diff --git a/src/components/MenuBar/Menu.css b/src/components/MenuBar/Menu.css
@@ -12,18 +12,26 @@
   }
 
   .menu-options {
-    @apply origin-top-left absolute left-0 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 px-2 py-2;
+    @apply origin-top-left absolute left-0 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 px-1 py-1;
   }
 
   .menu-options-right {
-    @apply origin-top-left absolute right-0 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 px-2 py-2;
+    @apply origin-top-left absolute right-0 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 px-1 py-1;
   }
 
   .menu-item {
-    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md select-none;
+    @apply block w-full pl-2 py-1 text-left text-sm text-gray-700 hover:bg-gray-100 rounded-md select-none;
   }
 
   .menu-item-disabled {
-    @apply block px-4 py-2 text-sm text-gray-400 rounded-md select-none;
+    @apply block w-full pl-2 py-1 text-left text-sm text-gray-400 rounded-md select-none;
+  }
+
+  .menu-item-right {
+    @apply block w-full pl-2 py-1 text-right text-sm text-gray-700 hover:bg-gray-100 rounded-md select-none;
+  }
+
+  .menu-item-disabled-right {
+    @apply block w-full pl-2 py-1 text-right text-sm text-gray-400 rounded-md select-none;
   }
 }
diff --git a/src/components/MenuBar/Menu.tsx b/src/components/MenuBar/Menu.tsx
@@ -8,12 +8,14 @@ export const Menu = ({
   index,
   onClick,
   onItemClick,
+  onMouseEnter,
   menu,
   alignRight,
 }: {
   itemsHidden: boolean;
   index: number;
   onClick: (index: number) => void;
+  onMouseEnter?: (index: number) => void;
   onItemClick: (index: number, itemIndex: number, item: IMenuItem) => void;
   menu: IMenu;
   alignRight?: boolean;
@@ -30,10 +32,16 @@ export const Menu = ({
   return (
     <div className="menu">
       <button
-        onClick={() => {
+        onClick={(e) => {
+          e.stopPropagation();
           onClick(index);
         }}
         className="menu-btn"
+        onMouseEnter={() => {
+          if (onMouseEnter) {
+            onMouseEnter(index);
+          }
+        }}
       >
         {menu.label}
       </button>
@@ -50,7 +58,14 @@ export const Menu = ({
               }}
               disabled={!item.enabled ?? false}
               className={
-                item.enabled ?? false ? "menu-item" : "menu-item-disabled"
+                alignRight
+                  ? item.enabled ?? false
+                    ? "menu-item-right"
+                    : "menu-item-disabled-right"
+                  : item.enabled ?? false
+                    ? "menu-item"
+                    : "menu-item-disabled"
+                //(alignRight ? "-right" : "")
               }
             >
               {item.label}

diff --git a/src/components/MenuBar/MenuBar.tsx b/src/components/MenuBar/MenuBar.tsx
@@ -20,13 +20,24 @@ export const MenuBar = ({ menus }: { menus: IMenu[] }) => {
     setDropMenu(index);
   }
 
+  function handleMenuMouseEnter(index: number) {
+    if (dropMenu === -1) {
+      return;
+    }
+    setDropMenu(index);
+  }
+
   function handleItemClick(index: number, indexItem: number, item: IMenuItem) {
     setDropMenu(-1);
   }
 
+  function handleMenubarClick() {
+    setDropMenu(-1);
+  }
+
   return (
     <nav className="menubar-nav">
-      <div className="menubar">
+      <div className="menubar" onClick={handleMenubarClick}>
         <div className="menubar-menu">
           {menus.map((menu, i) => {
             return (
@@ -36,6 +47,7 @@ export const MenuBar = ({ menus }: { menus: IMenu[] }) => {
                 index={i}
                 onClick={handleMenuClick}
                 onItemClick={handleItemClick}
+                onMouseEnter={handleMenuMouseEnter}
                 menu={menu}
               />
             );
@@ -46,6 +58,7 @@ export const MenuBar = ({ menus }: { menus: IMenu[] }) => {
           index={menus.length}
           onClick={handleMenuClick}
           onItemClick={handleItemClick}
+          onMouseEnter={handleMenuMouseEnter}
           menu={languages}
           alignRight={true}
         />