Navbar UI Link Color and Functionality Updates

[DistantVoyager]

Closes #5177

What's Changed

• Added Navbar dropdown arrow rotation on open/close.
• Removed unneeded tooltip of dropdown title.
• Navbar dropdown links turn orange on hover and when active/clicked; state is saved.
• Removed navbar dropdown links underlining.
• Changed navbar state save to use session storage.
• Added reset navbar state when home link is clicked.

Screenshots

Before:

After:

TODO

• Explanation of Change(s)
• Added change log fragment(s) (for more information see the documentation)
• Attached Screenshots, Payload Example

[DistantVoyager]

Re: https://github.com/nautobot/nautobot/pull/5146/files/adfe3db6b0e99b3e230ff6b87e600bf13cf39398#r1464770401,

@bradh11 - take a look at this PR and see if you think it would improve your saved navbar state feature from #5146

This uses sessionStorage instead of localStorage which will clear if the tab closes (e.g. a user closes the tab, opens their Nautobot home bookmark later in the day -> the navbar will be reset instead of restoring the state from the previous session).

I also added a reset navbar function that clears the storage when someone goes back to the home page, restoring the navbar back to the original state.

[bradh11]

I like the updates on the dropdown arrow and likewise to the reset on clicking home. That was something I had thought about after #5146 merged. Nice to see you put that in here!

On the topic of session storage vs local storage for state mgmt -> I had considered that implementation but was thinking the likelihood of closing the page and coming back and expecting the dropdowns and scroll position to be exactly where you left off would be pretty low. I don't think it would be negative for that behavior to occur, but I also don't think it would be expected by the user.

That being stated - I believe more permanent storage for state might really shine with regards to the home page panels. @matt852 and I were discussing this just yesterday. I think a case could be made to even have a db table tracking that.

[bradh11]

Also, keep an eye on #5172 as it is introducing collapse capable sidebar. There may be some potential merge conflicts so we should coordinate updates accordingly.

[bradh11]

@DistantVoyager , what do you think about having the menu dropdown caret arrrows point left by default and down when expanded? It might “feel” more natural in that it will give the appearance of “unfurling” the menu.

[DistantVoyager]

...
On the topic of session storage vs local storage for state mgmt -> I had considered that implementation but was thinking the likelihood of closing the page and coming back and expecting the dropdowns and scroll position to be exactly where you left off would be pretty low. I don't think it would be negative for that behavior to occur, but I also don't think it would be expected by the user.
...

@bradh11 With localStorage as it's implemented currently, that behavior is what's happening. Currently, if a user closes the tab or window and then comes back later, the navbar state is restored (which I agree is not ideal).

Example with localStorage:

User closes the Nautobot tab or window. User then goes to Nautobot at some later point, but the navbar state is unexpectedly restored/kept from prior visit:

The change from localStorage to sessionStorage in this PR will fix that. localStorage persists across browser sessions and is not cleared unless the user explicitly clears browser data or the code removes it. But sessionStorage is specific only to the current session and gets cleared when the user closes the browser or the tab. Thus when they return, the navbar is back to normal.

Example with sessionStorage:

User closes the Nautobot tab or window. User then goes to Nautobot at some later point, and the navbar state is normal, as expected:

Let me know if that makes sense!

[bradh11]

...
On the topic of session storage vs local storage for state mgmt -> I had considered that implementation but was thinking the likelihood of closing the page and coming back and expecting the dropdowns and scroll position to be exactly where you left off would be pretty low. I don't think it would be negative for that behavior to occur, but I also don't think it would be expected by the user.
...

@bradh11 With localStorage as it's implemented currently, that behavior is what's happening. Currently, if a user closes the tab or window and then comes back later, the navbar state is restored (which I agree is not ideal).

Example with localStorage:

User closes the Nautobot tab or window. User then goes to Nautobot at some later point, but the navbar state is unexpectedly restored/kept from prior visit:

The change from localStorage to sessionStorage in this PR will fix that. localStorage persists across browser sessions and is not cleared unless the user explicitly clears browser data or the code removes it. But sessionStorage is specific only to the current session and gets cleared when the user closes the browser or the tab. Thus when they return, the navbar is back to normal.

Example with sessionStorage:

User closes the Nautobot tab or window. User then goes to Nautobot at some later point, and the navbar state is normal, as expected:

Let me know if that makes sense!

Yes. Makes much more sense now. Fully support this approach and change. I thought it was the opposite scenario - thanks for taking the time to explain.

[DistantVoyager]

@DistantVoyager , what do you think about having the menu dropdown caret arrrows point left by default and down when expanded? It might “feel” more natural in that it will give the appearance of “unfurling” the menu.

@bradh11 - how about this?

Before:

After:

I don't really have a preference one way or the other. I've seen both caret types for dropdown elements.

Not sure I'd have them point left, as I feel it looks a bit odd:

[matt852]

I like the point right for collapsed, point down for expanded options. This is looking really nice btw!

[bradh11]

I like the point right for collapsed, point down for expanded options. This is looking really nice btw!

This is my preference as well after seeing screenshots. Looking good. 👍

[gsnider2195]

Can this be updated to only set the clicked link to active if it was previously closed? Currently when you close a dropdown the link remains orange until you click on something else.

[DistantVoyager]

Updated!

[gsnider2195]

Got some feedback from @lampwins on this today.

• Can you try to make the arrows on the top level menu items look more like cloud?
  • Hover them all to the right so they're vertically aligned
  • Closed is an up pointing arrow and open is a down pointing arrow. You may be able to use a caret icon for this.

Cloud menu open:

Cloud menu closed:

• Can you change the sub menu items back to the previous behavior from demo.nautobot.com? We want to tweak that to make it work better with the buttons and make it look more like cloud but that can be done as a separate item

.navbar-fixed-left .navbar-nav > .dropdown > .nav-dropdown-menu > li > a:hover {
    transition: background-color 200ms ease;
    background-color: #cdf3ff1a
}

[DistantVoyager]

Got some feedback from @lampwins on this today.

• Can you try to make the arrows on the top level menu items look more like cloud?

  • Hover them all to the right so they're vertically aligned
  • Closed is an up pointing arrow and open is a down pointing arrow. You may be able to use a caret icon for this.

Cloud menu open:

Cloud menu closed:

• Can you change the sub menu items back to the previous behavior from demo.nautobot.com? We want to tweak that to make it work better with the buttons and make it look more like cloud but that can be done as a separate item

.navbar-fixed-left .navbar-nav > .dropdown > .nav-dropdown-menu > li > a:hover {
    transition: background-color 200ms ease;
    background-color: #cdf3ff1a
}

Updated - I changed the dropdown icon and the link style on hover and click to match that of Nautobot Cloud.

[gsnider2195]

Got some feedback from @lampwins on this today.

• Can you try to make the arrows on the top level menu items look more like cloud?

  • Hover them all to the right so they're vertically aligned
  • Closed is an up pointing arrow and open is a down pointing arrow. You may be able to use a caret icon for this.

Cloud menu open:

Cloud menu closed:

• Can you change the sub menu items back to the previous behavior from demo.nautobot.com? We want to tweak that to make it work better with the buttons and make it look more like cloud but that can be done as a separate item

.navbar-fixed-left .navbar-nav > .dropdown > .nav-dropdown-menu > li > a:hover {
    transition: background-color 200ms ease;
    background-color: #cdf3ff1a
}

Updated - I changed the dropdown icon and the link style on hover and click to match that of Nautobot Cloud.

This looks awesome! Thanks @DistantVoyager