Fix side navigation on single-spa-angular page
filoxo opened this issue ยท comments
Something about the styling of the single-spa-angular page is causing the floating side navigation to be pushed to the bottom of the page.
This only appears to be happening when the window is between 997px and 1291px.
Hey! I'm looking for my first contribution. Can I take this?
Sounds great! Feel free to post questions here or in the single-spa Slack workspace. Looking forward to your contribution!
Thanks! So, looking the behavior in the page, if the page width is less then 1291px, the floating needs be removed from the screen? Or need be moved to another location in the page?
Ideally the right nav should stay visible until the breakpoint at which left side nav is collapsed into a button.
I found the problem and a (weird) solution, changing the column (article section) width with the class col--9, made the floating appear until the limit width of 997px. But I can't figure it out how to add this class on this section. Can you help me?
Hey! I found this issue in the Ember Section to. But, looking into React and Angular pages, the structure is the same,
I haven't found a solution yet.
Sorry about the lack of response! I think if possible, the ideal way to fix this is to find a good css selector (something with just the right specificity) and put that in our custom styles. Here are the docs on custom styles: https://docusaurus.io/docs/en/api-pages#styles
Hi @filoxo , I made this change and the page is now showing the correct behavior, and other pages were not affected in my tests. Can you review this change? If this is right, I will proceed with the PR ๐
That selector captures other .cols as well, so it is slightly too specific. In the below image it shows that it is applying the width to the container of the sidebar, which seems incorrect though it doesn't visually cause issues.
What do you think of main .row > [class="col"] instead? This would target the main element which is where the primary content is, and just the element that has only "col" as the class. That is less specific and no longer matches the sidebar container.
As a side note, adding .col--9 to that same element would also fix this but that would have to be done upstream at Docusaurus' repo, on this component. The only reason I didn't suggest that before is because I don't think we would want to wait long to get this fix in, especially if its this simple.
Yeah, I think that this solution is really better. I will make this change and retest ๐
Here, this sounds great ๐
Awesome! I appreciate that you tested and validated it again. Ready for a PR?
Sure! ๐ ๐ ๐
Resolved in #303. Thanks @maximillianfx!