How to keep main navigation expanded in Theme-Cosmos
By default, the main navigation in Theme-Cosmos is collapsed and only icons are visible. Navigation expands on mouse hover or when any of the elements inside the navigation is focused.
In some cases, there may be a reasonable need to keep the navigation expanded at all times. This can be achieved by adding additional CSS styling to the application.
Although, there is one thing to be aware of when using this solution: the expanded navigation will take up screen space, which means that the rest of the content will have less space to fit in.
Styling needed to keep main navigation expanded
In Theme-Cosmos portal can be displayed in two ways:
- With “Display application header” option enabled
- With “Display application header” option disabled
1. CSS styling needed for portal with the “Display application header” option enabled:
.screen-layout-header_left > .screen-layout-region-main-sidebar1 {
width: 22rem;
}
.flex.screen-layout-header_left > .screen-layout-region-main-middle {
padding-left: 22rem;
}
The outcome of the styling:
2. CSS styling needed for portal with the “Display application header” option disabled:
.screen-layout-header_left > .screen-layout-region-main-sidebar1 {
width: 22rem;
}
.flex.screen-layout-header_left > .screen-layout-region-main-middle {
padding-left: 22rem;
}
.collapse-nav-auto > #sidebar-region-one .infinity-app-title,
.flex.content-item.main-header-search > span.primary_search > input::placeholder,
.flex.content-item.main-header-search > div > span.primary_search > input::placeholder {
opacity: 1;
}
.flex.content-item.main-header-search > span.primary_search > input,
.flex.content-item.main-header-search > div > span.primary_search > input {
width: 100%;
padding: 0 32px 0 46px;
font-size: 16px;
}
The outcome of the styling:
How to add proposed styling to the application
To add the proposed CSS styling to the application use “py-cosmos-custom-css” file. Simply override this file to your application and add custom CSS code there.
"py-cosmos-custom-css-file"
Overridden "py-cosmos-custom-css-file"
***Edited by Moderator Marije to add the Developer Knowledge Share tag***
Pegasystems Inc.
PL
@AxelB16903925If I understand correctly you want to have a button and based on clicking on it decide if the Navigation is pinned or not? Assuming scenario with “Display application header” option disabled, but it would be analogous for the "enabled" scenario as well. You can extend a styling with additional class e.g. "pinned-navigation", like this:
.pinned-navigation.screen-layout-header_left > .screen-layout-region-main-sidebar1 {
width: 22rem;
}
.pinned-navigation.flex.screen-layout-header_left > .screen-layout-region-main-middle {
padding-left: 22rem;
}
.pinned-navigation.collapse-nav-auto > #sidebar-region-one .infinity-app-title,
.pinned-navigation .flex.content-item.main-header-search > span.primary_search > input::placeholder,
.pinned-navigation .flex.content-item.main-header-search > div > span.primary_search > input::placeholder {
opacity: 1;
}
.pinned-navigation .flex.content-item.main-header-search > span.primary_search > input,
.pinned-navigation .flex.content-item.main-header-search > div > span.primary_search > input {
width: 100%;
padding: 0 32px 0 46px;
font-size: 16px;
}
And create a custom Javascript function in "py-cosmos-custom-js" file to toggle this styling class (based on the existence of the class Navigation will be pinned or not). Something like this:
@AxelB16903925If I understand correctly you want to have a button and based on clicking on it decide if the Navigation is pinned or not? Assuming scenario with “Display application header” option disabled, but it would be analogous for the "enabled" scenario as well. You can extend a styling with additional class e.g. "pinned-navigation", like this:
.pinned-navigation.screen-layout-header_left > .screen-layout-region-main-sidebar1 {
width: 22rem;
}
.pinned-navigation.flex.screen-layout-header_left > .screen-layout-region-main-middle {
padding-left: 22rem;
}
.pinned-navigation.collapse-nav-auto > #sidebar-region-one .infinity-app-title,
.pinned-navigation .flex.content-item.main-header-search > span.primary_search > input::placeholder,
.pinned-navigation .flex.content-item.main-header-search > div > span.primary_search > input::placeholder {
opacity: 1;
}
.pinned-navigation .flex.content-item.main-header-search > span.primary_search > input,
.pinned-navigation .flex.content-item.main-header-search > div > span.primary_search > input {
width: 100%;
padding: 0 32px 0 46px;
font-size: 16px;
}
And create a custom Javascript function in "py-cosmos-custom-js" file to toggle this styling class (based on the existence of the class Navigation will be pinned or not). Something like this:
var togglePinnedNavigation = function() {
var page = document.querySelector('.screen-layout-header_left');
if (page) {
if (page.classList.contains('pinned-navigation')) {
page.classList.remove('pinned-navigation'); // Remove the class if it exists
} else {
page.classList.add('pinned-navigation'); // Add the class if it doesn't exist
}
}
};
Then add a button and set its "Click" action to be "Run script" with ""togglePinnedNavigation". Clicking on the button will now pin/unpin the navigation. Something to consider: - navigation would be unpinned be default - pinned state would not be "remembered" in new tabs or on browser refresh