Refactor sidebar to use slots

[marcellamaki]

Summary

Makes use of slots
Reduces the number of sticky calculations (no longer one for the tabs)

References

sticky-scroll.mp4

Reviewer guidance

This whole approach might be questionable because it is Friday evening

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[thanksameeelian]

this is not my actual sentiment, but reading your branch name made my brain go right to:

stop-side-barring.mp4

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0a16.dev0_git.29.g90909511.pex
Windows Installer (EXE)	kolibri-0.16.0a16.dev0+git.29.g90909511-unsigned.exe
Debian Package	kolibri_0.16.0a16.dev0+git.29.g90909511-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0a16.dev0+git.29.g90909511-0.3.0.dmg
TAR file	kolibri-0.16.0a16.dev0+git.29.g90909511.tar.gz
WHL file	kolibri-0.16.0a16.dev0+git.29.g90909511-py2.py3-none-any.whl

[thanksameeelian]

i noticed that this introduced a bit of weirdness with the sidebar headers that i couldn't recreate on develop - the "search" header stretching beyond the bounds of the sidebar it's heading up when the window is medium size.

sidebar-headers.mov

i didn't encounter the same thing on develop:

even though it's a small difference, i think it takes away a little bit from the clarity of what those headers control.

as an aside, i think it would be really nice if we could use CSS to truncate the search box placeholder text & add an ellipsis in this medium-size case where the text is not fully visible, as it cuts off a bit abruptly and as placeholder text isn't scrollable, so it feels a bit mysterious if you're only viewing it in a medium window size haha. but i know it's the same way on develop! it just caught my eye during this review and i thought it might be worth a small follow-up issue if others agree.

[marcellamaki]

the "search" header stretching beyond the bounds of the sidebar it's heading up when the window is medium size

ah good catch, I thought I had reverted that (unintentional) change! yes this should definitely be fixed

[rtibbles]

Merging to prevent the sidebar issue interfering with QA.