How to insert sidebar to the left of all kind of webpage?

user_11974735 0
Viewed 295

I need to insert a sidebar to the left, inside the current page, to show output. Insertion should not hide the main page,

enter image description here

rather, it should squeeze or adjust, showing all content.

Problem is, the solution I got does not apply to all type of webpage, is there a way to insert sidebar the way I described?

Thanks.

google-chrome-extension sidebar dom html javascript
1 Answers

I don't believe there could be a truly universal solution, but I hope I can support as much cases as possible with my createDockedSidebar function.

It takes the following parameters :

  • parentElement is the one in which the sidebar will be mounted (body by default) ;
  • element is the sidebar itself (a newly created div by default) ;
  • size is the width/height of the sidebar (required number) ;
  • placement is either left, top, right or bottom (left by default) ;
  • strategy is the approach used to make space for the sidebar :
    • margin & padding apply either to parentElement
    • children-margin & children-padding apply either to all children of parentElement
    • children-transform applies translateX/translateY to all children of parentElement
    • container moves all children of parentElement another element ;
  • container is the element in which all children of parentElement are moved when using the container strategy.

children-transform & container are the only strategies that may support top & bottom values for placement.

On Wikipedia, container is the only strategy that will work properly. Luckily, it's a server-side rendered website.

Indeed, client-side rendered websites have higher chances of breaking this mode, as they might move elements back to their original position, especially during navigation. Although MutationObserver might help overcoming this on PWAs, they would probably become unstable.

More tests :

  • on StackOverflow, all strategies but container work, although children-margin is the only one that will handle the header ;
  • on MDN, all strategies will work except top/bottom placements ;
  • on Google, all strategies except container will work for left placement and none will work for top/right/bottom placements ;
  • on GitHub and Reddit (old), all strategies except top/bottom placements and right placement for children-transform will work.
user_84589650
Related