fix(sidebar): make left sidebar scrollbar visible on hover and keep "administration" & "settings" sticky at the bottom

[Lucifergene]

Fixes RHDHBUGS-262

https://github.com/user-attachments/assets/51d53eb0-fbd5-492b-bed4-3e33209d8dd6

[its-mitesh-kumar]

/retest-required

[Lucifergene]

/retest

[Lucifergene]

/retest-required

[its-mitesh-kumar]

I think as soon as user hover on sidebar scrollbar should be visible. But currently only when user start scrolling then only scrollbar is visible. @ShiranHi @Lucifergene WDYT ?

https://github.com/user-attachments/assets/23619360-419a-46ac-a99e-a041ed2b1035

[Lucifergene]

Yeah, makes sense. Thanks @its-mitesh-kumar :)

[ShiranHi]

I think as soon as user hover on sidebar scrollbar should be visible. But currently only when user start scrolling then only scrollbar is visible. @ShiranHi @Lucifergene WDYT ?

I agree, the scrollbar should be visible on hover. Thank you.

[Lucifergene]

@its-mitesh-kumar Tried the various edge cases to reproduce the issue:

Added dummy items in:

• [x] Global nav items
• [x] new sidebar group
• [x] nested items

But I was unable to reproduce it in every situation.

As per your video, I have also tried disabling the Global Header.

https://github.com/user-attachments/assets/14e46d24-424d-4ee5-9b4a-dd7c941c87f8

Can u share some more information on the reproduction steps?

[its-mitesh-kumar]

@Lucifergene I tested it again I can see the same issue adding the screen recording for the same.

https://github.com/user-attachments/assets/84b8a5ea-230f-433a-bce2-3beb68388c57

I just did add below configuration.

  frontend:
    default.main-menu-items: # key for configuring static main menu items
      menuItems:
        default.my-plugin:  
          priority: 10  
          parent: favorites  
          title: My Plugin
        default.favorites:  
          icon: favorite  
          title: Favorites   
          priority: 100  
        default.my-custom-item: # Must use 'default.' prefix
          title: My Custom Page
          icon: star
          to: "/my-custom-page"
          priority: 85
        default.my-menu-group: # Parent menu group
          title: My Tools
          icon: folder
          priority: 75
        default.nested-item: # Child menu item
          title: Nested Tool
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item9: # Child menu item
          title: Nested Tool2
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item8: # Child menu item
          title: Nested Tool3
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item7: # Child menu item
          title: Nested Tool4
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10


        default.nested-item6: # Child menu item
          title: Nested Tool1
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item5: # Child menu item
          title: Nested Tool5
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item4: # Child menu item
          title: Nested Tool6
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item3: # Child menu item
          title: Nested Tool7
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item2: # Child menu item
          title: Nested Tool8
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item1: # Child menu item
          title: Nested Tool9
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10

[Lucifergene]

@its-mitesh-kumar I configured the nav items as you suggested, but it's still not reproducible.

https://github.com/user-attachments/assets/011816f1-5ab6-46bf-bde0-c0d4c80dcb0a

[HusneShabbir]

@Lucifergene I tested it locally and observed the same behavior. The side scrollbar only becomes visible when scrolling, but it's not shown initially. I've attached a recording for your reference.

https://github.com/user-attachments/assets/4ded83e2-491d-48b6-9f4f-fa9d9f85ebf8

[Lucifergene]

The issue has been identified. Its dependant on the scrollbar settings in Mac.

Doing further tests on this.

[Lucifergene]

@its-mitesh-kumar Updated the scrollbar implementation to give the same feel across all OS and browsers. PTAL.

[HusneShabbir]

/lgtm Tested Locally, Works as expected

[invincibleJai]

/retest

[its-mitesh-kumar]

@HusneShabbir @Lucifergene is two lines above Administration visible to you too? On main branch with same config, I am able to see like below.

@ShiranHi does this look good to you ?

[Lucifergene]

@its-mitesh-kumar Its because you have put the nav items in the top section. So you see both the lines together.

[ShiranHi]

@ShiranHi does this look good to you ?

We don't include a borderline after the last item "Nested tool9".

[Lucifergene]

@ShiranHi I think the existence of the borderline after NestedTool 9, is not related to this fix. We can have a different bug opened for that.

[its-mitesh-kumar]

/retest-required

[Lucifergene]

/retest-required

[debsmita1]

/approve

[christoph-jerolimov]

/retest

[christoph-jerolimov]

/retest /hold

Sorry, but i like to hold this back and take a deeper look. Will setup a call.

[github-actions[bot]]

This PR is stale because it has been open 7 days with no activity. Remove stale label or comment or this will be closed in 21 days.

[Lucifergene]

/remove-stale

[github-actions[bot]]

This PR is stale because it has been open 7 days with no activity. Remove stale label or comment or this will be closed in 21 days.

[github-actions[bot]]

This PR is stale because it has been open 7 days with no activity. Remove stale label or comment or this will be closed in 21 days.

[Lucifergene]

/retest

[Lucifergene]

Not stale, work going on

[github-actions[bot]]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-3255
• quay.io/rhdh-community/rhdh:pr-3255-65b0c178