Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SideNav should overlay Content in UIShell #1585

Open
wants to merge 10 commits into
base: master
Choose a base branch
from

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.
{...$$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