/* https://www.w3schools.com/howto/howto_js_sidenav.asp */

/* The side navigation menu */
.side-nav {
  height: 100%; // 100% Full-height
  width: 250px; // Fixed width, move the container with transforms to hide/show
  position: fixed; // Stay in place
  z-index: 10; // Stay on top
  top: 0;
  right: 0;
  background-color: $c-pallette-transp-heavy; // Transp Black
  border: 1px solid $c-pallette-transp-medium;
  display: flex;
  flex-direction: column;
  transition: 0.35s; // 0.35 second transition effect to slide in the side-nav
  transform: translateX(100%); // Slide in the side-nav from the right

  &.open {
    transform: translateX(0);
  }

  /* The navigation menu links */
  a {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    text-decoration: none;
    font-size: 18px;
    color: $c-pallette-text-muted;
    border-bottom: 1px solid #161616;
  }

  button {
    white-space: nowrap;
    width: 100%;
  }

  /* Position and style the close button (top right corner) */
  .close-btn {
    text-align: right;
    font-size: 36px;
    display: block;
    margin-top: -15px; // Too much space with large font
  }

  .nav-header {
    position: sticky;
    top: 0;
    padding: 4px 0;
  }

  .nav-contents {
    overflow-y: auto;
    overflow-x: hidden; // Disable horizontal scroll
  }
}

.nav-opener {
  position: absolute;
  right: 100%; // Right 100% pins this to the outside of the left edge.
  top: 50%;
  z-index: 11; // Stay on top
  cursor: pointer;
  background: $c-pallette-transp-heavy;
  border: 1px solid $c-pallette-transp-medium;
  border-right: none;
  border-bottom-left-radius: 10%;
  border-top-left-radius: 10%;
  transition: 0.35s; // 0.35 second same time as the side-nav
  transform: translateY(-50%); // use with margin-top 50% to center vertically

  &:hover {
    color: $c-pallette-accent;
  }

  & > div {
    padding: 0.75rem 0.5rem;
    font-size: 2rem;
  }
}

/* When you mouse over the navigation links, change their color */
.side-nav a:hover {
  color: $c-pallette-accent;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the side-nav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .side-nav {
    padding-top: 15px;
  }

  .side-nav a {
    font-size: 14px;
  }
}
