Re-introduce proper hover highlighting and styling for IDE left sidebar icon and header
NOTE: This issue has been closed and is replaced with two new issues as part of the new incremental-approach epic:
Hover Highlighting issues
The hover highlighting functionality for the Web IDE left sidebar was removed as part of making the left sidebar collapsible.
It was removed because restructuring of the HTML meant CSS hover classes could no longer be used, and an alternative Javascript implementation introduced undesirable delays between hovering the header text and highlighting the icon, and vice-versa.
So, this issue was created to move the scope of making this work without undesirable delays.
See more context in this thread on the original MR
A branch containing the Javascript implementation has also been preserved on branch 22457-refactor-web-ide-collapsable-sidebar-with-js-header-highlight for reference, for the possibility of reintroducing the same implementation and improving it to make it work without a delay.
Other styling issues
Mismatch height
Also, as part of this issue, we need to fix the mismatch IDE header height in the icon vs the text:
Text alignment
.ide-sidebar-project-title is not aligned with the left border of the content below the title as it used to be.
Before:
After:
