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

Question

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

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.

Answer 1

You can use flexbox with two columns and change the state of the side nav using javascript

 const showHideSideNavBtn = document.querySelector('.showhide-nav'); const sideNav = document.querySelector('.side-nav'); showHideSideNavBtn.addEventListener('click',()=>{ if(sideNav.classList.contains('hide')){ sideNav.classList.remove("hide"); showHideSideNavBtn.innerText='Hide the Side-Nav'; } else{ sideNav.classList.add("hide"); showHideSideNavBtn.innerText='Show the Side-Nav' } })

 body{ margin:0; } .container { display:flex; height: 100%; } .side-nav, .main-content { flex-direction: column; padding:1rem; } .side-nav { background:#ddd; width: 100px; position: relative; left:0; transition: all 0.4s linear; } .main-content{ flex:1; } .hide { position: absolute; left: -100%; top:0; }

 <div class='container'> <div class='side-nav hide'> <span>text</span> <span>text</span> <span>text</span> </div> <div class='main-content'>Main content <button class='showhide-nav'>Show Side-Nav</button></div> </div>

Answer 2

I share an idea of how to achieve that functionality, injecting this script to web pages. The contain:content property does most of the work so the div's content doesn't overflow, I've tested it in chrome and it works fine.

const HTMLBody= document.body.innerHTML
const newHTML= `
                <section style="display:flex">
                    <div style="width:200px">
                        <p>Hello</p>
                    </div>
                    <div style="position:relative;contain:content;width:calc(100% - 200px);">${HTMLBody}</div>
                </section>
`
document.body.innerHTML= newHTML
document.body.style="padding: 0px;"

I have tested the script on: wikipedia, stackover and github In the vast majority of websites it should work

Answer 3

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.

Answer 4

Maybe if you change the website structure to something like this:

<body style="display: grid; grid-template-areas: 'c-nav c-content'">
    <nav style="grid-area: c-nav"></nav>
    <div style="grid-area: c-content"> {the original content should go here} </div>
</body>

I'm not sure if this is what you want to do but... 😆