Issue #411 feat: Sticky sidebar

[lakhanmandloi]

Pull Request for Issue #411 .

Summary of Changes

Sidebar menu should stay sticky after scrolling down the page.

Before Fix sidebar used to scroll up with the page

After fix - before the page is scrolled down

After fix - after the page is scrolled down the menu should stick

After fix - scrollbar if the no. of menu-items goes beyond the space available then scrollbar should be added.

Testing Instructions

1. Log in Admin area
2. Scroll down the page. the sidebar should stick to the top after reaching at top. and should nonstick once the scrolling up has reached the page top.
3. Toggle menu and repeat step 2.
4. Add some more menu-items , if the vertical space is not sufficient to accommodate, then scrollbar should be automatically added.

Expected result

Sidebar menu should be easily accessible even after scrolling & toggling.

Actual result

Sidebar menu should be easily accessible even after scrolling & toggling.

Documentation Changes Required - No

[dgrammatiko]

FWIW: there is a newer version of the menu based on @coolcat-creations designs that me and @ciar4n try to implement: https://codepen.io/dgrammatiko/pen/jzLGaG

In that sense almost all the code for the current menu is dropped

[laoneo]

Will this new design also be sticky?

[lakhanmandloi]

@dgrammatiko np. do let me know if i can contribute there. :)

[ciar4n]

Considering this PR applies to the sidebar wrapper rather than the menu, it is still a valid improvement regardless of what is decided with the menu.

[ciar4n]

Will this new design also be sticky?

@coolcat-creations @svom ?

[dgrammatiko]

@lakhanmandloi you can fork that code pen and do any changes. The reason me and @ciar4n are using codepen.io for initial implementations is because it's easier to collaborate and showcase ideas and also it's the only way to ask for an accessibility audit before we even go and create a PR.

[lakhanmandloi]

Considering this PR applies to the sidebar wrapper rather than the menu, it is still a valid improvement regardless of what is decided with the menu.

Agree. I think we can merge this pr. New menu can come later in another pr.

you can fork that code pen and do any changes. The reason me and @ciar4n are using codepen.io for initial implementations is because it's easier to collaborate and showcase ideas and also it's the only way to ask for an accessibility audit before we even go and create a PR.

Agree. actually that's nice idea to showcase before creating pr. :+1: . I will leave new menu up-to you guys and shift on to other pending issues so that we can get stable j4 as early as possible.

Thank you :)

[svom]

Sorry for the late answer. I think that the sidebar should be fixed, otherwise it can be very confusing on longer pages and it also looks kind of weird, if there's so much whitespace on the leftl

[coolcat-creations]

+1 for fixed ;) Not only because it might look weird... It's kind of a "dock". Items should be always at the expected place while working.

[ciar4n]

I'm gonna merge this... thank you @lakhanmandloi 👍

There is now an issue where 2nd level menu items are inaccessible if they extend beyond the viewport but we can examine this further once the menu structure is decided.