Problem with Hide / show when my sidebar menu show

Ask the community
,
1

Good afternoon,

I have a small problem I cannot resolve :
I have 2 items, item N°1 is a button to access the sidebar menu (“LogoPF”), it shows when you pass the Anchor, then item N°2 hide (“StripBigMenu”) . Until here , everything is good.
The problem actually appear once I open the sidebar menu and close it. Item N°2 appear along with item N°1. Item N°2 is supposed to stay hidden unless we enter Anchor view.

Thank you very much for your help.

Here is the used code :

import wixWindow from ‘wix-window’;

export function MenuOpen_click(event, $w) {
wixWindow.openLightbox(“SidebarMenu”)
}
let fadeOptions = {
“duration”: 300,
“delay”: 1
};

export function anchor_viewportEnter(event, $w) {

$w("#StripBigMenu").show("fade", fadeOptions); 
$w("#LogoPF").hide()

}

export function anchor_viewportLeave(event, $w) {

$w("#StripBigMenu").hide("fade", fadeOptions); 
$w("#LogoPF").show()

}

2

Hi, can you share the site / video recording so we can see the problem?

3
4

I scroll down to pass the Anchor. The icone menu on the top left side appear, and the white stripe disapear.
However when we close the Sidebar menu, the white stripe appear again. It should appear only when we go beyond the Anchor at the very top of the page.
I tried to “collapse” the white stripe when we open the side bar menu, so the white stripe don’t appear after closing the menu. But I don’t know the correct code to make it back to normal with effect etc by using “expand”

5

Looks like a bug.
I think you can try to work around it by hiding the strip when the lightbox closes:

wixWindow.openLightbox("SidebarMenu")
  .then(() => $w("#StripBigMenu").hide() );
6

The strip still appear. Do you have another solution ?
Actually, any “hide” code doesn’t seems to work.
So I tried :
wixWindow.openLightbox(“SidebarMenu”)
$w(" #StripBigMenu ").collapse()

But the Stripe totally disappear and cannot return.

7

Unfortunately I don’t have an idea. I forwarded this issue to the engineering team, I’ll let you know if I have any updates.

8

Thank you very much ! I appreciate.

9

Hi.
We’re checking this out.
In the meantime, one small question regarding the workaround Tomer suggested - Did you try the code exactly as he had written? Like so:

wixWindow.openLightbox("SidebarMenu") 
   .then(() => $w("#StripBigMenu").hide() ); //.then makes sure the hide runs only when the promise is resolved

the .then portion is critical, as it triggers the hide only after the lightbox has closed (when the JavaScript promise is resolved).
The code as you pasted will run immediately after the lightbox opens, which isn’t what you want (since something strange seems to be happening with the state of the components as the lightbox closes).

 wixWindow.openLightbox("SidebarMenu") 
     $w("#StripBigMenu").collapse()  //this will run immediately after the lightbox opens, not when it returns

To answer another question you had above - the opposite of collapse() is expand(). That will return a collapsed element to its original height.

Hope that helps, we’ll go check out that strange behavior now :slight_smile:

10

Yes I did copy past the code correctly. It really doesn’t work.
I know that the opposite is expand(), I even tried this out :

wixWindow.openLightbox(“SidebarMenu”)
$w(" #StripBigMenu ").collapse()

Then, I added under the line

export function Anchor_viewportEnter(event, $w) {

if( $w(" #StripBigMenu “).collapsed ) {
$w(” #StripBigMenu “).expand();
}
else {
$w(” #StripBigMenu ").collapse();
}

But it seems like I made some mistake somewhere. Because it still doesn’t react correctly, it created some bug on the page like white square.

Thank you for your help.