Link to the video here.

For the desktop view the menu is vertical and animates in from the left side. On the mobile view it is horizontal and fixed to the bottom.

When discussing icons he mentions font-awesome has new duotone icons with SVG paths that have classes “fa-secondary” and “fa-primary” or you can also create your own duotone icons.

“You don’t need Bootstrap” is the opening line…

This menu does not have a mobile toggle but instead uses a small menu on mobile with no logo.

The structure of the menu is pretty basic nav > ul > li > a > svg & span

Note that on the desktop vertical menu the last item is pushed to the very bottom of the column. We achieve this in flexbox by setting the margin of the last item to auto.

main {
  /*Leaves room for left navbar*/
  margin-left: 5rem;
  padding: 1rem;
}

.navbar {
  position: fixed;
  transition: width 200ms ease;
  bottom: 0;
  width: 100vw;
  height: 5rem;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav-item {
  width: 100%;
}

.nav-item:last-child {
  margin-top: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
  filter: grayscale(100%) opacity(0.7);
}

.nav-link:hover {
  filter: grayscale(0%) opacity(1);
  /* CHange bg and color as well*/
}

.link-text {
  display: none;
  margin-left: : 1rem;
}

.nav-link svg {
  min-width: 2rem;
  margin: 0 1.5rem;
}

.navbar:hover {
  /* width: 16rem; */
}

.navbar:hover .link-text {
  /* display: block; */
}

.fa-primary {
  color: var(--primary);
}

.fa-secondary {
  color: var(--secondary);
}

.fa-primary, .fa-secondary {
  transition: var(--transition-speed);
}

.logo {
  display: none;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--text-secondary);
}

.logo svg {
  transform: rotate(0deg);
  transition: transform var(--transition-speed);
}

.navbar:hover .logo svg {
  transform: rotate(-180deg);
}


@media only screen and (min-width: 600px) {
  .navbar {
    top: 0;
    width: 5rem;
    height: 100vh;
  }

  .navbar:hover {
    width: 16rem;
  }

  .navbar:hover .link-text {
    display: inline;
    transition: opacity var(--transition-speed);
  }

  .logo {
    display: block;
  }

  .navbar-nav {
    flex-direction: column;
  }

  .nav-link {
    justify-content: center;
  }

  main {
    margin: 0;
  }
}

/* CUSTOM BROWSER SCROLLBAR */

body::-webkit-scrollbar {
  width: 0.5rem;
}
body::-webkit-scrollbar-track {
  background: #222;
}
body::-webkit-scrollbar-thumb {
  background: blueviolet;
}