mwcpl/dist/collection/components/mwcpl-navbar/mwcpl-navbar.css

Master's Web Component Pattern Library

:host {
  display: block;
  font-family: Roboto, sans-serif;
}

nav {
  width: 5rem;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  box-shadow: var(--mwcpl-navbar-shadow, 1px 0 0 #d3d3d3);
  transition: width 100ms ease;
}

:host([fixed]) nav {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
}

@media only screen and (min-width: 600px) {
  nav:hover {
    width: 16rem;
  }
}
@media only screen and (max-width: 599px) {
  nav {
    top: unset;
    height: 3rem;
    box-shadow: var(--mwcpl-navbar-shadow-mobile, 0 -1px 0 #d3d3d3);
    overflow-x: auto;
    width: 100%;
  }

  :host([fixed]) {
    bottom: 0;
    width: 100vw;
  }

  ul {
    flex-direction: row;
  }
}