fix(Footer): fix clear footer clicking (#228)

Co-authored-by: kseniyakuzina <kseniyakuzina@yandex-team.ru>
gravity-ui · Apr 22, 2024 · 20a6964 · 20a6964
1 parent a150c30
commit 20a6964
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/src/components/Footer/desktop/Footer.scss b/src/components/Footer/desktop/Footer.scss
@@ -7,6 +7,7 @@ $block: '.#{variables.$ns}footer';
 #{$block}_desktop {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
     height: 40px;
     padding: 0 var(--g-spacing-6) 0 var(--g-spacing-3);
     gap: var(--g-spacing-6);
@@ -63,4 +64,5 @@ $block: '.#{variables.$ns}footer';
 
 #{$block}_view_clear {
     background: transparent;
+    z-index: -1;
 }
diff --git a/src/components/Footer/desktop/Footer.tsx b/src/components/Footer/desktop/Footer.tsx
@@ -57,30 +57,33 @@ export const Footer: FC<FooterProps> = ({
     );
 
     const shouldRenderLogo = view !== 'clear' && Boolean(logo);
+    const shouldRenderMenu = (menuItems?.length ?? 0) > 0;
 
     return (
         <footer className={b({desktop: true, 'with-divider': withDivider, view}, className)}>
-            <div className={b('menu', {measured})} ref={menuContainerRef}>
-                {visibleItems.length > 0 && (
-                    <Menu className={b('list')}>
-                        {visibleItems.map((item, index) => (
-                            <MenuItem
-                                key={index}
-                                {...item}
-                                className={b('menu-item', item.className)}
-                            />
-                        ))}
-                    </Menu>
-                )}
-                {dropdownMenuItems.length > 0 && (
-                    <DropdownMenu
-                        items={dropdownMenuItems}
-                        switcherWrapperClassName={b('more-button')}
-                        popupProps={moreItemsPopupProps}
-                        defaultSwitcherProps={moreButtonProps}
-                    />
-                )}
-            </div>
+            {shouldRenderMenu && (
+                <div className={b('menu', {measured})} ref={menuContainerRef}>
+                    {visibleItems.length > 0 && (
+                        <Menu className={b('list')}>
+                            {visibleItems.map((item, index) => (
+                                <MenuItem
+                                    key={index}
+                                    {...item}
+                                    className={b('menu-item', item.className)}
+                                />
+                            ))}
+                        </Menu>
+                    )}
+                    {dropdownMenuItems.length > 0 && (
+                        <DropdownMenu
+                            items={dropdownMenuItems}
+                            switcherWrapperClassName={b('more-button')}
+                            popupProps={moreItemsPopupProps}
+                            defaultSwitcherProps={moreButtonProps}
+                        />
+                    )}
+                </div>
+            )}
             <div className={b('right')}>
                 <small className={b('copyright', {small: !menuItems?.length})}>{copyright}</small>
                 {shouldRenderLogo && (

diff --git a/src/components/Footer/mobile/Footer.scss b/src/components/Footer/mobile/Footer.scss
@@ -66,6 +66,7 @@ $block: '.#{variables.$ns}footer';
 
 #{$block}_view_clear {
     background: transparent;
+    z-index: -1;
 
     #{$block}__bottom-row {
         justify-content: flex-end;