Responsive Sidebar Navigation in css
Tags: html, css, javascript, webdev
Published: 2022-11-25 05:39:45

Hello Guys, today i will be showing a responsive sidebar navigation created with HTML,CSS and Javascript.It is easy to implement and is not complicated to understand.
I learnt some parts of it from Kevil Powel, You can checkout his YT channel here - https://www.youtube.com/@KevinPowell

Let's get started...

# HTML - 
```html
<nav class="navigation">
  <div class="logo">Logo</div>
  <button class="hamburger"><i class="fa-solid fa-bars hamburger-icon"></i> </button>
  <ul class="nav-list" data-visible="false">
    <li class="nav-item">Nav 1</li>
    <li class="nav-item">Nav 2</li>
    <li class="nav-item">Nav 3</li>
    <li class="nav-item">Nav 4</li>
  </ul>
</nav>
```

* So, i have created a simple Navbar with one logo and a list with some items. We will use data-visible attribute to toggle the side navbar between true and false.
* Also add the font-awesome script via CDN or however you want to add it because i am using it for hamburger and cross icon here.

# CSS - 
```css
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.navigation {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: darkslateblue;
}
.logo {
  color: white;
}
.nav-list {
  display: flex;
  gap: 1rem;
  color: white;
  transition: all 0.4s ease-in-out;
}

.nav-list[data-visible="true"] {
  transform: translateX(0);
}

.hamburger {
  position: fixed;
  top: 1rem;
  right: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: none;
}

@media screen and (max-width: 500px) {
  .navigation {
    padding-right: 0;
  }
  .nav-list {
    position: fixed;
    right: 0;
    top: -5px;
    z-index: 1000;
    transform: translateX(100%);
    flex-direction: column;
    gap: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2rem 5rem;
    color: white;
    border-radius: 10px;
    backdrop-filter: blur(4px);
  }
  .hamburger {
    display: block;
    color: white;
    z-index: 1001;
  }
}
```

* I have styled the navbar with flex and set the hamburger icon at the right top corner with position fixed and used z-index to make stack it at the top.
* Then in media queries i used the position on my nav-list to put it at right top corner and used z-index, 1 less than the hamburger so that it won't hide the hamburger icon.Also some other styling for the sidebar.
* I used transform translate to push it 100% towards right side on horizontal axis , out of the viewport so, i can use it to translate back with some transition to look like it is sliding from right and coming it into viewport.
* Hamburger icon will be visible at viewport smaller than 500px, you can set it according to your projects need.

# Javascript - 
```js
const navbar = document.querySelector(".nav-list");
const btn = document.querySelector(".hamburger");
const hamburgerIcon = document.querySelector(".hamburger-icon");

btn.addEventListener("click", () => {
  const visibility = navbar.getAttribute("data-visible");
  if (visibility === "false") {
    navbar.setAttribute("data-visible", true);
    hamburgerIcon.classList.add("fa-rectangle-xmark");
    hamburgerIcon.classList.remove("fa-bars");
  } else {
    navbar.setAttribute("data-visible", false);
    hamburgerIcon.classList.remove("fa-rectangle-xmark");
    hamburgerIcon.classList.add("fa-bars");
  }
});
```

* Here i am accessing my nav-list,hamburger button and hamburger icon
* The i have attached an click event listener on my button and inside it stored my data-visible attribute value on a variable.
* After that with if-else , i have checked , if the data-visible attribute value is false, then set it true , else set it false.
* We are also changing the hamburger icon to cross icon and vice versa based on our data-visible attribute value.
* You can check in the CSS section that i have style element having data-visible attribute set to true.

```css
...
.nav-list[data-visible="true"] {
  transform: translateX(0);
}
...
```
* So it is saying if the nav-list have data-visible set to true then translate it to 0, back into viewport with some transition i defined in css nav-list styling.


# Demo - 
{% codepen https://codepen.io/shubhamtiwari909/pen/QWxMwxy %}


You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90