Add shadow to sidebar header on scroll

[andrewtavis]

Terms

• [X] I have searched open and closed feature requests
• [X] I agree to follow activist's Code of Conduct

Description

This issue is to add a header to the sidebar header when the user scrolls the content (if there's content to scroll). We can use similar code to what's being done for the website header, but the scroll trigger should only be within the left sidebar content.

Note that we can see where this should happen on pages like the template event when the sidebar is opened.

Contribution

Happy to support someone with this or get to it myself eventually! This is a great good first issue for someone who's new to the activist community, or longer term contributors can also hop in if interested 😊

[lchauha]

Hi @andrewtavis I would like to work on this issue. Please assign

[andrewtavis]

Hey @lchauha 👋 Thanks for your interest in activist and helping out here :) Will assign now 😊 Please let me know if there's anything I can do to help!

[arescrimson]

Will write in here for issue reassignment per @andrewtavis meeting.

[andrewtavis]

Thanks, @arescrimson! Looking forward to the contribution here and in #579 :)

Again @lchauha, please let me know if you'd like to pick up another issue later 😊

[andrewtavis]

Hey @arescrimson, it would be easy for you to use elem-shadow-sm for the shadow, and then we just need to show it only on scroll :)

[andrewtavis]

Also the behavior of adding a shadow on scroll can be seen in HeaderWebsite. The big problem is that SidebarLeftHeader is not in the same container as the scrollable elements, so picking up a scroll within this component will be the challenge here.

[arescrimson]

Hey @andrewtavis , got the time to investigate this problem more thoroughly and I'm a bit unsure on how to proceed. Basically, I think I have two options here; since there isn't an easy way of picking up a scroll within the SidebarLeftHeader component, Option 1 would be to try and implement the scrolling logic within SidebarLeft. I thought of this because of the existing implementation in HeaderWebsite, but I'm not sure if it is applicable to this situation.

This could potentially be easier for potentially adding a listener for scrolling within the main sidebar component, but also detrimental if we want the scrolling logic to be handled within SidebarLeftHeader itself. Option 2 would just be to have all of the logic handled within SidebarLeftHeader, but would be harder to listen for scroll changes.

Let me know your thoughts! Interesting situation I've got, and if you have any ideas on how I should proceed, please let me know. Thank you! 😁

[andrewtavis]

Hey @arescrimson 👋 Thanks for the info on all of this!

Let's check in on the progress on #662 as that could determine some of the work here. @rigojr, have you had a moment to see if your approach with the default scrollbar is viable on Firefox/Linux Firefox? I again am really reticent to write a scrollbar, but we'd need to consider it or changing the design if we're not able to get the scrollbar properly pushed out to the gutter so it's not impacting the rest of the UI.

If we are going to be checking these scroll events for that component, then we can also use them for this.

[rigojr]

Hi @andrewtavis kind of busy this week, I'll keep you inform as soon as I make it.

[andrewtavis]

No stress, @rigojr :) Thanks for letting us know!

[andrewtavis]

Hey @josueemartinezz and/or @zimo27: I'm seeing that each of you have commits with fixes for this. Does one of you want to send along a PR?

[andrewtavis]

Slightly reworked the implementation from @josueemartinezz to add in the top shadow on scroll in 5852fa0 😊 The footer shadow's still not done, but I'll add details for that in the issue. Thanks all!