DEV Community

Areeb ur Rub
Areeb ur Rub

Posted on • Edited on

3

Collapsible SideBar, in 10 lines of javascript;

Buy Me A Coffee

Some websites use Sidebar in place of Navbar to make the user navigate through there site.

To make this what we can do is, create a div with id sidebar and fix it position on the page then set a height of full page and a width as per need the set top:0 and left: -(the width) if you are adding some border the reduce then add it also to the width;

now create two buttons with id close and open, we can also do it with one button but with two button it will be easier. Fix the position of Buttons also.

Now using javascript get the buttons and sidebar, use .onclick to check the click on both button and change the sidebar.style.left to make the sidbar come in and out.

I have used a frost glass effect in the sidebar background have a look at it

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay