Custom Left Vertical Navigation

Shift page to the right. Disappears for mobile view.

by Jordan Dayton

HTML

<body>
    <div class="topbar"></div>
  <div class="navback leftnav">
<div class="navbar">
    
  <div class="item hvr-shrink" id="homeitem">
    <a href="https://community.canopytax.com/">
    <div>
        <img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
      <div class="label">Home</div>
    </div>
  </a>
  </div>

  <div class="item hvr-shrink">
    <a href="https://community.canopytax.com/central/">
    <div>
      <img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
      <div class="label">Central</div>
    </div>
  </a>
  </div>
  
  <div class="item hvr-shrink">
    <a href="https://community.canopytax.com/questions/">
    <div>
      <img src="https://png.icons8.com/ios/35/ffffff/chat.png">
      <div class="label">Questions</div>
    </div>
  </a>
  </div>

  <div class="item hvr-shrink">
    <a href="https://community.canopytax.com/resources/">
    <div>
      <img src="https://png.icons8.com/ios/35/ffffff/star.png">
      <div class="label">Resources</div>
    </div>
  </a>
  </div>

  <div class="item hvr-shrink">
    <a href="https://community.canopytax.com/events/">
    <div>
      <img src="https://png.icons8.com/ios/35/ffffff/overtime.png">
      <div class="label">Events</div>
    </div>
  </a>
  </div>

  <div class="item hvr-shrink">
    <a href="https://community.canopytax.com/canopy-corner/">
    <div>
      <img style="height: 40px; width:40px;" src="https://community.canopytax.com/cfs-filesystemfile/__key/communityserver-components-sitefiles/Assets/Canopy-White-Emblem-Circle-100x100.png?_=636602351023702639">
      <div class="label">Canopy</div>
    </div>
  </a>
  </div>
  <hr />
</div>
</div>

</body>

CSS

@media all and (min-width:670px) {
 
body {
  padding-left: 100px;
}
 
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.navback {
  position: fixed;
  top: 0;
  left: 0px;
  width: 100px;
  height: 100%;
  background: #283237;
  z-index: 11;
}

.navbar {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100px;
  height: 60vh;
  background: #283237;
  display: flex;
  z-index: 12;
  flex-direction: column;
}

.topbar {
  border-top: 1px solid #000;
  top: 44px;
}

.navbar .item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 40px;
  max-height: 100px;
  z-index: 5;
}
 
.navbar .item div.label {
  color: #fff;
  position: relative;
  top: 5px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  left: -100px;
}

.navbar:hover .item .label {
  left: 0px;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }

.leftnav a {
  text-decoration: none;
}

.leftnav a:hover {
  color: #fff;
  text-decoration: none;
}


.item.home {
  background-color: #899ea9;
}
.item.central {
  background-color: #EE0979;
}
.item.questions {
  background-color: #1498F5;
}
.item.resources {
  background-color: #964BD6;
}
.item.events {
  background-color: #FF9908;
}
.item.canopy-corner {
  background-color: #00BF4B;
}

JavaScript

// get the first directory by splitting "/dir/path/name" into an array on '/'
// get [1] instead of [0] b/c the first should be blank. wrap in /s.
hereDir = "/" + window.location.pathname.split("/")[1] + "/";

// rebuild the URL since you're using absolute URLs (otherwise just use hereDir)
hereUrl = window.location.protocol + "//" + window.location.host + hereDir;

const navitem = $(".item")
    .find("[href^='" + hereUrl + "']")
        .closest(".item")
if (hereUrl==="https://community.canopytax.com/central/") {
		navitem.addClass("central")
}
else if (hereUrl==="https://community.canopytax.com/questions/") {
		navitem.addClass("questions")
}
else if (hereUrl==="https://community.canopytax.com/resources/") {
		navitem.addClass("resources")
}
else if (hereUrl==="https://community.canopytax.com/events/") {
		navitem.addClass("events")
}
else if (hereUrl==="https://community.canopytax.com/canopy-corner/") {
		navitem.addClass("canopy-corner")
}
else {
        $("#homeitem").addClass("home")
}