Semantic-ui-react: Sidebar behavior issues?

[DanHarman]

I'm trying to port a sidebar example I found for semantic-ui https://codepen.io/redshift7/pen/VaKmjq to semantic-ui-react and have run into a few problems. I'm not sure if they are mistakes on my part but thought I'd raise it.

Here is my codepen with it ported as best I can http://codepen.io/mmph/pen/ryzYmB. I am observing the following issues:

1. The height of the sidebar and the basic segment is not filling the window. : edit : I guess that's because it's nested in a div, so that's an easy fix by modifying the style of the containing div.
2. There is something up with how far the menu is pushing the pusher. It should only push it as far as it needs, but it pushes way further. I can fix this by putting an explicit width on the Sidebar, but its a bit awkward compared to the non react version which seems to dynamically accommodate the content of the sidebar?
3. This may be unimplemented at the moment, but the pusher isn't dimming when pushed?

Thanks for the great work on the project. It's really nice to have it all as components!

[jonmajorc]

Hello @DanHarman I took a look into this tonight because I had this similar issue too actually.

In response to your following issues:

1. It seems like you answered your first question so I didn't really look into it.
2. This was my problem too, so I did some recon looking into the css that is being generated by the class pusher and it looks like there is a: transform: translate3d(260px,0,0); so there is some logic that is by default choosing 260px, so here is the a quick work around I did in a forked codepen of your react-semantic-ui example of the sidebar: http://codepen.io/sirJconny/pen/BRzQEx
3. I swore looking in the react-semantic-ui documenation there was the ability to dim the pusher but I looked again, and there is currently nothing.

I plan to look into #2 tomorrow to see if I can fix this issue. This would also be my first PR too 😊

[levithomason]

1. You need more vertical content on the page.
2. width='thin' so the Sidebar is only as wide as the icon menu. Semantic UI CSS provides 5 widths.

3. <Sidbar.Pusher dimmed />, this should be toggled with your menuVisible state. There is no example but the prop is documented here:

   

---

Here is a fork with the fixes above, http://codepen.io/levithomason/pen/ZKOXPd:

[jonmajorc]

@levithomason what do you think about adding custom support to width size? Currently its limited to the 5 widths.

[levithomason]

Unfortunately, I don't think it is within our scope to do so as it is CSS driven by the theme variables. The width prop renders a CSS className which has a corresponding width associated:

https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/default/modules/sidebar.variables#L37

As we move toward a future library possibly based on generated CSS, we'll have the ability to style any component the way we wish. This is likely 2.0 work and far out in the timeline, but you can see seeds of it in #1579.

[Shuliyey]

update (override to be more precise) the css of the left sidebar and pusher

    .ui.left.visible.vertical.menu ~ .pusher {
      transform: translate3d(86px, 0, 0)
    }

86px can be replaced the width of the .ui.left.visible.vertical.menu

[thesobercoder]

Probably too late to the party but I solved it by

<Sidebar.Pusher style={{ width: "calc(100% - 260px)" }}>

Where 260px can be replaced the size of the sidebar.