Skip to content

Conversation

@jqlio18
Copy link
Contributor

@jqlio18 jqlio18 commented Dec 14, 2022

Fixes #1463

The expended class should not be applied when the sideNav is below the breaking point. I added the bx--sidenav-fixed class instead, it seems to works perfectly.

Edit : This PR also fixes the hack of bx--content that was set previously.

Last commit make more consistencies with the navStore and revert the margin-left: 0 hack with new store variables.

style. This revert back this change and add more
consistencies with the `navStore` and classes.
class:bx--content="{true}"
style="{unsetLeftMargin ? 'margin-left: 0' : ''}"
{...$$restProps}
style="{unsetLeftMargin ? 'margin-left: 0;' : ''} {$$restProps.style}"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think that this should be changed since $$restProps.style will override the attribute.

@metonym
Copy link
Collaborator

metonym commented Dec 17, 2022

When testing this locally, the side nav is not appearing when toggling the hamburger menu.

It seems to retain the bx--side-nav--collapsed class even when toggled.

Repro

  1. cd docs; yarn dev
  2. Visit http://127.0.0.1:5173/framed/UIShell/HeaderSwitcher
side-nav.mov

@jqlio18
Copy link
Contributor Author

jqlio18 commented Dec 18, 2022

You are right my logic and my approach for this problem was wrong. I changed my strategy and took the same approach as React. The main strategy is to take advantage of the Grid and it's offset propriety to the main content. I added the same wrappers to the main content as React too

Source : https://v7-react.carbondesignsystem.com/iframe.html?id=components-ui-shell--header-base-w-navigation-actions-and-side-nav&args=&viewMode=story

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SideNav should overlay Content in UIShell

2 participants