How to keep main navigation expanded in Theme-Cosmos

User Experience Knowledge Share
,
1

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.

navigation-expands.gif

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:

  1. With “Display application header” option enabled

  2. With “Display application header” option disabled

  3. 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:

expanded-navigation-with-application-header.png
expanded-navigation-with-application-header.png3584×1970 436 KB

  1. 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:

expanded-navigation.jpg
expanded-navigation.jpg3584×1968 310 KB

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”

py-cosmos-custom-css-file.png
py-cosmos-custom-css-file.png2780×900 180 KB

Overridden “py-cosmos-custom-css-file”

overridden-py-cosmos-custom-css-file.png
overridden-py-cosmos-custom-css-file.png2754×1142 306 KB

2

@madekif we wanted to add this as a pin-button, to pin the main navigation panel. How would we go about that?

3

@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