Creating a Sidebar with Active Links

Suppose we wish to create a sidebar menu that tracks lively hyperlinks.

First, let’s create the sidebar container div:

<div id="sidebar-container">

</div>

Assume our data-sidebar-links are being handed from an ERB file:

<div id="sidebar-container" data-sidebar-links="<%= @sidebar_links %>">

</div>

Now, let’s set a title on the high of the sidebar:

<div id="sidebar-container" data-sidebar-links="<%= @sidebar_links %>">
  <div class="sidebar-heading">
    <%= @title %>
  </div>
</div>

Now, we will loop by every hyperlink. We are able to place an href round a div containing an icon and title for the hyperlink:

<div id="sidebar-container" data-sidebar-links="<%= @sidebar_links %>">
  <div class="sidebar-heading">
    <%= @title %>
  </div>
  <div id="menuContainer">
    <% @sidebar_links.every do |hyperlink| %>
      <a href="https://style-tricks.com/<%= hyperlink.fetch(:path,"') %>" class="list-group-item sidebar-link">
        <i class="<%= hyperlink.fetch(:icon,'') %>"></i>
        <%= hyperlink.fetch(:title,'') %>
      </a>
    <% finish %>
  </div>
</div>

Now, let’s sort out our JS. First, we’re going to add a listener for when content material has loaded within the DOM to ensure we add the listeners on the sidebar on the proper time:

doc.addEventListener('DOMContentLoaded', (occasion) => {

});

Now, let’s seize the url within the browser to see which hyperlink needs to be lively. We’re additionally going to arrange a reference to the hyperlinks:

doc.addEventListener('DOMContentLoaded', (occasion) => {
  const currentPath = window.location.pathname;
  const sidebarLinks = doc.querySelectorAll('.sidebar-link');
});

Now, let’s loop by every hyperlink and reset their lively standing. To do that, we are going to take away the lively class fashion from all hyperlinks then reset the lively class fashion solely to the hyperlink who’s href is the browser’s url:

doc.addEventListener('DOMContentLoaded', (occasion) => {
  const currentPath = window.location.pathname;
  const sidebarLinks = doc.querySelectorAll('.sidebar-link');
  sidebarLinks.forEach((hyperlink) => {
    hyperlink.classList.take away('lively');
    if (hyperlink.getAttribute('href') === currentPath) {
      hyperlink.classList.add('lively');
    }
  });
});

Lastly, we will add styling:

#sidebar-container {
  width: 20vw;
  top: 100vh;
  min-height: 100vh;
  background-color: black;
  coloration: #fff;
}

#sidebar-container: This can be a CSS ID selector. It selects the HTML aspect with id="sidebar-container". It units the width to twenty% of the viewport’s width (vw), the peak to 100% of the viewport’s top (vh), and the minimal top to 100vh, guaranteeing that it all the time takes up not less than the complete top of the viewport. It additionally units the background coloration to black and the textual content coloration to white.

#sidebar-container .sidebar-heading {
  font-size: calc(1.275rem + .3vw)!vital;
  border-bottom: 1px stable #EEEEEE;
}

#sidebar-container .sidebar-heading: This can be a CSS descendant selector. It selects any aspect with the category .sidebar-heading that could be a descendant of #sidebar-container. It units the font dimension utilizing a calc() operate, which helps you to carry out calculations to find out CSS property values. The !vital declaration will increase the precedence of this CSS rule.

#sidebar-container .list-group-item {
  show: flex;
  text-decoration: none;
  coloration: white;
  transition: background-color 0.3s;
  border: none;
  font-size: 1rem;
}

#sidebar-container .list-group-item: This selects any aspect with the category .list-group-item that could be a descendant of #sidebar-container. It units the show property to flex, permitting for versatile layouts. It additionally removes textual content ornament (like underlines), units the colour to white, provides a transition impact to the background coloration, removes the border, and units the font dimension.

#sidebar-container .sidebar-heading,
#sidebar-container .list-group-item {
  padding: 1.25rem;
}

#sidebar-container .sidebar-heading, #sidebar-container .list-group-item: This selects each .sidebar-heading and .list-group-item parts inside #sidebar-container and units their padding.

#sidebar-container .list-group-item:hover,
#sidebar-container .list-group-item.lively {
  background-color: #343a40;
}

#sidebar-container .list-group-item:hover, #sidebar-container .list-group-item.lively: This is applicable types to .list-group-item parts when they’re being hovered over (mouse pointer is on it) or they’ve the lively class.

#sidebar-container .list-group-item i {
  font-size: 1.2em;
}

#sidebar-container .list-group-item i: This selects i parts inside .list-group-item parts and units their font dimension.

Hope you loved making a sidebar!