NavigationView initWidth not working as expected

[prateekrastogi]

@myxvisual Hi,
Apparently, setting NavigationView initWidth property has no effect whatsoever. If my understanding is correct, then it is used for setting initial width of navigation view. Also, expanded width is working properly.
Here is the code:

<NavigationView style={{height: '100vh', margin: 10}} displayMode="overlay" autoResize={true} background="none" initWidth={100} expandedWidth={200} navigationTopNodes={navigationTopNodes} > </NavigationView>

[myxvisual]

@prateekrastogi It seems that I forget to pass it to the pane style, thanks.

[prateekrastogi]

@myxvisual Thanks. I was quite confused. Feel free to close this issue when fixed as I am planning to leave for a week long vacation today.

[prateekrastogi]

Hi,
Also, i am also trying to used styled components https://github.com/styled-components/styled-components for styling instead of inline style as I found it to be more cleaner and elgant solution of styling. You can wrap any library component in with styled(Component) code type of syntax but that library has to use classname properties for styling. I tried using it with react-uwp, for some components its working properly and for others it is not. Since, you project is quite inspired by material ui I got a link that mentions the requirements of wrapping any component with styled components https://hashnode.com/post/whats-the-best-way-to-use-material-ui-or-any-other-css-frameworks-with-styled-components-ciyl05bhm000ysc539lqhzuz9. And, i guess some components doesn't have classname attached to dom nodes. Is there workaround this? Also, whether supporting it will require a major re-structring of code? If its not, can we plan on supporting it in future?

[prateekrastogi]

@myxvisual Hi,
Is the navigation pane bug got fixed?

[myxvisual]

@prateekrastogi Hi, sorry, some other recent private things take some time, this bug has been fixed, but not on the master branch, I will be merged in a few minutes later. Yes, if you do not like the problem of inline style, I would like to tell you about the components will automatically convert the style into the style sheet, also support className. I want to support react-native in the future, so it is not recommended to use styled-components. But i will consider your idea, do you have components that you need, and I want to add it to the new feature, like this effect CSS3 3D Transform that follows the cursor.
I would like to support more interesting components in the near future, from science fiction games and movies to get inspiration.
I think the current document may not be beautiful, need to be redesigned, it may take some time.

Really thank you for your patience and support.

[prateekrastogi]

@myxvisual Thanks a lot. I think i will compensate by using style components as of now. When the whole components that I want to use become clear then I will explore the possibility of refacftoring my code in to style components. Btw, styled components also support react-native https://www.styled-components.com/docs/basics#react-native. Although, I didn't looked in the depth of implications of supporting it in this library. Also, the things you are planning to support in near future sounds quite interesting especially for the domain I am using this library for. So, it would be pretty interesting to see them in future. My main issue of tilting towards syled components was initial rendering time of doc is quite slow especially in mobile browsers. I researched and found that inline styles are not as much optimised as they should be in modern browsers. Anyway, css 3d transform would be killer feature. Please do comment on the issue when navigation pane ossue is fixed and published on npm. Again, thank a lot.

[prateekrastogi]

@myxvisual Also, if the re-write can be in es6, then it will a nice learning example for new-comers. You can use standard style https://github.com/standard to maintain the consistency of js code. It pretty much roots out all the dark side of js. The code also looks quite pretty without semi-colons :-)

[myxvisual]

@prateekrastogi Hi, new version is available in npm, you can try it.

[prateekrastogi]

@myxvisual Hi, I tried the new version in overlay mode. So, the initial width is working but instead of opening in compact mode , the initial width is opening in expanded mode according to initwidth parameter and on clicking expand it is further expanding according to expanded width parameter. I thought that setting initwidth parameter will increase the breadth of compact mode without showing the details that are visible in expanded mode i.e. just icon only expanded acoording to initwidth parameter.

[prateekrastogi]

Here is my code <NavigationView style={{height: '100vh', margin: 10}} displayMode="overlay" autoResize={true} background="none" initWidth={100} expandedWidth={200} navigationTopNodes={navigationTopNodes} > </NavigationView>

[myxvisual]

@prateekrastogi Hi, do you mean the label text detail do not show in initMode? Just add icon width?

[prateekrastogi]

@myxvisual Yep. As, of now the label text details are also showing in initMode.

[myxvisual]

@prateekrastogi Sure, np.

[myxvisual]

@prateekrastogi hi, I think this bug has been resolved in v1.1.4 version.
Sorry, after a lot of time.

[prateekrastogi]

@myxvisual Thank you