Monday, March 26, 2018

Customizing the NavBar SlideIn Direction

A community member asked a question:
"Client need the Navigator of Nav Bar on top left side before company logo. i could manage to move the Nav Bar button, but when i click on it, the content is appearing on right side as usual... is there any way that i can move only navigator to the left side of the screen?"

While I don't recommend this approach (primarily because it will overlap on several other design patterns such as master/detail, nav collection, etc.), I wanted to see how we can achieve something like that? This post is purely from a curiosity point of view.

Most of the NavBar SlideIn/SlideOut toggle functionality is controlled with the delivered  PTNUI_NAVBAR_CSS free-form stylesheet object.

To change the NavBar SlideIn direction from "right to left" to "left to right", we need to make the following changes:

Update .PTNavBarModal class to replace %AlignEnd with %AlignStart.


Also, update the media query for SFF.


More details on these meta-HTML variables can be found here:
PeopleBooks Reference

Next, we need to find all occurrences of the following in PTNUI_NAVBAR_CSS:
dir="rtl"

And replace it with:
dir="ltr"

Note (Updated 03/28/2018)

Please review comments in this blog post. This POC works only when the NavBar is opened in expanded state which can be achieved with the approach provided in the following blog post.

Open NavBar in expanded mode with Navigator

Demo


Demo Environment Details
- HCM 9.2 PUM 23
- PeopleTools 8.56.01