Обновить UI-ветку

shine-UI/js/pages/profile-view.js

@@ -114,11 +114,15 @@ export function render({ navigate, chrome }) {
   const profileMenuButton = topbar.querySelector('.profile-head-menu-btn');
   profileMenuButton?.append(createOverflowDots());
   let profileMenuPortal = null;
+  let profileMenuBackdrop = null;
 
   const closeProfileMenu = () => {
     profileMenuPortal?.remove();
+    profileMenuBackdrop?.remove();
     profileMenuPortal = null;
+    profileMenuBackdrop = null;
     profileMenuButton?.setAttribute('aria-expanded', 'false');
+    profileMenuButton?.classList.remove('menu-open-pressed');
     profileMenuWrap?.classList.remove('is-open');
   };
 
@@ -126,10 +130,16 @@ export function render({ navigate, chrome }) {
     if (!profileMenuPortal || !profileMenuButton) return;
     const rect = profileMenuButton.getBoundingClientRect();
     const margin = 10;
-    const menuWidth = profileMenuPortal.offsetWidth || 224;
+    const menuRect = profileMenuPortal.getBoundingClientRect();
+    const menuWidth = menuRect.width || profileMenuPortal.offsetWidth || 210;
+    const menuHeight = menuRect.height || profileMenuPortal.offsetHeight || 144;
     const left = Math.max(margin, Math.min(window.innerWidth - menuWidth - margin, rect.right - menuWidth));
+    const below = rect.bottom + 7;
+    const top = below + menuHeight <= window.innerHeight - margin
+      ? below
+      : Math.max(margin, rect.top - menuHeight - 7);
     profileMenuPortal.style.left = `${Math.round(left)}px`;
-    profileMenuPortal.style.top = `${Math.round(rect.bottom + 7)}px`;
+    profileMenuPortal.style.top = `${Math.round(top)}px`;
   };
 
   const openProfileMenu = () => {
@@ -139,15 +149,12 @@ export function render({ navigate, chrome }) {
     portal.setAttribute('role', 'menu');
     portal.innerHTML = `
       <button type="button" class="dm-head-menu-item profile-head-menu-item" role="menuitem" data-top-action="profile">
-        <img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" />
         <span>Редактировать профиль</span>
       </button>
       <button type="button" class="dm-head-menu-item profile-head-menu-item" role="menuitem" data-top-action="wallet">
-        <img src="/assets/profile-icon-wallet.svg" alt="" aria-hidden="true" />
         <span>Кошелёк</span>
       </button>
       <button type="button" class="dm-head-menu-item profile-head-menu-item" role="menuitem" data-top-action="settings">
-        <img src="/assets/profile-icon-settings.svg" alt="" aria-hidden="true" />
         <span>Настройки</span>
       </button>
     `;
@@ -161,11 +168,17 @@ export function render({ navigate, chrome }) {
     portal.querySelector('[data-top-action="settings"]')?.addEventListener('click', () => goTo('settings-view'));
     portal.addEventListener('click', (event) => event.stopPropagation());
 
-    document.body.append(portal);
+    const backdrop = document.createElement('div');
+    backdrop.className = 'ui-menu-dim-layer';
+    backdrop.addEventListener('click', closeProfileMenu);
+    document.body.append(backdrop, portal);
+    profileMenuBackdrop = backdrop;
     profileMenuPortal = portal;
     profileMenuButton.setAttribute('aria-expanded', 'true');
+    profileMenuButton.classList.add('menu-open-pressed');
     profileMenuWrap?.classList.add('is-open');
     positionProfileMenu();
+    requestAnimationFrame(positionProfileMenu);
   };
 
   profileMenuButton?.addEventListener('click', (event) => {