joyent-portal/packages/my-joy-instances/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders <Menu /> without throwing 1`] = `null`;

exports[`renders <Menu links /> without throwing 1`] = `
.c1 {
  margin-bottom: 2.25rem;
}

.c6 {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
}

.c5 {
  color: rgb(59,70,204);
  -webkit-text-fill-color: currentcolor;
}

.c5:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c0 {
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
}

.c3 {
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.c3:not(:last-child) {
  margin-right: 1.875rem;
}

.c4 {
  color: rgb(70,70,70);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0.75rem;
  padding-bottom: 1rem;
  position: relative;
}

.c4.active {
  font-weight: 600;
}

.c4.active:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(70,70,70);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.c2 {
  background: rgb(250,250,250);
  list-style-type: none;
  padding: 0.8125rem 0rem;
  margin: 1.125rem 0 0 0;
  max-height: 3.125rem;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.c2:after {
  width: 100%;
  height: 0.0625rem;
  background: rgb(216,216,216);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

@media only screen and (min-width:48em) {
  .c0 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c0 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c0 {
    width: 59rem;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
  className="c0"
>
  <div
    className="c1"
  >
    <ul
      className="c2"
    >
      <li
        className="c3"
      >
        <a
          className="c4 c5 c6"
          to="/:name/summary"
        >
          summary
        </a>
      </li>
      <li
        className="c3"
      >
        <a
          className="c4 c5 c6"
          to="/:name/tags"
        >
          tags
        </a>
      </li>
      <li
        className="c3"
      >
        <a
          className="c4 c5 c6"
          to="/:name/metadata"
        >
          metadata
        </a>
      </li>
      <li
        className="c3"
      >
        <a
          className="c4 c5 c6"
          to="/:name/networks"
        >
          networks
        </a>
      </li>
      <li
        className="c3"
      >
        <a
          className="c4 c5 c6"
          to="/:name/firewall"
        >
          firewall
        </a>
      </li>
      <li
        className="c3"
      >
        <a
          className="c4 c5 c6"
          to="/:name/dns"
        >
          dns
        </a>
      </li>
      <li
        className="c3"
      >
        <a
          className="c4 c5 c6"
          to="/:name/snapshots"
        >
          snapshots
        </a>
      </li>
    </ul>
  </div>
</div>
`;