SideNav closed by default

[HassanYA]

I am using sapper for development. idk if this issue is related to documentation or otherwise. I just copied and pasted the code from there and it did not exactly produced what it showed there.

Code is exactly as in Header with persisted hamburger menu and I had all of it inside a single component

The result:

What it is suppose to produce:

https://carbon-svelte.vercel.app/framed/UIShell/PersistedHamburgerMenu?theme=g10

On Desktop screens, the side nav icon should be there and should be unopened by default. On Mobile, the behavior is as desired

[josefaidt]

Hi @HassanYA :wave: may you provide a reproducible example?

[yollov]

@HassanYA, have you tried setting expandedByDefault to false? <Header ... expandedByDefault={false}>

[angrytongan]

isSideNavOpen handling appears to be broken. Setting isSideNavOpen to true on component creation will close the side nav:

let winWidth = undefined;
$: isSideNavOpen =
    expandedByDefault && winWidth >= 1056 && !persistentHamburgerMenu;

This is always false, so the sidebar is closed. Example here.

[metonym]

@angrytongan Could you try this? I threw the UI Shell Header Nav example into a Svelte REPL.

[angrytongan]

G'day @metonym My example comes from the same place. When isSideNavOpen set to false at component creation, the side nav isn't open which is correct. However setting it to true at component creation doesn't open the side nav; Header sets isSideNavOpen to false because this test is always false:

$: isSideNavOpen =
    expandedByDefault && winWidth >= 1056 && !persistentHamburgerMenu;

I think winWidth is unchanged when isSideNavOpen is set in Header at component creation, so this will be false. Check the console output in my example.

[Sheepux]

I think winWidth is unchanged when isSideNavOpen is set in Header at component creation, so this will be false. Check the console output in my example.

that helped me so much to find out why it wasn't working even though I was doing the correct usage of the isSideNavOpen. If you've forced persistentHamburgerMenu={true} in the UI shell header and use the rail mode then it will only work when you resize the window to reach the breakpoint If you have a full screen window then it doesnt work because the condition will be false.

Current condition is

  class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
    ? false
    : isOpen}"
  class:bx--side-nav--collapsed="{!isOpen && !rail}"

To solve this I've set the expansionBreakpoint prop to100000 and now it works fine as it will go to the isOpen test

Something should probably be documented indicating "when in rail mode expansion is controlled by the breakpoint"

Edit: changed a bit my message as the initial issue wasnt about the rail mode