fix(Shell): phone shell should hidden when collapsed, close #3886 (#4766

) Co-authored-by: lancely <[email protected]>
alibaba-fusion · Jul 16, 2024 · 81e1960 · 81e1960
1 parent 6b18528
commit 81e1960
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/components/shell/__tests__/index-spec.js b/components/shell/__tests__/index-spec.js
@@ -389,5 +389,48 @@ describe('Shell', () => {
             });
             assert(wrapper.find('.next-shell-header').length === 1);
         });
+
+        // issue:
+        it('should hidden menu & menu-items-icon in phone', () => {
+            const div = document.createElement('div');
+            document.body.appendChild(div);
+            wrapper = mount(
+                <Shell
+                    device={'phone'}
+                    className={'iframe-hack'}
+                    style={{ border: '1px solid #eee' }}
+                >
+                    <Shell.Navigation>
+                        <Nav embeddable aria-label="global navigation">
+                            <Nav.Item icon="account">Nav Item 1</Nav.Item>
+                            <Nav.Item icon="calendar">Nav Item 2</Nav.Item>
+                            <Nav.Item icon="atm">Nav Item 3</Nav.Item>
+                            <Nav.Item icon="account">Nav Item 4</Nav.Item>
+                            <Nav.Item icon="account">Nav Item 5</Nav.Item>
+                            <Nav.Item icon="account">Nav Item 6</Nav.Item>
+                            <Nav.Item icon="account">Nav Item 7</Nav.Item>
+                        </Nav>
+                    </Shell.Navigation>
+                    <Shell.Content>
+                        <div style={{ minHeight: 1200, background: '#fff' }} />
+                    </Shell.Content>
+                    <Shell.ToolDock>
+                        <Shell.ToolDockItem>
+                            <Icon type="calendar" />
+                        </Shell.ToolDockItem>
+                        <Shell.ToolDockItem>
+                            <Icon type="atm" />
+                        </Shell.ToolDockItem>
+                        <Shell.ToolDockItem>
+                            <Icon type="account" />
+                        </Shell.ToolDockItem>
+                    </Shell.ToolDock>
+                </Shell>,
+                {attachTo: div}
+            );
+            const element = wrapper.find('.next-aside-navigation').at(0).instance();
+            assert(element.offsetWidth === 0);
+            assert(window.getComputedStyle(element).overflow === 'hidden');
+        });
     });
 });
diff --git a/components/shell/main.scss b/components/shell/main.scss
@@ -576,6 +576,7 @@
 
             &#{$shell-prefix}-collapse {
                 width: 0;
+                overflow: hidden;
             }
         }
         #{$shell-prefix}-header #{$shell-prefix}-navigation {