Seeking guidance on the best approach for the following scenario:
I have an angular component positioned at a specific route. Let's say the route is:
/main-page
Currently, the template spans the full width of the screen at this route. I want to add a button within this page that, upon clicking, will navigate to a nested route:
/main-page/with-sidebar
Upon clicking this button, I aim to have the main page shrink to 70% of the screen's width, with the view for the sidebar occupying the remaining 30%.
My initial approach was to add a "shrinkable" class to the main page element and apply the following style:
.shrinkable {
width: 70%;
}
In the stylesheet of the "with-sidebar" component. However, Angular (or possibly scss) alters the stylesheet so that the style only applies to elements within the component. While this is helpful for reusability, it's hindering my current objective.
I suspect that my current method may be incorrect. Any suggestions or advice?
Just to clarify, I am working with Angular 5 for this project.